feat(RangeSlider): Set aria-hidden on icons

Royal-Navy · Jul 20, 2020 · ac9be01 · ac9be01
1 parent 865f60f
commit ac9be01
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/react-component-library/src/components/RangeSlider/RangeSlider.test.tsx b/packages/react-component-library/src/components/RangeSlider/RangeSlider.test.tsx
@@ -174,9 +174,23 @@ describe('RangeSlider', () => {
       expect(wrapper.queryByTestId('rangeslider-icon-left')).not.toBeNull()
     })
 
+    it('should set the `aria-hidden` attribute to `true` for the left icon', () => {
+      expect(wrapper.queryByTestId('rangeslider-icon-left')).toHaveAttribute(
+        'aria-hidden',
+        'true'
+      )
+    })
+
     it('should render the Icon component right of the slider', () => {
       expect(wrapper.queryByTestId('rangeslider-icon-right')).not.toBeNull()
     })
+
+    it('should set the `aria-hidden` attribute to `true` for the right icon', () => {
+      expect(wrapper.queryByTestId('rangeslider-icon-right')).toHaveAttribute(
+        'aria-hidden',
+        'true'
+      )
+    })
   })
 
   describe('multiple handles', () => {

diff --git a/packages/react-component-library/src/components/RangeSlider/Slider.tsx b/packages/react-component-library/src/components/RangeSlider/Slider.tsx
@@ -58,6 +58,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
     <div className={classes} data-testid="rangeslider">
       {IconLeft && (
         <IconLeft
+          aria-hidden
           className="rn-rangeslider__icon rn-rangeslider__icon--left"
           data-testid="rangeslider-icon-left"
         />
@@ -146,6 +147,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
       </Slider>
       {IconRight && (
         <IconRight
+          aria-hidden
           className="rn-rangeslider__icon rn-rangeslider__icon--right"
           data-testid="rangeslider-icon-right"
         />