Address accessibility gaps in Shoelace

Let me start off by saying I really like the streamlined approach you’ve taken with this project. It’s nice to see a library like this, using modern CSS. However in looking through the source code, and doing some basic keyboard and screen reader accessibility testing, there are quite a few gaps in coverage that really should be closed to ensure this framework doesn’t perpetuate inaccessible user experiences.

I have submitted a pull request to address the following two issues:

• Set focus states for <a> and <button> elements to provide parity for mouse and keyboard interactions.
• An update to the Switch component, as it previously was completely inaccessible to keyboard and assistive technology users.

There are additional accessibility issues that I’d be happy to discuss with you if you are interested in moving forward with these sorts of changes.

Thanks!

[claviska]

I figured as much. I’m open to including a small JS snippet in shoelace.js if it makes the button accessible. Just let me know how you think it should work and I’ll be happy to work on it.

[claviska]

Ah, Firefox. Don’t think we can do anything about that though 😦

https://stackoverflow.com/questions/20095105/input-type-file-focus-adjacent-selector-in-css