Nav elements are skipped when tabbing through links in Minerva
Developer notes
The current page actions code looks like this:
<ul id="page-actions" class="hlist "> <li id="ca-edit" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-minerva-edit-enabled" title="Edit the lead section of this page."> <a class="edit-page" href="#/editor/0" title="Edit the lead section of this page.">Edit</a> </li> <li id="ca-watch" class="mw-ui-icon mw-ui-icon-element watch-this-article mw-ui-icon-mf-watch view-border-box" title="Watch this page"> <button>Watch this page</button> </li> <div class="view-border-box"> <li class="mw-ui-icon mw-ui-icon-minerva-download mw-ui-icon-element " title="Download"></li> </div> <li class="mw-ui-icon mw-ui-icon-element mw-ui-icon-minerva-language-switcher language-selector" title="Read in another language"> <a href="/wiki/Special:MobileLanguages/Alabama">Read in another language</a> </li> </ul>
Potentially all three buttons are links to other pages (when JS is disabled). We should make sure that the buttons are links not li elements. This will be useful for screen readers and search engines and us developers because it's easier to see what is an actionable item and what is not.
Here is a screencast of Mac OS X voiceover. Notice how the page actions are described:
Suggested fixes:
- Move the ID, classes, and titles from li elements to their corresponding children. Style the icon not the container.
- The watch button will be dealt with in T141936. It's rendered as a link in the back-end, but replaced with a button element in the front end.
- Change JS code to work with child a's rather than li's.
AC
- Should be possible to tab between page actions
- The markup on the page actions is consistent and semantic (li's and a's for buttons)
- Voice over and other assistive technologies behave properly with the buttons
- Ensure each icon is accessible by tabbing
- Download link should not be wrapped in a div!
- Pages pass the "Elements Are Well Structured" Chrome audit
QA
Steps to Reproduce
- visit https://en.wikipedia.org/wiki/Cadaver?useskin=minerva in Chrome on desktop
- use the tab key to move through various links/elements
- Should be possible to tab between "Download", "Watch", "Edit"