bedrock icon indicating copy to clipboard operation
bedrock copied to clipboard

Accessabilty tree identifies the download button as being in a list of one item

Open stephaniehobson opened this issue 6 years ago • 2 comments

Description

When navigating the page using Voice Over download link that are placed using the download button macro are identified as being in a list, but they are the only item in the list "visible" to the screen reader. To

Steps to reproduce

Enable Voice Over and navigate any page with the global header.

Expected result

Rather than identifying a list of one item the accessibility tree should go straight to the download link.

┆Issue is synchronized with this Jira Task ┆Priority: (none) ┆Sprint: Backlog

stephaniehobson avatar Mar 11 '19 19:03 stephaniehobson

Here's the code we produce. .download-list looks like a list in source code but in reality we only ever show the user one list item at a time.

<ul class="download-list">
    
      <li class="os_win64">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="/firefox/download/thanks/" data-direct-link="https://download.mozilla.org/?product=firefox-stub&amp;os=win64&amp;lang=en-US" data-link-type="download" data-display-name="Windows 64-bit" data-download-version="win64" data-download-os="Desktop" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
      <li class="os_win">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="/firefox/download/thanks/" data-direct-link="https://download.mozilla.org/?product=firefox-stub&amp;os=win&amp;lang=en-US" data-link-type="download" data-display-name="Windows 32-bit" data-download-version="win" data-download-os="Desktop" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
      <li class="os_osx">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="/firefox/download/thanks/" data-direct-link="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=osx&amp;lang=en-US" data-link-type="download" data-display-name="macOS" data-download-version="osx" data-download-os="Desktop" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
      <li class="os_linux64">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="/firefox/download/thanks/" data-direct-link="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=linux64&amp;lang=en-US" data-link-type="download" data-display-name="Linux 64-bit" data-download-version="linux64" data-download-os="Desktop" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
      <li class="os_linux">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="/firefox/download/thanks/" data-direct-link="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=linux&amp;lang=en-US" data-link-type="download" data-display-name="Linux 32-bit" data-download-version="linux" data-download-os="Desktop" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
      <li class="os_android">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="https://play.google.com/store/apps/details?id=org.mozilla.firefox&amp;referrer=utm_source%3Dmozilla%26utm_medium%3DReferral%26utm_campaign%3Dmozilla-org" data-link-type="download" data-display-name="Android" data-download-version="android" data-download-os="Android" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
      <li class="os_ios">
        <a class="download-link button button-green mzp-c-button mzp-t-download" href="https://itunes.apple.com/us/app/apple-store/id989804926?pt=373246&amp;mt=8" data-link-type="download" data-display-name="iOS" data-download-version="ios" data-download-os="iOS" data-download-location="primary cta">
          <strong class="download-title">
            
              Download now
            
          </strong>
        </a>
      </li>
    
  </ul>

stephaniehobson avatar Mar 11 '19 19:03 stephaniehobson