search

Devographics / StateOfJS-2020

Other
103 stars 20 forks source link

Navigation a11y improvements #45

Closed sarahfossheim closed 3 years ago

sarahfossheim commented 3 years ago

This PR includes several accessibility updates (mainly with regards to screen reader and keyboard navigation):

  1. Use <button> elements for Share, Export, Count/Percentage buttons
  2. Set aria-expanded and aria-haspopup for buttons that toggle hidden menus
  3. Hide share links from screen readers when they're visually hidden
  4. Add a Skip To Content link at the top of the page, that takes the user to the <main> content
  5. Add a label for screen readers to the actions button (mobile)
  6. Make the completion percentage indicator keyboard focusable, and show the tooltip on focus
  7. Focus styles added to links and buttons (similar to :hover - both will need more a11y updates in a future PR)
  8. Hide the menu links when the menu is collapsed

Note: This relies on several new translations, specified in https://github.com/StateOfJS/state-of-js-graphql-results-api/pull/184. Without it the new "accessible" labels aren't read correctly, so I suggest merging and deploying the other PR first :)