Merge pull request #15 from collective/fix_accessibilità_marker_mappa

feat: added aria tags for SR accessibility
collective · Oct 11, 2023 · e999e76 · e999e76
2 parents f80da13 + 9244f44
commit e999e76
Showing 1 changed file with 28 additions and 10 deletions.
diff --git a/src/components/OSMMap/OSMMap.jsx b/src/components/OSMMap/OSMMap.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import L from 'leaflet';
 import { Map, TileLayer, Marker, Tooltip, Popup } from 'react-leaflet';
@@ -15,12 +15,14 @@ import 'volto-venue/components/OSMMap/OSMMap.css';
 // eslint-disable-next-line import/no-unresolved
 import 'volto-venue/components/OSMMap/leaflet.css';
 
-const messages = defineMessages({
-  attribution: {
-    id: '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-    defaultMessage: '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-  },
-});
+// const messages = defineMessages({
+//   attribution: {
+//     id:
+//       '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+//     defaultMessage:
+//       '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+//   },
+// });
 
 let DefaultIcon = L.icon({
   iconUrl: icon,
@@ -43,6 +45,7 @@ const OSMMap = ({
   cluster = false,
   mapOptions = {},
 }) => {
+  // const intl = useIntl();
   const bounds = L.latLngBounds(
     markers.map((marker) => [marker.latitude, marker.longitude]),
   );
@@ -56,15 +59,30 @@ const OSMMap = ({
           draggable={draggable}
           onDragend={onMarkerDragEnd}
           onClick={position.onMarkerClick}
+          onKeyDown={(event) => {
+            if (event.originalEvent.key === 'Enter') {
+              position.onMarkerClick();
+            }
+          }}
           icon={position.divIcon ? L.divIcon(position.divIcon) : DefaultIcon}
+          aria-label={position.title}
+          title={position.title}
         >
           {showTooltip && position.title && (
-            <Tooltip offset={[0, -22]} direction="top">
+            <Tooltip
+              offset={[0, -22]}
+              direction="top"
+              aria-label={position.title}
+            >
               {position.title}
             </Tooltip>
           )}
           {showPopup && position.popupContent && (
-            <Popup offset={[0, -22]} direction="top">
+            <Popup
+              offset={[0, -22]}
+              direction="top"
+              aria-label={position.title}
+            >
               {position.popupContent}
             </Popup>
           )}
@@ -83,7 +101,7 @@ const OSMMap = ({
         {...mapOptions}
       >
         <TileLayer
-          attribution={intl.formatMessage(messages.attribution)}
+          // attribution={intl.formatMessage(messages.attribution)}
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         {cluster ? (