feat: Make Input aria-label available when using FormField (#1615)

src/input/__tests__/input.test.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Input, { InputProps } from '../../../lib/components/input';
+import FormField from '../../../lib/components/form-field';
 import styles from '../../../lib/components/input/styles.css.js';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
@@ -324,6 +325,32 @@ describe('Input', () => {
         expect(input).not.toHaveAttribute('aria-required');
       });
     });
+
+    test('aria-label from input takes precedence over aria-labelledBy from form field', () => {
+      render(
+        <FormField label="Form label">
+          <Input value="" ariaLabel="Input label" />
+        </FormField>
+      );
+
+      const element = createWrapper().find('input')!.getElement();
+
+      expect(element).toHaveAttribute('aria-label', 'Input label');
+      expect(element).not.toHaveAttribute('aria-labelledby');
+    });
+
+    test('aria-labelled by from input takes precedence over aria-label', () => {
+      render(
+        <FormField label="Form label">
+          <Input value="" ariaLabel="Input label" ariaLabelledby="test" />
+        </FormField>
+      );
+
+      const element = createWrapper().find('input')!.getElement();
+
+      expect(element).toHaveAttribute('aria-label', 'Input label');
+      expect(element).toHaveAttribute('aria-labelledby', 'test');
+    });
   });
 
   describe('Ref', () => {

src/input/internal.tsx

@@ -101,7 +101,10 @@ function InternalInput(
 
   const attributes: React.InputHTMLAttributes<HTMLInputElement> = {
     'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
+    // aria-labelledby has precedence over aria-label in accessible name calculation.
+    // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.
+    // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name
+    'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     name,
     placeholder,