Accessible drop downs

[ronilaukkarinen]

I noticed drop downs are not accessible. They should open when you navigate with keyboard. You should avoid using display: none and use heights and visibility settings instead. I could maybe help to implement this as well when I have some free time.

[balzss]

Ok, I will look into it. Let me know if you have time and want to work on this issue.

[ronilaukkarinen]

I checked it out and tried couple of things. The problem is that hyperlink <a> is stealing the focus and because it's separate and doesn't contain <ul> in it, drop down cannot be triggered with :focus selector. Focus needs to be in <li> element for current structure or submenu <ul> should be moved inside the hyperlink. I can try to test this new structure some time, but currently quite busy with work...

[ronilaukkarinen]

There might be no way to do this without JS, because nav has to know about which element to open when other element is focused. I understand that this is meant to be CSS-only navigation, but if you want it to be "perfect", certain accessibility features should be baked in. They could be optional and it would take only couple of lines Vanilla JS, without dependencies. I could try this when the time is right, and send a PR. Just my thoughts, if you or someone else wants to help with this as well.

[balzss]

I understand the importance of this feature and I do agree that this need to be implemented somehow. Because all the JS related feature request I already started to think about a plugin system but I still don't know the exact details I want it to have. Some ideas and opinios would be greatly appreciated.

[mwoz123]

Not sure if it helps but IFAIK element can force being focusable using html "tabindex=0" attr:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Aslo anchor requires "href=" attr so it can be forcusable, that's why it's currently not.