Add aria-label to markers in admin map settings

We forgot to do so in commit b896fc4bb. Back then, we said:

> 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.

However, in the admin section, the marker is already there, so it should
have a label. In this case, we're using the coordinates as label because
it's the most relevant text for the marker in the context of a form. We
could also use "Default map location" instead, but that information is
already present on the page.

Axe was reporting the same accessibility error we mentioned in commit
b896fc4bb in this situation.
This commit is contained in:
Javi Martín
2025-11-17 01:08:22 +01:00
parent 1693aa5d9c
commit 99696cb302
5 changed files with 58 additions and 1 deletions

View File

@@ -62,12 +62,20 @@ class Shared::MapLocationComponent < ApplicationComponent
marker_investments_coordinates: investments_coordinates,
marker_latitude: map_location.latitude.presence,
marker_longitude: map_location.longitude.presence,
marker_title: map_location.title.presence,
marker_title: map_location.title.presence || marker_coordinates_text,
marker_clustering: feature?("map.feature.marker_clustering"),
geozones: geozones_data
}.merge(input_selectors)
end
def marker_coordinates_text
return unless map_location.available?
t("proposals.form.map_marker_coordinates",
latitude: map_location.latitude,
longitude: map_location.longitude)
end
def input_selectors
if form
{

View File

@@ -328,6 +328,7 @@ en:
tags_placeholder: "Enter the tags you would like to use, separated by commas (',')"
map_location: "Map location"
map_location_instructions: "Navigate the map to the location and place the marker."
map_marker_coordinates: "Latitude: %{latitude}. Longitude: %{longitude}"
map_remove_marker: "Remove map marker"
index:
featured_proposals: Featured

View File

@@ -328,6 +328,7 @@ es:
tags_placeholder: "Escribe las etiquetas que desees separadas por coma (',')"
map_location: "Ubicación en el mapa"
map_location_instructions: "Navega por el mapa hasta la ubicación y coloca el marcador."
map_marker_coordinates: "Latitud: %{latitude}. Longitud: %{longitude}"
map_remove_marker: "Eliminar el marcador"
index:
featured_proposals: Destacadas

View File

@@ -28,4 +28,48 @@ describe Shared::MapLocationComponent do
expect(page).to have_button "Remove map marker"
end
end
describe "marker title" do
it "uses the mappable title when there's a mappable with a title" do
map_location = build(
:map_location,
proposal: Proposal.new(title: "Meet me here"),
latitude: "25.25",
longitude: "13.14"
)
render_inline Shared::MapLocationComponent.new(map_location)
expect(page).to have_css "[data-marker-title='Meet me here']"
end
it "uses the coordinates when there's no mappable" do
map_location = build(:map_location, latitude: "25.25", longitude: "13.14")
render_inline Shared::MapLocationComponent.new(map_location)
expect(page).to have_css "[data-marker-title='Latitude: 25.25. Longitude: 13.14']"
end
it "uses the coordinates when the mappable has an empty title" do
map_location = build(
:map_location,
proposal: Proposal.new(title: ""),
latitude: "25.25",
longitude: "13.14"
)
render_inline Shared::MapLocationComponent.new(map_location)
expect(page).to have_css "[data-marker-title='Latitude: 25.25. Longitude: 13.14']"
end
it "is not present when the map location isn't available" do
map_location = build(:map_location, latitude: "25.25", longitude: nil)
render_inline Shared::MapLocationComponent.new(map_location)
expect(page).not_to have_css "[data-marker-title]"
end
end
end

View File

@@ -60,6 +60,7 @@ describe "Admin settings", :admin do
expect(page).to have_field "Latitude", with: "51.48"
expect(page).to have_field "Longitude", with: "0.0"
expect(page).to have_css ".map-icon[aria-label='Latitude: 51.48. Longitude: 0.0']"
within "#map-form" do
find(".map-location").click
@@ -68,7 +69,9 @@ describe "Admin settings", :admin do
expect(page).to have_content "Map configuration updated successfully"
expect(page).to have_field "Latitude"
expect(page).to have_css ".map-icon"
expect(page).not_to have_field "Latitude", with: "51.48"
expect(page).not_to have_css ".map-icon[aria-label='Latitude: 51.48. Longitude: 0.0']"
end
end