feat(InputField): add ariaLabel prop

kiwicom · Dec 19, 2024 · 1bf0bb9 · 1bf0bb9
1 parent f051373
commit 1bf0bb9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/packages/orbit-components/src/InputField/InputField.stories.tsx b/packages/orbit-components/src/InputField/InputField.stories.tsx
@@ -489,6 +489,7 @@ export const Playground: Story = {
     autoComplete: "off",
     id: "ID",
     spaceAfter: SPACINGS_AFTER.MEDIUM,
+    ariaLabel: "Input field",
   },
 
   argTypes: {
@@ -499,6 +500,20 @@ export const Playground: Story = {
       },
     },
   },
+
+  parameters: {
+    controls: {
+      exclude: [
+        "onChange",
+        "onFocus",
+        "onBlur",
+        "onMouseUp",
+        "onMouseDown",
+        "onSelect",
+        "onKeyDown",
+      ],
+    },
+  },
 };
 
 export const Rtl: Story = {

diff --git a/packages/orbit-components/src/InputField/README.md b/packages/orbit-components/src/InputField/README.md
@@ -63,6 +63,7 @@ The table below contains all types of props available in the InputField componen
 | ariaHasPopup         | `boolean`                          |           | The aria-haspopup attribute of the input, see [this docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup).                             |
 | 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](#accessibility).                                                                                                       |
 
 ### enum
 
@@ -134,3 +135,6 @@ class Component extends React.PureComponent<Props> {
   id="NICEID"
 />
 ```
+
+- The `ariaLabel` prop allows you to specify an `aria-label` attribute for the InputField component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using `ariaLabel`, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component's purpose and functionality.
+- If the `label` prop is not provided, the `ariaLabel` prop must be specified to ensure component accessibility.
diff --git a/packages/orbit-components/src/InputField/index.tsx b/packages/orbit-components/src/InputField/index.tsx
@@ -110,6 +110,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     readOnly,
     list,
     autoComplete,
+    ariaLabel,
     ariaAutocomplete,
     ariaActiveDescendant,
     ariaHasPopup,
@@ -269,7 +270,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
           ref={ref}
           tabIndex={tabIndex !== undefined ? Number(tabIndex) : undefined}
           list={list}
-          aria-labelledby={!label ? inputId : undefined}
+          aria-label={ariaLabel}
           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
@@ -50,6 +50,7 @@ export interface Props extends Common.Globals, Common.SpaceAfter, Common.DataAtt
   readonly onMouseDown?: React.MouseEventHandler<HTMLInputElement>;
   readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   readonly onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+  readonly ariaLabel?: string;
   readonly ariaAutocomplete?: AriaAutoComplete;
   readonly ariaActiveDescendant?: string;
   readonly ariaHasPopup?: boolean;