EDSC-4349 Adjustments to spatial filter dropdowns and buttons

nasa · Jan 2, 2025 · ee71568 · ee71568
1 parent 3f1a79a
commit ee71568
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/static/src/js/components/SpatialDisplay/SpatialSelectionDropdown.jsx b/static/src/js/components/SpatialDisplay/SpatialSelectionDropdown.jsx
@@ -8,11 +8,12 @@ import {
 
 import {
   FaCrop,
-  FaMapMarker,
   FaCircle,
   FaFile
 } from 'react-icons/fa'
 
+import { Map } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+
 import { eventEmitter } from '../../events/events'
 
 import { getApplicationConfig } from '../../../../../sharedUtils/config'
@@ -90,45 +91,50 @@ const SpatialSelectionDropdown = (props) => {
         <Dropdown.Item
           className="spatial-selection-dropdown__button"
           as={Button}
-          icon="edsc-icon-poly-open edsc-icon-fw"
+          icon="edsc-icon-poly edsc-icon-fw"
           onClick={() => onItemClick('polygon')}
           label="Select Polygon"
+          aria-label="Select Polygon"
         >
           <span>Polygon</span>
         </Dropdown.Item>
         <Dropdown.Item
           className="spatial-selection-dropdown__button"
           as={Button}
-          icon="edsc-icon-rect-open edsc-icon-fw"
+          icon="edsc-icon-rect edsc-icon-fw"
           onClick={() => onItemClick('rectangle')}
           label="Select Rectangle"
+          aria-label="Select Rectangle"
         >
           <span>Rectangle</span>
         </Dropdown.Item>
         <Dropdown.Item
           className="spatial-selection-dropdown__button"
           as={Button}
-          icon={FaMapMarker}
-          onClick={() => onItemClick('point')}
-          label="Select Point"
+          icon={FaCircle}
+          onClick={() => onItemClick('circle')}
+          label="Select Circle"
+          aria-label="Select Circle"
         >
-          <span>Point</span>
+          <span>Circle</span>
         </Dropdown.Item>
         <Dropdown.Item
           className="spatial-selection-dropdown__button"
           as={Button}
-          icon={FaCircle}
-          onClick={() => onItemClick('circle')}
-          label="Select Circle"
+          icon={Map}
+          onClick={() => onItemClick('point')}
+          label="Select Point"
+          aria-label="Select Point"
         >
-          <span>Circle</span>
+          <span>Point</span>
         </Dropdown.Item>
         <Dropdown.Item
           className="spatial-selection-dropdown__button"
           as={Button}
           icon={FaFile}
           onClick={() => onItemClick('file')}
           label="Select Shapefile"
+          aria-label="Select Shapefile"
           disabled={disableShapefileSearch}
         >
           {

diff --git a/static/src/js/components/SpatialDisplay/SpatialSelectionDropdown.scss b/static/src/js/components/SpatialDisplay/SpatialSelectionDropdown.scss
@@ -19,6 +19,11 @@
     .button__contents {
       line-height: 1.25rem;
     }
+
+    .dropdown-item {
+      text-align: left;
+      justify-content: flex-start;
+    }
   }
 
   &__button {

diff --git a/static/src/js/components/SpatialSelection/SpatialSelection.jsx b/static/src/js/components/SpatialSelection/SpatialSelection.jsx
@@ -529,6 +529,23 @@ const SpatialSelection = (props) => {
   // Callback from EditControl, called when the controls are mounted
   const onMounted = (newDrawControl) => {
     drawControl.current = newDrawControl
+
+    // Add aria-labels to draw buttons
+    const drawToolbar = document.querySelector('.leaflet-draw-toolbar')
+    if (drawToolbar) {
+      const buttons = drawToolbar.querySelectorAll('.leaflet-draw-draw-circle, .leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle, .leaflet-draw-draw-marker')
+      buttons.forEach((button) => {
+        if (button.classList.contains('leaflet-draw-draw-circle')) {
+          button.setAttribute('aria-label', 'Search by spatial circle')
+        } else if (button.classList.contains('leaflet-draw-draw-polygon')) {
+          button.setAttribute('aria-label', 'Search by spatial polygon')
+        } else if (button.classList.contains('leaflet-draw-draw-rectangle')) {
+          button.setAttribute('aria-label', 'Search by spatial rectangle')
+        } else if (button.classList.contains('leaflet-draw-draw-marker')) {
+          button.setAttribute('aria-label', 'Search by spatial coordinate')
+        }
+      })
+    }
   }
 
   // Trigger a leaflet drawing from the spatial dropdown