Merge pull request #2142 from dxc-technology/jialecl-select-ariaLabel

ariaLabel prop added to select component

Author: GomezIvann

apps/website/screens/components/select/code/SelectCodePage.tsx

@@ -268,6 +268,16 @@ const sections = [
             <td>Reference to the component.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>ariaLabel</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Specifies a string to be used as the name for the select element when no <Code>label</Code> is provided.
+            </td>
+            <td>'Select'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

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(
+      <DxcSelect ariaLabel="Example aria label" placeholder="Example" options={singleOptions} />
+    );
+    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(
       <DxcSelect label="test-select-label" name="test" defaultValue="4" options={singleOptions} />

packages/lib/src/select/Select.tsx

@@ -52,6 +52,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Select",
     },
     ref
   ): JSX.Element => {
@@ -327,6 +328,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                 aria-invalid={!!error}
                 aria-errormessage={error ? errorId : undefined}
                 aria-required={!disabled && !optional}
+                aria-label={label ? undefined : ariaLabel}
               >
                 {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && (
                   <SelectionIndicator>

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