Autosuggest update to avoid inconsistent roles with Radix

lib/src/dropdown/Dropdown.test.js

@@ -42,12 +42,12 @@ describe("Dropdown component tests", () => {
     const { getAllByRole, getByRole } = render(<DxcDropdown options={options} label="dropdown-test" />);
     const dropdown = getByRole("button");
 
-    expect(dropdown.getAttribute("aria-disabled")).toBe("false");
     expect(dropdown.getAttribute("aria-haspopup")).toBe("true");
     expect(dropdown.getAttribute("aria-expanded")).toBeNull();
     expect(dropdown.getAttribute("aria-activedescendant")).toBeNull();
     userEvent.click(dropdown);
     const menu = getByRole("menu");
+    expect(dropdown.getAttribute("aria-controls")).toBe(menu.id);
     expect(dropdown.getAttribute("aria-expanded")).toBe("true");
     expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
     expect(menu.getAttribute("aria-orientation")).toBe("vertical");
@@ -74,7 +74,6 @@ describe("Dropdown component tests", () => {
     );
     const dropdown = getByRole("button");
 
-    expect(dropdown.getAttribute("aria-disabled")).toBe("true");
     expect(queryByRole("menu")).toBeFalsy();
     userEvent.click(dropdown);
     expect(queryByRole("menu")).toBeFalsy();

lib/src/dropdown/Dropdown.tsx

@@ -169,7 +169,7 @@ const DxcDropdown = ({
         size={size}
       >
         <Popover.Root open={isOpen}>
-          <Popover.Trigger asChild>
+          <Popover.Trigger asChild type={undefined}>
             <DropdownTrigger
               opened={isOpen}
               onClick={handleTriggerOnClick}
@@ -182,8 +182,8 @@ const DxcDropdown = ({
               margin={margin}
               size={size}
               id={triggerId}
-              aria-disabled={disabled}
               aria-haspopup="true"
+              aria-controls={menuId}
               aria-expanded={isOpen ? true : undefined}
               tabIndex={tabIndex}
               ref={triggerRef}

lib/src/number-input/NumberInput.test.js

@@ -46,7 +46,7 @@ describe("Number input component tests", () => {
     const onBlur = jest.fn();
     const onChange = jest.fn();
     const { getByRole } = render(<DxcNumberInput onBlur={onBlur} onChange={onChange} />);
-    const input = getByRole("textbox");
+    const input = getByRole("spinbutton");
 
     userEvent.type(input, "1");
     userEvent.clear(input);

lib/src/password-input/PasswordInput.test.js

@@ -21,26 +21,26 @@ describe("Password input component tests", () => {
 
   test("onChange function is called correctly", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcPasswordInput label="Password input" onChange={onChange} />);
-    const passwordInput = getByRole("textbox");
+    const { getByLabelText } = render(<DxcPasswordInput label="Password input" onChange={onChange} />);
+    const passwordInput = getByLabelText("Password input");
     userEvent.type(passwordInput, "Pa$$w0rd");
     expect(onChange).toHaveBeenCalledWith({ value: "P" });
     expect(passwordInput.value).toBe("Pa$$w0rd");
   });
 
   test("onBlur function is called correctly", () => {
     const onBlur = jest.fn();
-    const { getByRole } = render(<DxcPasswordInput label="Password input" onBlur={onBlur} />);
-    const passwordInput = getByRole("textbox");
+    const { getByLabelText } = render(<DxcPasswordInput label="Password input" onBlur={onBlur} />);
+    const passwordInput = getByLabelText("Password input");
     userEvent.type(passwordInput, "Pa$$w0rd");
     fireEvent.blur(passwordInput);
     expect(onBlur).toHaveBeenCalledWith({ value: "Pa$$w0rd" });
     expect(passwordInput.value).toBe("Pa$$w0rd");
   });
 
   test("Clear password input value", () => {
-    const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
-    const passwordInput = getByRole("textbox");
+    const { getAllByRole, getByLabelText } = render(<DxcPasswordInput label="Password input" clearable />);
+    const passwordInput = getByLabelText("Password input");
     userEvent.type(passwordInput, "Pa$$w0rd");
     expect(passwordInput.value).toBe("Pa$$w0rd");
     const clearButton = getAllByRole("button")[0];
@@ -49,17 +49,17 @@ describe("Password input component tests", () => {
   });
 
   test("Non clearable password input has no clear icon", () => {
-    const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" />);
-    const passwordInput = getByRole("textbox");
+    const { getAllByRole, getByLabelText } = render(<DxcPasswordInput label="Password input" />);
+    const passwordInput = getByLabelText("Password input");
     userEvent.type(passwordInput, "Pa$$w0rd");
     expect(passwordInput.value).toBe("Pa$$w0rd");
     const buttons = getAllByRole("button");
     expect(buttons.length).toBe(1);
   });
 
   test("Show/hide password input button works correctly", () => {
-    const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
-    const passwordInput = getByRole("textbox");
+    const { getAllByRole, getByLabelText } = render(<DxcPasswordInput label="Password input" clearable />);
+    const passwordInput = getByLabelText("Password input");
     userEvent.type(passwordInput, "Pa$$w0rd");
     expect(passwordInput.value).toBe("Pa$$w0rd");
     expect(passwordInput.type).toBe("password");
@@ -80,8 +80,8 @@ describe("Password input component tests", () => {
   });
 
   test("Password input has correct accesibility attributes", () => {
-    const { getByRole } = render(<DxcPasswordInput label="Password input" />);
-    const passwordInput = getByRole("textbox");
+    const { getByRole, getByLabelText } = render(<DxcPasswordInput label="Password input" />);
+    const passwordInput = getByLabelText("Password input");
     expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
     expect(passwordInput.getAttribute("aria-controls")).toBeNull();
     expect(passwordInput.getAttribute("aria-expanded")).toBeNull();

lib/src/select/Select.tsx

@@ -313,7 +313,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
           )}
           {helperText && <HelperText disabled={disabled}>{helperText}</HelperText>}
           <Popover.Root open={isOpen}>
-            <Popover.Trigger asChild>
+            <Popover.Trigger asChild type={undefined}>
               <Select
                 id={selectId}
                 disabled={disabled}

lib/src/text-input/TextInput.test.js

@@ -227,7 +227,6 @@ describe("TextInput component tests", () => {
     const onChange = jest.fn();
     const { getByRole } = render(<DxcTextInput label="Input label" onChange={onChange} disabled />);
     const input = getByRole("textbox");
-    expect(input.getAttribute("aria-disabled")).toBe("true");
     userEvent.type(input, "Test");
     expect(onChange).not.toHaveBeenCalled();
   });
@@ -326,6 +325,7 @@ describe("TextInput component tests", () => {
     expect(input.getAttribute("aria-autocomplete")).toBeNull();
     expect(input.getAttribute("aria-controls")).toBeNull();
     expect(input.getAttribute("aria-expanded")).toBeNull();
+    expect(input.getAttribute("aria-haspopup")).toBeNull();
     expect(input.getAttribute("aria-activedescendant")).toBeNull();
     expect(input.getAttribute("aria-invalid")).toBe("false");
     expect(input.getAttribute("aria-errormessage")).toBeNull();
@@ -343,6 +343,7 @@ describe("TextInput component tests", () => {
     const input = getByRole("combobox");
     expect(input.getAttribute("aria-autocomplete")).toBe("list");
     expect(input.getAttribute("aria-expanded")).toBe("false");
+    expect(input.getAttribute("aria-haspopup")).toBe("listbox");
     expect(input.getAttribute("aria-required")).toBe("false");
     fireEvent.focus(input);
     const list = getByRole("listbox");