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 & {