fix(NumberInput): Set aria-labelledby attribute

Royal-Navy · Sep 10, 2020 · 0100a20 · 0100a20
1 parent cb894a7
commit 0100a20
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx b/packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx
@@ -109,6 +109,18 @@ describe('NumberInput', () => {
 
     assertInputValue('')
 
+    it('should set the `aria-labelledby` attribute', () => {
+      const numberInputId = wrapper
+        .getByTestId('number-input-container')
+        .getAttribute('id')
+
+      expect(
+        wrapper
+          .getByTestId('number-input-input')
+          .getAttribute('aria-labelledby')
+      ).toEqual(numberInputId)
+    })
+
     it('should set the name attribute', () => {
       expect(
         wrapper.getByTestId('number-input-input').getAttribute('name')

diff --git a/packages/react-component-library/src/components/NumberInput/NumberInput.tsx b/packages/react-component-library/src/components/NumberInput/NumberInput.tsx
@@ -5,6 +5,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 import { EndAdornment } from './EndAdornment'
 import { Footnote } from './Footnote'
+import { getId } from '../../helpers'
 import { Input } from './Input'
 import { StartAdornment } from './StartAdornment'
 import { useFocus } from './useFocus'
@@ -113,11 +114,14 @@ export const NumberInput: React.FC<NumberInputProps> = ({
     }
   }
 
+  const numberInputId = getId('number-input')
+
   return (
     <div
       aria-label={label}
       className={classes}
       data-testid="number-input-container"
+      id={numberInputId}
       role="spinbutton"
       aria-valuemin={min}
       aria-valuemax={max}
@@ -128,6 +132,7 @@ export const NumberInput: React.FC<NumberInputProps> = ({
         <StartAdornment>{startAdornment}</StartAdornment>
 
         <Input
+          aria-labelledby={numberInputId}
           id={id}
           isDisabled={isDisabled}
           isCondensed={isCondensed}