Fix a11y in header button #1833
Conversation
✅ Deploy Preview for expressjscom-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Should we consider adding country flags to the language picker? |
Hmm, I don’t know, if we add the flags as emojis, they might look different depending on the system. If we add them as SVGs, we’d have quite a few images. Isn’t just the name enough? |
It is more than enough. Should we add a title attribute in English to each language link? This is just a random thought that came to my mind while testing. All language names are translated into their respective scripts, and now I can't tell which one is Chinese, Korean, or Japanese. Also it improves accessibility for all users. We don't need language-picker-mobile.html; use the same picker on mobile devices with some additional styling. Also, we can remove JS and CSS code. |
|
It's a good idea to move the styles to classes. The ID should never have been used for styling, but it's necessary for the JavaScript, so it should be kept. Make that last change, and we can merge this. |
Task
Closes #1830
Tabbing navigation shown on landing page
New lang picker design
Note:- This PR specifically addresses keyboard navigation for the language picker and toggle theme button. Other navigation menus and submenus should also be fully accessible via keyboard but are not covered in this PR. However, the language picker on mobile devices currently has duplicate id attributes, which need to be removed, and CSS design should be update accordingly.