search

ncase / nutshell

Make expandable explanations!
https://ncase.me/nutshell/
Creative Commons Zero v1.0 Universal
504 stars 30 forks source link

Close button not `<a>` #19

Closed Foggalong closed 1 year ago

Foggalong commented 2 years ago

This is an amazing tool, thanks for creating it! The button to close nutshells isn't showing up as a clickable link in the tool I use to avoid using a mouse for RSI reasons. The close all nutshells button also isn't showing up as a link, which means the only way to close them is to find the link which originally opened them.

Screenshot from 2022-08-29 10-32-22

Foggalong commented 2 years ago

I don't know much about HTML, but my guess is it's to do with the close button being implemented as a <div> rather than <a> or <button> which seems to be what the others are using

MachineThing commented 1 year ago

Yeah if I'm correct the <div> should be instead a <a> or a <button> because of accessibility reasons such as the one you showcased. However the developer can give it the ARIA button role which makes accessibility tools treat the <div> as a button. Edit: On further inspection the "close all nutshells" button seems to not be focusable on the keyboard which might be an issue, changing it to a button fixes the issue of it being not focusable however it can't be activated on the keyboard.

ncase commented 1 year ago

Fixed with @chriscoyier's pull request – thank you @Foggalong and @MachineThing for bringing up this important accessibility oversight! 👍 (And sincere apologies for my slowpokishness)