Fixes from accessibility audit.

[bdon]

a11y issues

1. The ‘Inspect button’ on the map, which serves as a toggle, doesn’t contain a clear value or indicator whether it is activated or not. This is needed for screen reader users to identify the current state of the toggle. This same issue occurs when opening or closing the ‘get style JSON’ button in the top navigation.

Added a label to maplibre-gl-inspect.

2. The two combo boxes above the map don’t have an accessible name, which means screen reader users will only hear ‘combo box German’ but can’t perceive the meaning of the combo box.

Added label for= HTML elements.

3. The radio buttons in the protomap builds page don’t have an accessible name. The screen reader will read ‘radio button checked 1 of 1’ but doesn’t say what this button is for.

Added aria-label indicating selected build dates.

4. When a wrong url is submitted in the input field on the top of the map, which leads to the map not being displayed anymore, there is no identification in text that an error has occurred. Providing information about input errors in text allows users who are blind or color deficient (color blind) to perceive the fact that an error occurred.

Added popover to display map loading errors such as 404.

5. The ‘user-scalable’ option is set to ‘no’, so users can’t resize the web page. This means that people who need to increase the size of interface elements to be able to interact with them, can’t fully use the website.

Removed this part of the HTML head tags.

6. For any form field that serves an identified input purpose, provide the appropriate autocomplete attribute.

Added autocomplete attributes.

7. When displaying the webpage at 320 pixels wide, a part of the text behind the radio buttons is no longer visible without having to scroll in two directions.

Hide some table columns on small breakpoints.

Other findings

1. The buttons in the top right corner of the navigation bar are very close together; by increasing
   the space between them, the buttons will be easier to use.

New navbar among all pages at top.

2. We are not sure whether this is a bug or that we just don’t understand this functionality, but
   when pressing on a radio button in the ‘builds’ page, other radio buttons appear next to other
   radio buttons and disappear when pressing (again) other radio buttons.

This is meant to mirror the Wikipedia "revisions" UI. Made the display of the radio buttons unconditional so they don't appear/disappear.

[bdon]

PR to maplibre-gl-inspect for button: maplibre/maplibre-gl-inspect#150

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud