I've made some minor accessibility and design changes to the topbar dropdown. Mainly just adding icons and adding some accessibility enhancements by putting the dropdown links in an unordered list instead of a details/summary combo and adding aria attributes where needed
wasn't able to test the dropdown with VoiceOver since for some reason I can't log in locally with safari. I did run axe devtools though to make sure I've marked things up correctly and it didn't report any issues with my changes. I went over the Authoring Practicing Guide for menu's and read some relevant articles when working on this:
- https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
- https://hidde.blog/popover-accessibility/
- https://www.oidaisdes.org/accessible-navigation-menu.en/
This dropdown does use a newer browser API but it is baseline in all of the major browsers so there shouldn't be any issues: https://caniuse.com/?search=popover
It also uses some very new css properties for positioning the dropdown but I tested in the latest safari, chrome and Firefox and it worked in all 3
dark mode styles should be fixed now!
in the case of compatibility for the position-anchor css rule, would y'all be interested in the idea of using the popover api + anchor positioning for all things popovers/tooltips? this polyfill covers what I've added in the input.css. it also supports a wider range of the position-* stuff which could be useful in other areas.
this pr started off as trying to improve accessibility though and I want to focus on that 😅 but this would make it somewhat easier