From 1dc679ab62eeb492e1978e5110b75880e1644847 Mon Sep 17 00:00:00 2001
From: daniel-zamora <daniel.p.zamora@nasa.gov>
Date: Wed, 29 Jan 2025 11:07:44 -0500
Subject: [PATCH] EDSC-4342 pr comments

---
 static/src/js/components/EDSCIcon/EDSCIcon.jsx   |  8 ++++++--
 static/src/js/components/Facets/Facets.jsx       | 16 +++++++++++++---
 static/src/js/components/Facets/FacetsItem.jsx   | 11 +++++++----
 .../components/Facets/__tests__/Facets.test.jsx  | 10 +++++++---
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/static/src/js/components/EDSCIcon/EDSCIcon.jsx b/static/src/js/components/EDSCIcon/EDSCIcon.jsx
index b19ea89fc8..42ffce3b8b 100644
--- a/static/src/js/components/EDSCIcon/EDSCIcon.jsx
+++ b/static/src/js/components/EDSCIcon/EDSCIcon.jsx
@@ -20,6 +20,7 @@ export const EDSCIcon = ({
   size,
   title,
   variant,
+  label,
   ...props
 }) => {
   if (!icon) return null
@@ -98,6 +99,7 @@ export const EDSCIcon = ({
         className={iconClassNames}
         title={title}
         size={size}
+        aria-label={label}
         data-testid="edsc-icon"
         {...props}
       />
@@ -113,7 +115,8 @@ EDSCIcon.defaultProps = {
   context: null,
   size: '1rem',
   title: null,
-  variant: null
+  variant: null,
+  label: null
 }
 
 EDSCIcon.propTypes = {
@@ -123,7 +126,8 @@ EDSCIcon.propTypes = {
   context: PropTypes.shape({}),
   size: PropTypes.string,
   title: PropTypes.string,
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  label: PropTypes.string
 }
 
 export default EDSCIcon
diff --git a/static/src/js/components/Facets/Facets.jsx b/static/src/js/components/Facets/Facets.jsx
index d991cc2be5..5104d89684 100644
--- a/static/src/js/components/Facets/Facets.jsx
+++ b/static/src/js/components/Facets/Facets.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { camelCase } from 'lodash-es'
 
 import { FaMap } from 'react-icons/fa'
-import { CloudFill } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+import { CloudFill, Settings } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
 import { changeFeatureFacet, changeCmrFacet } from '../../util/facets'
 
 import FacetsGroup from './FacetsGroup'
@@ -49,7 +49,10 @@ const Facets = (props) => {
     featuresFacet.children.push({
       applied: featureFacets.availableInEarthdataCloud,
       title: 'Available in Earthdata Cloud',
-      icon: CloudFill,
+      iconProps: {
+        icon: CloudFill,
+        label: 'a cloud'
+      },
       type: 'feature'
     })
   }
@@ -58,6 +61,10 @@ const Facets = (props) => {
     featuresFacet.children.push({
       applied: featureFacets.customizable,
       title: 'Customizable',
+      iconProps: {
+        icon: Settings,
+        label: 'a gear'
+      },
       description: 'Include only collections that support customization (temporal, spatial, or variable subsetting, reformatting, etc.)',
       type: 'feature'
     })
@@ -66,7 +73,10 @@ const Facets = (props) => {
   if (showMapImagery) {
     featuresFacet.children.push({
       applied: featureFacets.mapImagery,
-      icon: FaMap,
+      iconProps: {
+        icon: FaMap,
+        label: 'a map'
+      },
       title: 'Map Imagery',
       type: 'feature'
     })
diff --git a/static/src/js/components/Facets/FacetsItem.jsx b/static/src/js/components/Facets/FacetsItem.jsx
index 7531ce518c..5da771a3fb 100644
--- a/static/src/js/components/Facets/FacetsItem.jsx
+++ b/static/src/js/components/Facets/FacetsItem.jsx
@@ -105,12 +105,12 @@ class FacetsItem extends Component {
           />
           <span className="facets-item__title">
             {
-              facet.icon && (
+              facet.iconProps && (
                 <EDSCIcon
                   className="facets-item__icon"
-                  icon={facet.icon}
+                  icon={facet.iconProps.icon}
                   variant="facet"
-                  data-testid={`facet_item-${kebabCase(facet.title)}-icon`}
+                  label={facet.iconProps.label || facet.title}
                 />
               )
             }
@@ -160,7 +160,10 @@ FacetsItem.propTypes = {
     count: PropTypes.number,
     title: PropTypes.string,
     description: PropTypes.string,
-    icon: PropTypes.elementType
+    iconProps: PropTypes.shape({
+      icon: PropTypes.elementType,
+      label: PropTypes.string
+    })
   }).isRequired,
   facetCategory: PropTypes.string.isRequired,
   level: PropTypes.number.isRequired,
diff --git a/static/src/js/components/Facets/__tests__/Facets.test.jsx b/static/src/js/components/Facets/__tests__/Facets.test.jsx
index 514a252e4f..d6dfee86a5 100644
--- a/static/src/js/components/Facets/__tests__/Facets.test.jsx
+++ b/static/src/js/components/Facets/__tests__/Facets.test.jsx
@@ -3,6 +3,7 @@ import {
   act,
   render,
   screen,
+  waitFor,
   within
 } from '@testing-library/react'
 
@@ -261,12 +262,15 @@ describe('Facets Features Map Imagery component', () => {
 
     const user = userEvent.setup()
 
-    // Check for Map Imagery icon
-    const mapImageryIcon = screen.getByTestId('facet_item-map-imagery-icon')
+    const mapImageryIcon = screen.getByLabelText('a map')
     expect(mapImageryIcon).toBeInTheDocument()
 
+    // Check for Customizable icon
+    const customizableIcon = screen.getByLabelText('a gear')
+    expect(customizableIcon).toBeInTheDocument()
+
     // Check for Cloud icon
-    const cloudIcon = screen.queryByTestId('facet_item-available-in-earthdata-cloud-icon')
+    const cloudIcon = screen.queryByLabelText('a cloud')
     expect(cloudIcon).not.toBeInTheDocument()
 
     const featuresElements = screen.getAllByText('Features')