CliffCloud / Leaflet.EasyButton

leaflet control buttons with icons and callbacks
http://cliffcloud.github.io/Leaflet.EasyButton/v1/
MIT License
524 stars 123 forks source link

[accessibility] Use `aria-disabled` to convey the disabled state #98

Open Malvoz opened 3 years ago

Malvoz commented 3 years ago

aria-hidden is used in the disabled state:

https://github.com/CliffCloud/Leaflet.EasyButton/blob/cd53db586a10d5a9c4efed003327cad29f4760bf/src/easy-button.js#L289

https://github.com/CliffCloud/Leaflet.EasyButton/blob/cd53db586a10d5a9c4efed003327cad29f4760bf/src/easy-button.js#L296

which only hides the content from screen readers, but the button remains focusable, and because it is aria-hidden="true" nothing is announced to the user when it is focused.

I suggest replacing aria-hidden with aria-disabled to convey to screen readers that the button is currently disabled.
See related Leaflet issue: https://github.com/Leaflet/Leaflet/issues/7211 / PR: https://github.com/Leaflet/Leaflet/pull/7280/files.


Other potentially helpful resources: