search

Evo-Forge / Essence

Essence - The Essential Material Design Framework
MIT License
416 stars 51 forks source link

Switches not keyboard navigable (usability/accessibility) #60

Closed patrick-jones closed 8 years ago

patrick-jones commented 8 years ago

Native radio buttons, checkboxes etc. can be navigated using the tab key, and (de)selected using either the space key or arrow keys. Essence does not allow this.

I played around with chrome dev tools on the example switches page and I was able to restore functionality by removing display: none from .e-radio input[type=radio] and .e-switches label input[type=checkbox]. I used opacity: 0 and position: absolute to visibly remove them.

This actually worked quite nicely, except that there was no visual indication of the moving focus. A real fix would need to add the little outline to the visible part of the component to be effective. But this seems like a promising approach.

hetmann commented 8 years ago

Hi @patrick-jones, Thanks for the feedback, we would be glad if you contribute to the framework as Essence is an open source project. So you can create a pull request and I will add it to the component.

hetmann commented 8 years ago

@patrick-jones I updated the essence-switch component. Give it a try by installing the latest version npm i essence-switch

patrick-jones commented 8 years ago

Wow, that was quick. I didn't even get the chance to clone the project.

hetmann commented 8 years ago

@patrick-jones 3 days I can say are a lot :) anyway let me know what you think about the framework.