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:
@@ -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
|
||||
|
||||
|
||||
@@ -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")
|
||||
|
||||
Reference in New Issue
Block a user