fix(BaseDropdown): add aria-disabled when disabled

lumada-design · Jan 5, 2024 · fdcf211 · fdcf211
1 parent f18f1b5
commit fdcf211
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/packages/core/src/BaseDropdown/BaseDropdown.test.tsx b/packages/core/src/BaseDropdown/BaseDropdown.test.tsx
@@ -5,9 +5,7 @@ import { describe, expect, it } from "vitest";
 import { HvBaseDropdown } from "./BaseDropdown";
 
 const Main = () => (
-  <div style={{ width: 121 }}>
-    <HvBaseDropdown placeholder="Placeholder..." aria-label="Main sample" />
-  </div>
+  <HvBaseDropdown placeholder="Placeholder..." aria-label="Main sample" />
 );
 
 describe("BaseDropDown", () => {
@@ -24,6 +22,25 @@ describe("BaseDropDown", () => {
     expect(baseDropdownHeader).toHaveAttribute("aria-expanded", "true");
   });
 
+  it("should not open when disabled", async () => {
+    render(
+      <HvBaseDropdown
+        disabled
+        placeholder="Placeholder..."
+        aria-label="Main sample"
+      />
+    );
+
+    const baseDropdownHeader = screen.getByRole("combobox");
+
+    expect(baseDropdownHeader).toHaveAttribute("aria-disabled", "true");
+    expect(baseDropdownHeader).toHaveAttribute("aria-expanded", "false");
+
+    // Open
+    await userEvent.click(baseDropdownHeader);
+    expect(baseDropdownHeader).toHaveAttribute("aria-expanded", "false");
+  });
+
   it("should close on double click", async () => {
     render(<Main />);
 

diff --git a/packages/core/src/BaseDropdown/BaseDropdown.tsx b/packages/core/src/BaseDropdown/BaseDropdown.tsx
@@ -196,6 +196,7 @@ export const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(
     const headerControlArias = {
       "aria-required": required ?? undefined,
       "aria-readonly": readOnly ?? undefined,
+      "aria-disabled": disabled ?? undefined,
 
       "aria-expanded": ariaExpanded,
       "aria-owns": isOpen ? containerId : undefined,