diff --git a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx index 90e77ce10d..de5c5361df 100644 --- a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx +++ b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx @@ -236,6 +236,17 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the date input element when no label is + provided. + + 'Date input' + ), diff --git a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx index e00ce2a76f..3a5e8afb98 100644 --- a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx +++ b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx @@ -257,6 +257,17 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the number input element when no label is + provided. + + 'Number input' + ), diff --git a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx index 538c434ec5..40c81df14d 100644 --- a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx +++ b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx @@ -204,6 +204,17 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the password input element when no label is + provided. + + 'Password input' + ), diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx index 55df2016ff..27e50064fe 100644 --- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx +++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx @@ -330,6 +330,17 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the textInput element when no label is + provided. + + 'Text input' + ), diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index 20d13c9067..49e00a94bc 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/packages/lib/src/date-input/DateInput.tsx @@ -73,6 +73,7 @@ const DxcDateInput = forwardRef( margin, size, tabIndex, + ariaLabel = "Date input", }, ref ): JSX.Element => { @@ -260,6 +261,7 @@ const DxcDateInput = forwardRef( size={size} tabIndex={tabIndex} ref={dateRef} + ariaLabel={ariaLabel} /> diff --git a/packages/lib/src/date-input/types.ts b/packages/lib/src/date-input/types.ts index b7203b20b0..5913922443 100644 --- a/packages/lib/src/date-input/types.ts +++ b/packages/lib/src/date-input/types.ts @@ -93,6 +93,10 @@ type Props = { * Value of the tabindex attribute. */ tabIndex?: number; + /** + * Specifies a string to be used as the name for the date input element when no `label` is provided. + */ + ariaLabel?: string; }; export type DateType = { day: number; month: number; year: number }; diff --git a/packages/lib/src/number-input/NumberInput.tsx b/packages/lib/src/number-input/NumberInput.tsx index ba7bb9a418..315012b76d 100644 --- a/packages/lib/src/number-input/NumberInput.tsx +++ b/packages/lib/src/number-input/NumberInput.tsx @@ -28,6 +28,7 @@ const DxcNumberInput = forwardRef( margin, size, tabIndex, + ariaLabel = "Number input", }, ref ) => { @@ -77,6 +78,7 @@ const DxcNumberInput = forwardRef( size={size} tabIndex={tabIndex} ref={ref} + ariaLabel={ariaLabel} /> diff --git a/packages/lib/src/number-input/types.ts b/packages/lib/src/number-input/types.ts index b07f52260c..1c96009ac9 100644 --- a/packages/lib/src/number-input/types.ts +++ b/packages/lib/src/number-input/types.ts @@ -111,6 +111,10 @@ type Props = { * Value of the tabindex attribute. */ tabIndex?: number; + /** + * Specifies a string to be used as the name for the number input element when no `label` is provided. + */ + ariaLabel?: string; }; export type NumberInputContextProps = { diff --git a/packages/lib/src/password-input/PasswordInput.tsx b/packages/lib/src/password-input/PasswordInput.tsx index 3908e347f2..3c5bad0b94 100644 --- a/packages/lib/src/password-input/PasswordInput.tsx +++ b/packages/lib/src/password-input/PasswordInput.tsx @@ -8,10 +8,9 @@ const setInputType = (type: string, element: HTMLDivElement | null) => { element?.getElementsByTagName("input")[0]?.setAttribute("type", type); }; -const setAriaAttributes = (ariaExpanded: "true" | "false", ariaLabel: string, element: HTMLDivElement | null) => { +const setAriaAttributes = (ariaExpanded: "true" | "false", element: HTMLDivElement | null) => { const buttonElement = element?.getElementsByTagName("button")[0]; buttonElement?.setAttribute("aria-expanded", ariaExpanded); - buttonElement?.setAttribute("aria-label", ariaLabel); }; const DxcPasswordInput = forwardRef( @@ -32,6 +31,7 @@ const DxcPasswordInput = forwardRef( margin, size = "medium", tabIndex = 0, + ariaLabel = "Password input", }, ref ) => { @@ -44,12 +44,12 @@ const DxcPasswordInput = forwardRef( if (isPasswordVisible) { setInputType("text", inputRef.current); if (passwordInput.inputHidePasswordTitle) { - setAriaAttributes("true", passwordInput.inputHidePasswordTitle, inputRef.current); + setAriaAttributes("true", inputRef.current); } } else { setInputType("password", inputRef.current); if (passwordInput.inputShowPasswordTitle) { - setAriaAttributes("false", passwordInput.inputShowPasswordTitle, inputRef.current); + setAriaAttributes("false", inputRef.current); } } })(); @@ -81,6 +81,7 @@ const DxcPasswordInput = forwardRef( autocomplete={autocomplete} ref={inputRef} tabIndex={tabIndex} + ariaLabel={ariaLabel} /> ); diff --git a/packages/lib/src/password-input/types.ts b/packages/lib/src/password-input/types.ts index 107803952a..07d81c648d 100644 --- a/packages/lib/src/password-input/types.ts +++ b/packages/lib/src/password-input/types.ts @@ -92,6 +92,10 @@ type Props = { * Value of the tabindex attribute. */ tabIndex?: number; + /** + * Specifies a string to be used as the name for the password input element when no `label` is provided. + */ + ariaLabel?: string; }; /** diff --git a/packages/lib/src/text-input/TextInput.test.tsx b/packages/lib/src/text-input/TextInput.test.tsx index ec1994dae1..22be2c6ff8 100644 --- a/packages/lib/src/text-input/TextInput.test.tsx +++ b/packages/lib/src/text-input/TextInput.test.tsx @@ -50,6 +50,15 @@ describe("TextInput component tests", () => { expect(input.getAttribute("aria-errormessage")).toBe(errorMessage.id); expect(input.getAttribute("aria-invalid")).toBe("true"); expect(errorMessage.getAttribute("aria-live")).toBe("assertive"); + expect(input.getAttribute("aria-label")).toBeNull(); + }); + + test("Renders with correct error aria label", () => { + const { getByRole } = render( + + ); + const input = getByRole("textbox"); + expect(input.getAttribute("aria-label")).toBe("Example aria label"); }); test("Renders with correct initial value", () => { diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 99720796f5..1d73f7f8e2 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -226,6 +226,7 @@ const DxcTextInput = forwardRef( margin, size = "medium", tabIndex = 0, + ariaLabel = "Text input", }, ref ): JSX.Element => { @@ -642,6 +643,7 @@ const DxcTextInput = forwardRef( aria-invalid={!!error} aria-errormessage={error ? errorId : undefined} aria-required={!disabled && !optional} + aria-label={label ? undefined : ariaLabel} /> {!disabled && error && (