feat(InputField): add ariaLabelledby prop to improve the accessibility

kiwicom · Feb 27, 2025 · 1b1d00b · 1b1d00b
1 parent 87569b4
commit 1b1d00b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 0 deletions.
diff --git a/packages/orbit-components/src/InputField/README.md b/packages/orbit-components/src/InputField/README.md
@@ -64,6 +64,7 @@ The table below contains all types of props available in the InputField componen
 | ariaExpanded         | `boolean`                          |           | The aria-expanded attribute of the input, see [this docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).                              |
 | ariaControls         | `string`                           |           | The aria-controls attribute of the input, see [this docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls).                              |
 | ariaLabel            | `string`                           |           | Optional prop for `aria-label` value. See `Accessibility` tab.                                                                                                                    |
+| ariaLabelledBy       | `string`                           |           | Optional prop for `aria-labelledby` value. See `Accessibility` tab.                                                                                                               |
 
 ### enum
 

diff --git a/packages/orbit-components/src/InputField/index.tsx b/packages/orbit-components/src/InputField/index.tsx
@@ -111,6 +111,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     list,
     autoComplete,
     ariaLabel,
+    ariaLabelledBy,
     ariaAutocomplete,
     ariaActiveDescendant,
     ariaHasPopup,
@@ -276,6 +277,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
           tabIndex={tabIndex !== undefined ? Number(tabIndex) : undefined}
           list={list}
           aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           aria-describedby={shown ? `${inputId}-feedback` : undefined}
           aria-invalid={error ? true : undefined}
           aria-autocomplete={ariaAutocomplete}

diff --git a/packages/orbit-components/src/InputField/types.d.ts b/packages/orbit-components/src/InputField/types.d.ts
@@ -51,6 +51,7 @@ export interface Props extends Common.Globals, Common.SpaceAfter, Common.DataAtt
   readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   readonly onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
   readonly ariaLabel?: string;
+  readonly ariaLabelledBy?: string;
   readonly ariaAutocomplete?: AriaAutoComplete;
   readonly ariaActiveDescendant?: string;
   readonly ariaHasPopup?: boolean;