fix: remove aria-disabled from components where necessary (#10374)

**Related Issue:** #7775 ## Summary - remove setting `aria-disabled` where the `InteractiveContainer` will handle setting `aria-disabled` - add `InteractiveContainer` to handle component - picklist and valuelist also need this but they are deprecated so I didn't update them - some components were setting `aria-disabled` without `toAriaBoolean` so they weren't working anyway `aria-disabled={this.disabled}` - `date-picker-month-header` was not using `toAriaBoolean` - update e2e test - After this PR, we can evaluate if we need to update the `Interactive.tsx` helper.
Esri · Sep 25, 2024 · 4f8c16c · 4f8c16c
1 parent 5ba3112
commit 4f8c16c
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 45 deletions.
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -94,7 +94,7 @@ describe("calcite-button", () => {
     hidden("calcite-button");
   });
 
-  it("renders child element as disabled or aria-disabled", async () => {
+  it("renders child element as disabled", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button disabled>Continue</calcite-button>`);
 
@@ -105,7 +105,6 @@ describe("calcite-button", () => {
     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");
@@ -118,7 +117,6 @@ describe("calcite-button", () => {
     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 () => {

diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -33,9 +33,9 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
-import { toAriaBoolean } from "../../utils/dom";
 import { IconNameOrString } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
+import { toAriaBoolean } from "../../utils/dom";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
 import { CSS } from "./resources";
@@ -266,7 +266,7 @@ export class Button
     return (
       <InteractiveContainer disabled={this.disabled}>
         <Tag
-          aria-disabled={childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null}
+          aria-busy={toAriaBoolean(this.loading)}
           aria-expanded={this.el.ariaExpanded}
           aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
           aria-live="polite"
@@ -277,7 +277,7 @@ export class Button
             [CSS.iconStartEmpty]: !this.iconStart,
             [CSS.iconEndEmpty]: !this.iconEnd,
           }}
-          disabled={childElType === "button" ? this.disabled || this.loading : null}
+          disabled={childElType === "button" ? this.disabled : null}
           download={
             childElType === "a"
               ? this.download === true || this.download === ""

diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -11,7 +11,7 @@ import {
   Watch,
   Host,
 } from "@stencil/core";
-import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom";
+import { focusElement, focusElementInGroup } from "../../utils/dom";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -235,12 +235,7 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
     return (
       <Host>
         <InteractiveContainer disabled={this.disabled}>
-          <div
-            aria-disabled={toAriaBoolean(this.disabled)}
-            aria-label={this.label}
-            class="container"
-            role={role}
-          >
+          <div aria-label={this.label} class="container" role={role}>
             <slot
               onSlotchange={this.updateItemsOnSlotChange}
               ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}

diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx
@@ -374,7 +374,6 @@ export class Card
         <InteractiveContainer disabled={this.disabled}>
           <div
             aria-checked={this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined}
-            aria-disabled={this.disabled}
             aria-label={this.label}
             class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}
             onClick={this.cardBodyClickHandler}

diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -10,7 +10,7 @@ import {
   Method,
   Watch,
 } from "@stencil/core";
-import { focusElementInGroup, slotChangeGetAssignedElements, toAriaBoolean } from "../../utils/dom";
+import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -275,12 +275,7 @@ export class ChipGroup implements InteractiveComponent {
 
     return (
       <InteractiveContainer disabled={disabled}>
-        <div
-          aria-disabled={toAriaBoolean(disabled)}
-          aria-label={this.label}
-          class="container"
-          role={role}
-        >
+        <div aria-label={this.label} class="container" role={role}>
           <slot
             onSlotchange={this.updateItems}
             ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}

diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
@@ -413,7 +413,6 @@ export class Chip
                 ? toAriaBoolean(this.selected)
                 : undefined
             }
-            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}
             aria-label={this.label}
             class={{
               [CSS.container]: true,

diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
@@ -181,7 +181,6 @@ export class DatePickerDay implements InteractiveComponent, LoadableComponent {
 
     return (
       <Host
-        aria-disabled={toAriaBoolean(this.disabled)}
         aria-label={dayLabel}
         aria-selected={toAriaBoolean(this.active)}
         id={dayId}

diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx
@@ -25,7 +25,11 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  InteractiveComponent,
+  InteractiveContainer,
+  updateHostInteraction,
+} from "../../utils/interactive";
 import { HandleMessages } from "./assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./interfaces";
 import { CSS, ICONS, SUBSTITUTIONS } from "./resources";
@@ -294,24 +298,26 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo
 
   render(): VNode {
     return (
-      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-      <span
-        aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}
-        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
-        aria-label={this.disabled ? null : this.getAriaText("label")}
-        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
-        onBlur={this.handleBlur}
-        onKeyDown={this.handleKeyDown}
-        ref={(el): void => {
-          this.handleButton = el;
-        }}
-        // role of radio is being applied to allow space key to select in screen readers
-        role="radio"
-        tabIndex={this.disabled ? null : 0}
-        title={this.getTooltip()}
-      >
-        <calcite-icon icon={ICONS.drag} scale="s" />
-      </span>
+      <InteractiveContainer disabled={this.disabled}>
+        <span
+          // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+          aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}
+          aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
+          aria-label={this.disabled ? null : this.getAriaText("label")}
+          class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          ref={(el): void => {
+            this.handleButton = el;
+          }}
+          // role of radio is being applied to allow space key to select in screen readers
+          role="radio"
+          tabIndex={this.disabled ? null : 0}
+          title={this.getTooltip()}
+        >
+          <calcite-icon icon={ICONS.drag} scale="s" />
+        </span>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
@@ -438,7 +438,6 @@ export class Slider
 
     return (
       <div
-        aria-disabled={this.disabled}
         aria-label={ariaLabel}
         aria-orientation="horizontal"
         aria-valuemax={this.max}

diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx
@@ -222,7 +222,6 @@ export class TableCell
       <Host>
         <InteractiveContainer disabled={this.disabled}>
           <td
-            aria-disabled={this.disabled}
             class={{
               [CSS.footerCell]: this.parentRowType === "foot",
               [CSS.contentCell]: !this.numberCell && !this.selectionCell,

diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx
@@ -409,7 +409,6 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
       <Host>
         <InteractiveContainer disabled={this.disabled}>
           <tr
-            aria-disabled={this.disabled}
             aria-rowindex={this.positionAll + 1}
             aria-selected={this.selected}
             class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }}