Files
grecia/spec/shared/system
Javi Martín b896fc4bba 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.
2025-11-14 12:53:37 +01:00
..
2025-11-14 12:53:37 +01:00