fix(button): Sets aria-disabled instead of disabled on internal ancho…

…r element. #8140
Esri · Nov 27, 2023 · b60728c · b60728c
1 parent a7aeb37
commit b60728c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -90,6 +90,33 @@ describe("calcite-button", () => {
     hidden("calcite-button");
   });
 
+  it("renders child element as disabled or aria-disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-button disabled>Continue</calcite-button>`);
+
+    let elementAsButton = await page.find("calcite-button >>> button");
+    let elementAsLink = await page.find("calcite-button >>> a");
+
+    expect(elementAsButton).not.toBeNull();
+    expect(elementAsLink).toBeNull();
+
+    expect(await elementAsButton.getProperty("disabled")).toBe(true);
+    expect(await elementAsButton.getProperty("ariaDisabled")).toBe(null);
+
+    const element = await page.find("calcite-button");
+    element.setProperty("href", "#anchor");
+    await page.waitForChanges();
+
+    elementAsButton = await page.find("calcite-button >>> button");
+    elementAsLink = await page.find("calcite-button >>> a");
+
+    expect(elementAsButton).toBeNull();
+    expect(elementAsLink).not.toBeNull();
+
+    expect(await elementAsLink.getProperty("disabled")).toBe(undefined);
+    expect(await elementAsLink.getProperty("ariaDisabled")).toBe("true");
+  });
+
   it("renders as a button with default props", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Continue</calcite-button>`);

diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -32,6 +32,7 @@ import {
   unwatchGlobalAttributes,
   watchGlobalAttributes,
 } from "../../utils/globalAttributes";
+import { toAriaBoolean } from "../../utils/dom";
 
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
@@ -258,6 +259,7 @@ export class Button
 
     return (
       <Tag
+        aria-disabled={childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null}
         aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
         aria-live="polite"
         class={{
@@ -267,7 +269,7 @@ export class Button
           [CSS.iconStartEmpty]: !this.iconStart,
           [CSS.iconEndEmpty]: !this.iconEnd,
         }}
-        disabled={this.disabled || this.loading}
+        disabled={childElType === "button" ? this.disabled || this.loading : null}
         href={childElType === "a" && this.href}
         name={childElType === "button" && this.name}
         onClick={this.handleClick}