b896fc4bba
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.
83 lines
2.2 KiB
Ruby
83 lines
2.2 KiB
Ruby
class Shared::MapLocationComponent < ApplicationComponent
|
|
attr_reader :investments_coordinates, :form, :geozones_data
|
|
|
|
def initialize(map_location, investments_coordinates: nil, form: nil, geozones_data: nil)
|
|
@map_location = map_location
|
|
@investments_coordinates = investments_coordinates
|
|
@form = form
|
|
@geozones_data = geozones_data
|
|
end
|
|
|
|
def map_location
|
|
@map_location ||= MapLocation.new
|
|
end
|
|
|
|
private
|
|
|
|
def editable?
|
|
form.present?
|
|
end
|
|
|
|
def latitude
|
|
map_location.latitude.presence || Setting["map.latitude"]
|
|
end
|
|
|
|
def longitude
|
|
map_location.longitude.presence || Setting["map.longitude"]
|
|
end
|
|
|
|
def zoom
|
|
map_location.zoom.presence || Setting["map.zoom"]
|
|
end
|
|
|
|
def remove_marker_label
|
|
t("proposals.form.map_remove_marker")
|
|
end
|
|
|
|
def remove_marker_id
|
|
"remove-marker-#{dom_id(map_location)}"
|
|
end
|
|
|
|
def remove_marker
|
|
button_tag remove_marker_label,
|
|
id: remove_marker_id,
|
|
class: "map-location-remove-marker",
|
|
type: "button"
|
|
end
|
|
|
|
def data
|
|
{
|
|
map: "",
|
|
map_center_latitude: latitude,
|
|
map_center_longitude: longitude,
|
|
map_zoom: zoom,
|
|
map_tiles_provider: Rails.application.secrets.map_tiles_provider,
|
|
map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution,
|
|
marker_editable: editable?,
|
|
marker_remove_selector: "##{remove_marker_id}",
|
|
marker_investments_coordinates: investments_coordinates,
|
|
marker_latitude: map_location.latitude.presence,
|
|
marker_longitude: map_location.longitude.presence,
|
|
marker_title: map_location.title.presence,
|
|
marker_clustering: feature?("map.feature.marker_clustering"),
|
|
geozones: geozones_data
|
|
}.merge(input_selectors)
|
|
end
|
|
|
|
def input_selectors
|
|
if form
|
|
{
|
|
latitude_input_selector: "##{input_id(:latitude)}",
|
|
longitude_input_selector: "##{input_id(:longitude)}",
|
|
zoom_input_selector: "##{input_id(:zoom)}"
|
|
}
|
|
else
|
|
{}
|
|
end
|
|
end
|
|
|
|
def input_id(attribute)
|
|
form.hidden_field(attribute).match(/ id="([^"]+)"/)[1]
|
|
end
|
|
end
|