Open maggiewachs opened 9 months ago
We also have this issue, and it was flagged by our ADA compliance partner 👍
It's a bit of a damned-if-you-don't situation for us, because we can't use the Geocoder class without adding it to the DOM, as it throws errors looking for the DOM elements to toggle loading states.
What's interesting is that the keyboard interactions seem to work in the examples, but we can't get them to work in production.
@maggiewachs Digging into this, it seems like this combobox runs on this suggestions
library. The way it's implemented is that the list is internally tracked by keydowns, but keyboard focus isn't actually placed on those elements, so the screenreader can't read them. There isn't an aria-live announcer or anything either.
https://github.com/tristen/suggestions
I forked this, modernized, made an accessible version using WCAG's combobox example. You can install and override the dependency as a github package, or you can download a zip and install it as a local file dependency.
https://github.com/hsdonkin/suggestions
In our package.json
:
"dependencies" : {
...
"suggestions": "github:hsdonkin/suggestions",
},
"overrides": {
"suggestions": "$suggestions"
}
Basically, any website using the old version is open to an ADA lawsuit 😅 so this should be replaced @mapbox
@hsdonkin thank you! I'll take a look.
@hsdonkin What would it take to get your fix as Pull request either against this repo or maybe against upstream suggestions repo so we can get the fix farther upstream rather than switching to your fork.
@hsdonkin What would it take to get your fix as Pull request either against this repo or maybe against upstream suggestions repo so we can get the fix farther upstream rather than switching to your fork.
I could put in a PR to @tristen 's suggestions, I had some issues getting local dev online but I think I've got things working. My fork includes a different dev pipeline, and a more modern implementation via classes
mapbox-gl-js version: Latest browser: All
Why we need this fixed
I'm a web accessibility engineer for a digital agency, and one of our clients is a Federal US agency with millions of website visitors per month. They have a few licensed implementations of Mapbox, and the ones that use the GL search feature display the following bugs and do not conform to accessibility requirements. Fixing this issue will mean our disabled users can take full advantage of Mapbox functionality, and most importantly, have a much better online experience when performing a Mapbox search.
Steps to Trigger Behavior
Link to Demonstration
The issues are present in this demo: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-outside-the-map/
Expected Behavior
When a user enters text in the search box:
Patterns to emulate: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
Actual Behavior
When a user enters text in the search box: