diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx index 22361c7f1c..cdeba01db9 100644 --- a/apps/website/screens/components/select/code/SelectCodePage.tsx +++ b/apps/website/screens/components/select/code/SelectCodePage.tsx @@ -268,6 +268,16 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the select element when no label is provided. + + 'Select' + ), diff --git a/packages/lib/src/select/Select.test.tsx b/packages/lib/src/select/Select.test.tsx index 6ac3256158..2da6718b04 100644 --- a/packages/lib/src/select/Select.test.tsx +++ b/packages/lib/src/select/Select.test.tsx @@ -114,12 +114,21 @@ describe("Select component tests", () => { expect(select.getAttribute("aria-labelledby")).toBe(label.id); expect(select.getAttribute("aria-activedescendant")).toBeNull(); expect(select.getAttribute("aria-invalid")).toBe("false"); + expect(select.getAttribute("aria-label")).toBeNull(); await userEvent.click(select); const list = getByRole("listbox"); expect(select.getAttribute("aria-controls")).toBe(list.id); expect(list.getAttribute("aria-multiselectable")).toBe("false"); }); + test("Renders with correct error aria label", () => { + const { getByRole } = render( + + ); + const select = getByRole("combobox"); + expect(select.getAttribute("aria-label")).toBe("Example aria label"); + }); + test("Single selection: Renders with correct default value", async () => { const { getByText, getByRole, getAllByRole, queryByRole, container } = render( diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 334a34d9e9..b1cc105805 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -52,6 +52,7 @@ const DxcSelect = forwardRef( margin, size = "medium", tabIndex = 0, + ariaLabel = "Select", }, ref ): JSX.Element => { @@ -327,6 +328,7 @@ const DxcSelect = forwardRef( aria-invalid={!!error} aria-errormessage={error ? errorId : undefined} aria-required={!disabled && !optional} + aria-label={label ? undefined : ariaLabel} > {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( diff --git a/packages/lib/src/select/types.ts b/packages/lib/src/select/types.ts index d6858b661c..850746167e 100644 --- a/packages/lib/src/select/types.ts +++ b/packages/lib/src/select/types.ts @@ -94,6 +94,10 @@ type CommonProps = { * Value of the tabindex attribute. */ tabIndex?: number; + /** + * Specifies a string to be used as the name for the select element when no `label` is provided. + */ + ariaLabel?: string; }; type SingleSelect = CommonProps & {