From cfa7e39b55fd05480191d72b9dec94773c848593 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 23 Sep 2024 09:56:13 -0700 Subject: [PATCH 1/7] fix: remove aria-disabled from components where necessary. #7775 --- .../src/components/button/button.tsx | 2 - .../src/components/card-group/card-group.tsx | 9 +--- .../src/components/card/card.tsx | 1 - .../src/components/chip-group/chip-group.tsx | 9 +--- .../src/components/chip/chip.tsx | 1 - .../date-picker-day/date-picker-day.tsx | 1 - .../src/components/handle/handle.tsx | 44 +++++++++++-------- .../src/components/slider/slider.tsx | 1 - .../src/components/table-cell/table-cell.tsx | 1 - .../src/components/table-row/table-row.tsx | 1 - 10 files changed, 29 insertions(+), 41 deletions(-) diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index ffbae59a0be..5095e687f01 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -33,7 +33,6 @@ 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 { ButtonMessages } from "./assets/button/t9n"; @@ -266,7 +265,6 @@ export class Button return ( -
+
(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 index 675cc7502bb..b40747911f4 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -339,7 +339,6 @@ export class Card
-
+
(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 index 55a1b47ff47..e4c6452813f 100644 --- 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 index b048610ac8a..9c3e465c6d6 100644 --- 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 ( { - 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()} - > - - + + // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486 + { + 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()} + > + + + ); } } diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index 91e9fe2a746..65dfa5f0a3f 100644 --- 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 (
Date: Mon, 23 Sep 2024 10:01:36 -0700 Subject: [PATCH 2/7] fix date picker month header --- .../date-picker-month-header/date-picker-month-header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx index bec95dc0327..182767a2aaf 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -18,7 +18,7 @@ import { prevMonth, formatCalendarYear, } from "../../utils/date"; -import { closestElementCrossShadowBoundary } from "../../utils/dom"; +import { closestElementCrossShadowBoundary, toAriaBoolean } from "../../utils/dom"; import { isActivationKey } from "../../utils/key"; import { numberStringFormatter } from "../../utils/locale"; import { DatePickerMessages } from "../date-picker/assets/date-picker/t9n"; @@ -129,7 +129,7 @@ export class DatePickerMonthHeader { return (
Date: Mon, 23 Sep 2024 10:06:12 -0700 Subject: [PATCH 3/7] fix comment --- packages/calcite-components/src/components/handle/handle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index eeb4ba5d7dd..090cc48f730 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -299,8 +299,8 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo render(): VNode { return ( - // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486 Date: Mon, 23 Sep 2024 10:29:20 -0700 Subject: [PATCH 4/7] fix test --- .../calcite-components/src/components/button/button.e2e.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index 7ac027ca14c..d1f3d15d4ee 100644 --- 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(`Continue`); @@ -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 () => { From 54f76cebf9ed818af3f97a89d1376820b46cb9ba Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 25 Sep 2024 13:58:34 -0700 Subject: [PATCH 5/7] revert date picker changes, review fixes --- .../calcite-components/src/components/button/button.tsx | 2 ++ .../date-picker-month-header/date-picker-month-header.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 5095e687f01..dda1b76bcf3 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -35,6 +35,7 @@ import { import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; 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"; @@ -265,6 +266,7 @@ export class Button return (
Date: Wed, 25 Sep 2024 14:27:04 -0700 Subject: [PATCH 6/7] Update .stylelintrc.cjs --- packages/calcite-components/.stylelintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 0998dad6911..2e02214db54 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,13 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = []; +const customFunctions = [ + "get-trailing-text-input-padding", + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale" +]; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From 05a4157231843289c0a163575642ab404ed227e3 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 25 Sep 2024 15:29:05 -0700 Subject: [PATCH 7/7] cleanup --- packages/calcite-components/src/components/button/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index c214c037663..b8ae14cb703 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -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 === ""