Web accessibility is very important issue.
DEMO (Use tabs)
My code solve this missing features of Webflow dropdowns (Just
Copy-Paste “before body”):
Tab key -
Dropdown Linkstabindex = 0 (Otherwise No way to tab/focus the dropdown)
- Open/Close dropdown by enter
- If Up Arrow or Down Arrow is pressed, the previous or next option is scrolled into view
- Esc Button Close dropdown
- home button (Select first dropdown link)
- end button (Select last dropdown link)
aria-haspopup- for the dropdown button
aria-expandedwhen show/hide dropdown
This is “middle solution” (custom code) - VS webflow core solution - more lines of code // more complex + Hard to get support (If webflow overtime change navbar structure maybe this code will break + Not all users know JS).
Anyway - for now no other solution
Please add her any bug you find. Thanks
In my opnion to broad wishlist topic (Its better to solve each component).
Solve all the ideas her: