Maps4HTML / MapML.js

A custom <mapml-viewer> and <layer-> element suite
https://maps4html.org/MapML.js/
Other
57 stars 16 forks source link

Changing style in layer control is too immediate, doesn't allow user to listen to available options #639

Open prushforth opened 2 years ago

prushforth commented 2 years ago

This is a result of using a radio group for this control, and not implementing a custom control; the change / click event is used to trigger the replacement of the layer immediately, and thus the radio button labels don't get read.

This is a separate issue from #462, but related.

To reproduce, go here (NVDA on):

Tab 6 times, hit Enter, tab 2 times, hit Enter, tab 2 times, hit Enter, hit Tab, hit Down Arrow.

Expected behaviour:

You should hear "National Geographic Basemap - radio button checked one of three", "Satellite Imagery with Place Names - radio button checked two of three"

Actual behaviour:

You hear "National Geographic Basemap - radio button checked one of three","Clickable application" and then the focus goes back to the map.

Malvoz commented 2 years ago

I think the original design was intended to behave more like a role="menu" with role="menuitemradio" (note that <input type="radio"> is implicitly role="radio").

An example of the ARIA design pattern Menu or Menu bar can be seen here: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html (see the font selection menu, ignore that it is behind a menu button).

The downside of such an ARIA pattern is that we lose the default UA styles for radio inputs, I think, unless it can be made to work with <input type="radio"> in a way that makes sense.