EDSC-4342 pr comments

nasa · Jan 29, 2025 · 1dc679a · 1dc679a
1 parent 281f993
commit 1dc679a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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')