diff --git a/src/input/__tests__/input.test.tsx b/src/input/__tests__/input.test.tsx index 04372109a3..02507ca2c2 100644 --- a/src/input/__tests__/input.test.tsx +++ b/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( + + + + ); + + 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( + + + + ); + + const element = createWrapper().find('input')!.getElement(); + + expect(element).toHaveAttribute('aria-label', 'Input label'); + expect(element).toHaveAttribute('aria-labelledby', 'test'); + }); }); describe('Ref', () => { diff --git a/src/input/internal.tsx b/src/input/internal.tsx index 3214887afa..49c6c57c62 100644 --- a/src/input/internal.tsx +++ b/src/input/internal.tsx @@ -101,7 +101,10 @@ function InternalInput( const attributes: React.InputHTMLAttributes = { '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,