Add aria-label to map markers

Axe was reporting an accessibility error:

```
Found 1 accessibility violation:

1) aria-command-name: ARIA commands must have an accessible name
   (serious)
   https://dequeuniversity.com/rules/axe/4.11/aria-command-name?application=axeAPI
   The following 1 node violate this rule:

     Selector: .leaflet-marker-icon
     HTML: <div class="leaflet-marker-icon map-marker
                       leaflet-zoom-animated leaflet-interactive"
                tabindex="0" role="button">
                <div class="map-icon"></div>
           </div>
     Fix any of the following:
     - Element does not have text that is visible to screen readers
     - aria-label attribute does not exist or is empty
     - aria-labelledby attribute does not exist, references elements
       that do not exist or references elements that are empty
     - Element has no title attribute
```

Using the title of the proposal/investment as the text of the marker is
definitely a good solution when there are several markers on the map.
Not sure whether there's a better option when there's only one marker,
though.

Note that we aren't providing a proper aria-label for markers on the map
we use in the form to create a proposal or an investment. Adding one
isn't trivial given the current code, and keyboard users can't add a
marker in the first place. We'll have to revisit this issue when we add
keyboard support for this.

We're also changing a test to make sure that titles with quotes in their
names don't break the markup due to an invalid aria-label attribute.
This commit is contained in:
Javi Martín
2025-02-26 16:12:45 +01:00
parent b5d939565b
commit b896fc4bba
5 changed files with 27 additions and 14 deletions

View File

@@ -36,7 +36,8 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
find("#new_map_location").click
within ".map-location" do
expect(page).to have_css(".map-icon")
expect(page).to have_css ".map-icon"
expect(page).not_to have_css ".map-icon[aria-label]"
end
end
@@ -274,14 +275,15 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
set_arguments(arguments, mappable, mappable_path_arguments)
end
scenario "Should display map and marker on #{mappable_factory_name} show page" do
scenario "Should display marker on #{mappable_factory_name} show page with aria label" do
arguments[:id] = mappable.id
mappable.update!(title: "Malformed quote\" and >")
do_login_for user, management: management if management
visit send(mappable_show_path, arguments)
within ".map-location" do
expect(page).to have_css(".map-icon")
expect(page).to have_css ".map-icon[aria-label='#{mappable.title}']"
end
end

View File

@@ -193,6 +193,8 @@ describe "Ballots" do
expect(page).to have_content "OpenStreetMap"
expect(page).to have_content "New Block"
expect(page).to have_css ".map-icon", visible: :all, count: 2
expect(page).to have_css ".map-icon[aria-label='More bridges']", visible: :all
expect(page).to have_css ".map-icon[aria-label='Less bridges']", visible: :all
end
add_to_ballot("More bridges")