From 0100a20ace393fd311a1bcd0ea9244f8d0b10cf2 Mon Sep 17 00:00:00 2001
From: thyhjwb6 <thyhjwb6@royalnavy.io>
Date: Wed, 9 Sep 2020 11:56:05 +0100
Subject: [PATCH] fix(NumberInput): Set `aria-labelledby` attribute

---
 .../src/components/NumberInput/NumberInput.test.tsx  | 12 ++++++++++++
 .../src/components/NumberInput/NumberInput.tsx       |  5 +++++
 2 files changed, 17 insertions(+)

diff --git a/packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx b/packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx
index 76b051bdca..946d411086 100644
--- 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
index ee3dc2735b..94f7daa37a 100644
--- 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}