bedrock
bedrock copied to clipboard
Accessabilty tree identifies the download button as being in a list of one item
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
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&os=win64&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&os=win&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&os=osx&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&os=linux64&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&os=linux&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&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&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>