From fcbf2416749dd6cbb47c30e8b1234d8fbdfe157a Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 22 Dec 2021 15:28:05 -0800 Subject: [PATCH 01/56] fix: ensure components are disabled consistently --- src/assets/styles/includes.scss | 12 ++ .../calcite-action/calcite-action.scss | 4 +- .../calcite-action/calcite-action.tsx | 3 +- .../calcite-block/calcite-block.scss | 13 +-- .../calcite-block/calcite-block.tsx | 18 ++- .../calcite-button/calcite-button.scss | 6 +- .../calcite-button/calcite-button.tsx | 3 +- .../calcite-checkbox/calcite-checkbox.scss | 4 +- .../calcite-checkbox/calcite-checkbox.tsx | 9 +- .../calcite-color-picker.scss | 2 + .../calcite-color-picker.tsx | 10 ++ .../calcite-combobox-item.scss | 2 + .../calcite-combobox-item.tsx | 7 +- .../calcite-combobox/calcite-combobox.scss | 4 +- .../calcite-combobox/calcite-combobox.tsx | 17 ++- .../calcite-date-picker-day.scss | 7 +- .../calcite-date-picker-day.tsx | 7 +- .../calcite-dropdown/calcite-dropdown.scss | 6 +- .../calcite-dropdown/calcite-dropdown.tsx | 23 +++- src/components/calcite-fab/calcite-fab.scss | 2 + src/components/calcite-fab/calcite-fab.tsx | 3 +- .../calcite-filter/calcite-filter.scss | 2 + .../calcite-filter/calcite-filter.tsx | 4 +- .../calcite-inline-editable.scss | 3 +- .../calcite-inline-editable.tsx | 3 +- .../calcite-input-date-picker.scss | 14 ++- .../calcite-input-date-picker.tsx | 25 ++++- .../calcite-input-time-picker.scss | 1 + .../calcite-input-time-picker.tsx | 21 +++- .../calcite-input/calcite-input.scss | 6 +- .../calcite-input/calcite-input.tsx | 11 +- .../calcite-label/calcite-label.scss | 4 +- .../calcite-label/calcite-label.tsx | 6 +- src/components/calcite-link/calcite-link.scss | 11 +- src/components/calcite-link/calcite-link.tsx | 9 +- .../calcite-list-item/calcite-list-item.scss | 4 +- .../calcite-list-item/calcite-list-item.tsx | 13 ++- src/components/calcite-list/calcite-list.scss | 2 + src/components/calcite-list/calcite-list.tsx | 18 ++- .../calcite-panel/calcite-panel.scss | 2 + .../calcite-panel/calcite-panel.tsx | 13 ++- .../calcite-pick-list/calcite-pick-list.scss | 2 + .../calcite-pick-list/calcite-pick-list.tsx | 8 +- .../calcite-pick-list/shared-list-render.tsx | 2 +- .../calcite-radio-button.scss | 3 +- .../calcite-radio-button.tsx | 9 +- .../calcite-radio-group.scss | 7 +- .../calcite-radio-group.tsx | 3 +- .../calcite-rating/calcite-rating.scss | 6 +- .../calcite-rating/calcite-rating.tsx | 8 +- .../calcite-select/calcite-select.scss | 6 +- .../calcite-select/calcite-select.tsx | 3 +- .../calcite-slider/calcite-slider.scss | 3 +- .../calcite-slider/calcite-slider.tsx | 3 +- .../calcite-sortable-list.scss | 2 + .../calcite-sortable-list.tsx | 7 +- .../calcite-split-button.scss | 2 +- .../calcite-split-button.tsx | 22 +++- .../calcite-stepper-item.scss | 11 +- .../calcite-stepper-item.tsx | 15 +-- .../calcite-switch/calcite-switch.scss | 5 +- .../calcite-switch/calcite-switch.tsx | 10 +- .../calcite-tab-title/calcite-tab-title.scss | 3 +- .../calcite-tab-title/calcite-tab-title.tsx | 4 +- .../calcite-tile-select.scss | 106 +++++++++++++++++- .../calcite-tile-select.tsx | 5 +- src/components/calcite-tile/calcite-tile.scss | 12 +- src/components/calcite-tile/calcite-tile.tsx | 3 +- .../calcite-value-list.scss | 2 + .../calcite-value-list/calcite-value-list.tsx | 8 +- src/tests/commonTests.ts | 22 ++++ src/utils/interactive.ts | 37 ++++++ 72 files changed, 524 insertions(+), 149 deletions(-) create mode 100644 src/utils/interactive.ts diff --git a/src/assets/styles/includes.scss b/src/assets/styles/includes.scss index 151624b7e1c..402c1909f64 100644 --- a/src/assets/styles/includes.scss +++ b/src/assets/styles/includes.scss @@ -41,3 +41,15 @@ z-index: -1 !important; } } + +@mixin disabled() { + :host([disabled]) { + @apply cursor-default opacity-disabled pointer-events-none select-none; + @content; + + [calcite-hydrated][disabled] { + /* prevent opacity stacking */ + @apply opacity-100; + } + } +} diff --git a/src/components/calcite-action/calcite-action.scss b/src/components/calcite-action/calcite-action.scss index 52ceb8df0fd..d44f386ed4e 100755 --- a/src/components/calcite-action/calcite-action.scss +++ b/src/components/calcite-action/calcite-action.scss @@ -3,9 +3,7 @@ @apply flex bg-transparent; } -:host([disabled]) { - @apply pointer-events-none; -} +@include disabled(); .button { @apply bg-foreground-1 diff --git a/src/components/calcite-action/calcite-action.tsx b/src/components/calcite-action/calcite-action.tsx index c772c43107d..556c141f8ea 100755 --- a/src/components/calcite-action/calcite-action.tsx +++ b/src/components/calcite-action/calcite-action.tsx @@ -16,6 +16,7 @@ import { Alignment, Appearance, Scale } from "../interfaces"; import { CSS, TEXT } from "./resources"; import { createObserver } from "../../utils/observers"; +import { InteractiveComponent } from "../../utils/interactive"; /** * @slot - A slot for adding a `calcite-icon`. @@ -25,7 +26,7 @@ import { createObserver } from "../../utils/observers"; styleUrl: "calcite-action.scss", shadow: true }) -export class CalciteAction { +export class CalciteAction implements InteractiveComponent { // -------------------------------------------------------------------------- // // Properties diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss index 2bb33081fe4..e9c472d9ffe 100644 --- a/src/components/calcite-block/calcite-block.scss +++ b/src/components/calcite-block/calcite-block.scss @@ -17,6 +17,8 @@ flex-basis: auto; } +@include disabled(); + @import "../../assets/styles/header"; .header { @@ -161,14 +163,3 @@ calcite-action-menu { @apply text-color-1; } } - -:host([disabled]) { - pointer-events: none; - user-select: none; - - @apply pointer-events-none select-none; - - .header-container { - @apply opacity-50; - } -} diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx index 8d3f5601fcd..ee043bd0535 100644 --- a/src/components/calcite-block/calcite-block.tsx +++ b/src/components/calcite-block/calcite-block.tsx @@ -8,6 +8,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding content to the block. @@ -20,7 +21,7 @@ import { styleUrl: "calcite-block.scss", shadow: true }) -export class CalciteBlock implements ConditionalSlotComponent { +export class CalciteBlock implements ConditionalSlotComponent, InteractiveComponent { // -------------------------------------------------------------------------- // // Properties @@ -92,6 +93,16 @@ export class CalciteBlock implements ConditionalSlotComponent { */ @Prop() summary: string; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Private Properties @@ -190,8 +201,7 @@ export class CalciteBlock implements ConditionalSlotComponent { } render(): VNode { - const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } = - this; + const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this; const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand; @@ -246,7 +256,7 @@ export class CalciteBlock implements ConditionalSlotComponent { ); return ( - +
); } + + componentDidRender(): void { + updateHostInteraction(this); + } } diff --git a/src/components/calcite-dropdown/calcite-dropdown.scss b/src/components/calcite-dropdown/calcite-dropdown.scss index 5dd286d1699..0514d4ff561 100644 --- a/src/components/calcite-dropdown/calcite-dropdown.scss +++ b/src/components/calcite-dropdown/calcite-dropdown.scss @@ -10,10 +10,8 @@ @apply inline-flex flex-initial; } -// disabled styles -:host([disabled]) { - @apply pointer-events-none opacity-disabled; -} +@include disabled(); + :host .calcite-dropdown-wrapper { @include popperContainer(); @include popperWrapper(); diff --git a/src/components/calcite-dropdown/calcite-dropdown.tsx b/src/components/calcite-dropdown/calcite-dropdown.tsx index 093cc4a54ba..36a2091bcbf 100644 --- a/src/components/calcite-dropdown/calcite-dropdown.tsx +++ b/src/components/calcite-dropdown/calcite-dropdown.tsx @@ -24,6 +24,7 @@ import { Instance as Popper, StrictModifiers } from "@popperjs/core"; import { Scale } from "../interfaces"; import { DefaultDropdownPlacement, SLOTS } from "./resources"; import { createObserver } from "../../utils/observers"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s. @@ -34,7 +35,7 @@ import { createObserver } from "../../utils/observers"; styleUrl: "calcite-dropdown.scss", shadow: true }) -export class CalciteDropdown { +export class CalciteDropdown implements InteractiveComponent { //-------------------------------------------------------------------------- // // Element @@ -54,7 +55,12 @@ export class CalciteDropdown { @Watch("active") activeHandler(): void { - this.reposition(); + if (!this.disabled) { + this.reposition(); + return; + } + + this.active = false; } /** @@ -66,6 +72,13 @@ export class CalciteDropdown { /** is the dropdown disabled */ @Prop({ reflect: true }) disabled = false; + @Watch("disabled") + handleDisabledChange(value: boolean): void { + if (!value) { + this.active = false; + } + } + /** specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group @@ -124,6 +137,10 @@ export class CalciteDropdown { this.reposition(); } + componentDidRender(): void { + updateHostInteraction(this); + } + disconnectedCallback(): void { this.mutationObserver?.disconnect(); this.resizeObserver?.disconnect(); @@ -134,7 +151,7 @@ export class CalciteDropdown { const { active } = this; return ( - +
diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.scss b/src/components/calcite-inline-editable/calcite-inline-editable.scss index 2e62d045542..867a7af32e0 100755 --- a/src/components/calcite-inline-editable/calcite-inline-editable.scss +++ b/src/components/calcite-inline-editable/calcite-inline-editable.scss @@ -44,7 +44,8 @@ @apply flex; } -:host([disabled]) { +// TODO: Test +@include disabled() { .cancel-editing-button-wrapper { @apply border-color-2; } diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.tsx b/src/components/calcite-inline-editable/calcite-inline-editable.tsx index 9f834beee41..d5a42f425e6 100644 --- a/src/components/calcite-inline-editable/calcite-inline-editable.tsx +++ b/src/components/calcite-inline-editable/calcite-inline-editable.tsx @@ -15,6 +15,7 @@ import { Scale } from "../interfaces"; import { TEXT, CSS } from "./resources"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { createObserver } from "../../utils/observers"; +import { InteractiveComponent } from "../../utils/interactive"; /** * @slot - A slot for adding a `calcite-input`. @@ -24,7 +25,7 @@ import { createObserver } from "../../utils/observers"; shadow: true, styleUrl: "calcite-inline-editable.scss" }) -export class CalciteInlineEditable implements LabelableComponent { +export class CalciteInlineEditable implements InteractiveComponent, LabelableComponent { //-------------------------------------------------------------------------- // // Element diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.scss b/src/components/calcite-input-date-picker/calcite-input-date-picker.scss index eb3c0e8baab..6affa804679 100644 --- a/src/components/calcite-input-date-picker/calcite-input-date-picker.scss +++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.scss @@ -1,6 +1,5 @@ :host { @extend %component-spacing; - @include popperElemAnim(".menu-container"); @apply shadow-none inline-block align-top @@ -9,6 +8,8 @@ overflow-visible; } +@include disabled(); + .calendar-picker-wrapper { @apply shadow-none static @@ -88,12 +89,13 @@ .menu-container { @include popperContainer(); - @apply invisible - pointer-events-none; + @include popperWrapper(); } -:host([active]) .menu-container { - @apply visible - pointer-events-auto; + +@include popperElemAnim(".menu-container"); + +.menu-container--active { + @include popperElemAnim(".menu-container"); } .input .calcite-input__wrapper { diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx b/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx index af3dfaea8a4..8eaa6f58986 100644 --- a/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx +++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx @@ -35,6 +35,7 @@ import { } from "../../utils/popper"; import { StrictModifiers, Instance as Popper } from "@popperjs/core"; import { DateRangeChange } from "../calcite-date-picker/interfaces"; +import { InteractiveComponent } from "../../utils/interactive"; const DEFAULT_PLACEMENT = "bottom-leading"; @@ -43,7 +44,9 @@ const DEFAULT_PLACEMENT = "bottom-leading"; styleUrl: "calcite-input-date-picker.scss", shadow: true }) -export class CalciteInputDatePicker implements LabelableComponent, FormComponent { +export class CalciteInputDatePicker + implements LabelableComponent, FormComponent, InteractiveComponent +{ //-------------------------------------------------------------------------- // // Element @@ -61,6 +64,13 @@ export class CalciteInputDatePicker implements LabelableComponent, FormComponent */ @Prop({ reflect: true }) disabled = false; + @Watch("disabled") + handleDisabledChange(value: boolean): void { + if (!value) { + this.active = false; + } + } + /** Selected date */ @Prop({ mutable: true }) value: string | string[]; @@ -128,7 +138,12 @@ export class CalciteInputDatePicker implements LabelableComponent, FormComponent @Watch("active") activeHandler(): void { - this.reposition(); + if (!this.disabled) { + this.reposition(); + return; + } + + this.active = false; } /** @@ -360,10 +375,12 @@ export class CalciteInputDatePicker implements LabelableComponent, FormComponent />
} -
.container { @apply pointer-events-none opacity-disabled; } diff --git a/src/components/calcite-label/calcite-label.tsx b/src/components/calcite-label/calcite-label.tsx index 7d1757f525d..5a9bef610fb 100644 --- a/src/components/calcite-label/calcite-label.tsx +++ b/src/components/calcite-label/calcite-label.tsx @@ -43,7 +43,11 @@ export class CalciteLabel { /** eliminates any space around the label */ @Prop() disableSpacing = false; - /** is the label disabled */ + /** + * is the label disabled + * + * @deprecated use the `disabled` property on the interactive components instead + */ @Prop({ reflect: true }) disabled = false; //-------------------------------------------------------------------------- diff --git a/src/components/calcite-link/calcite-link.scss b/src/components/calcite-link/calcite-link.scss index 4bd47294359..5317a2cf8d7 100644 --- a/src/components/calcite-link/calcite-link.scss +++ b/src/components/calcite-link/calcite-link.scss @@ -44,15 +44,6 @@ calcite-icon { margin-top: 0.125rem; } -// disabled styles -:host([disabled]) { - @apply pointer-events-none; - span, - a { - @apply pointer-events-none opacity-disabled; - } -} - // icon positioning and styles :host .calcite-link--icon.icon-start { margin-inline-end: theme("margin.2"); @@ -92,3 +83,5 @@ calcite-icon { } } } + +@include disabled(); diff --git a/src/components/calcite-link/calcite-link.tsx b/src/components/calcite-link/calcite-link.tsx index 707a33a1379..856ddd12e2b 100644 --- a/src/components/calcite-link/calcite-link.tsx +++ b/src/components/calcite-link/calcite-link.tsx @@ -2,6 +2,7 @@ import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from " import { focusElement, getElementDir } from "../../utils/dom"; import { FlipContext } from "../interfaces"; import { CSS_UTILITY } from "../../utils/resources"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** Any attributes placed on component will propagate to the rendered child */ /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */ @@ -13,7 +14,7 @@ import { CSS_UTILITY } from "../../utils/resources"; styleUrl: "calcite-link.scss", shadow: true }) -export class CalciteLink { +export class CalciteLink implements InteractiveComponent { //-------------------------------------------------------------------------- // // Element @@ -70,6 +71,10 @@ export class CalciteLink { this.childElType = this.href ? "a" : "span"; } + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { const { download, el } = this; const dir = getElementDir(el); @@ -94,7 +99,6 @@ export class CalciteLink { const Tag = this.childElType; const role = this.childElType === "span" ? "link" : null; - const tabIndex = this.disabled ? -1 : this.childElType === "span" ? 0 : null; return ( @@ -109,7 +113,6 @@ export class CalciteLink { ref={this.storeTagRef} rel={Tag === "a" && this.rel} role={role} - tabIndex={tabIndex} target={Tag === "a" && this.target} > {this.iconStart ? iconStartEl : null} diff --git a/src/components/calcite-list-item/calcite-list-item.scss b/src/components/calcite-list-item/calcite-list-item.scss index f4571203830..ac678c4d270 100755 --- a/src/components/calcite-list-item/calcite-list-item.scss +++ b/src/components/calcite-list-item/calcite-list-item.scss @@ -2,9 +2,7 @@ @apply flex flex-col; } -:host([disabled]) { - @apply pointer-events-none cursor-default; -} +@include disabled(); .container { @apply bg-foreground-1 diff --git a/src/components/calcite-list-item/calcite-list-item.tsx b/src/components/calcite-list-item/calcite-list-item.tsx index e955a7df8da..82a84dac94a 100755 --- a/src/components/calcite-list-item/calcite-list-item.tsx +++ b/src/components/calcite-list-item/calcite-list-item.tsx @@ -6,6 +6,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements. @@ -19,7 +20,7 @@ import { styleUrl: "calcite-list-item.scss", shadow: true }) -export class CalciteListItem implements ConditionalSlotComponent { +export class CalciteListItem implements ConditionalSlotComponent, InteractiveComponent { // -------------------------------------------------------------------------- // // Properties @@ -56,6 +57,16 @@ export class CalciteListItem implements ConditionalSlotComponent { focusEl: HTMLButtonElement; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Lifecycle diff --git a/src/components/calcite-list/calcite-list.scss b/src/components/calcite-list/calcite-list.scss index 1c85e7a4c0b..e29df6265e8 100755 --- a/src/components/calcite-list/calcite-list.scss +++ b/src/components/calcite-list/calcite-list.scss @@ -2,6 +2,8 @@ @apply block; } +@include disabled(); + .container { @apply bg-transparent box-border diff --git a/src/components/calcite-list/calcite-list.tsx b/src/components/calcite-list/calcite-list.tsx index 047218e3cd0..b1637bd6185 100755 --- a/src/components/calcite-list/calcite-list.tsx +++ b/src/components/calcite-list/calcite-list.tsx @@ -1,6 +1,7 @@ import { Component, Element, h, VNode, Host, Prop, Method } from "@stencil/core"; import { CSS } from "./resources"; import { HeadingLevel } from "../functional/CalciteHeading"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * A general purpose list that enables users to construct list items that conform to Calcite styling. @@ -11,18 +12,33 @@ import { HeadingLevel } from "../functional/CalciteHeading"; styleUrl: "calcite-list.scss", shadow: true }) -export class CalciteList { +export class CalciteList implements InteractiveComponent { // -------------------------------------------------------------------------- // // Properties // // -------------------------------------------------------------------------- + /** + * When true, disabled prevents user interaction. + */ + @Prop({ reflect: true }) disabled = false; + /** * Number at which section headings should start for this component. */ @Prop() headingLevel: HeadingLevel; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Private Properties diff --git a/src/components/calcite-panel/calcite-panel.scss b/src/components/calcite-panel/calcite-panel.scss index fd143670ae3..2d9e0233a43 100644 --- a/src/components/calcite-panel/calcite-panel.scss +++ b/src/components/calcite-panel/calcite-panel.scss @@ -19,6 +19,8 @@ --calcite-panel-max-width: unset; } +@include disabled(); + @import "../../assets/styles/header"; .container { diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx index 7fcab5dc739..cf87f505814 100644 --- a/src/components/calcite-panel/calcite-panel.tsx +++ b/src/components/calcite-panel/calcite-panel.tsx @@ -20,6 +20,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding custom content. @@ -36,7 +37,7 @@ import { styleUrl: "calcite-panel.scss", shadow: true }) -export class CalcitePanel implements ConditionalSlotComponent { +export class CalcitePanel implements ConditionalSlotComponent, InteractiveComponent { // -------------------------------------------------------------------------- // // Properties @@ -123,6 +124,16 @@ export class CalcitePanel implements ConditionalSlotComponent { */ @Prop({ reflect: true }) menuOpen = false; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Private Properties diff --git a/src/components/calcite-pick-list/calcite-pick-list.scss b/src/components/calcite-pick-list/calcite-pick-list.scss index b6bc68355a9..976db2a89ae 100644 --- a/src/components/calcite-pick-list/calcite-pick-list.scss +++ b/src/components/calcite-pick-list/calcite-pick-list.scss @@ -15,6 +15,8 @@ } } +@include disabled(); + :host([filter-enabled]) header { @apply bg-foreground-1 flex diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx index a331c2bd0ce..5139e2f64fc 100644 --- a/src/components/calcite-pick-list/calcite-pick-list.tsx +++ b/src/components/calcite-pick-list/calcite-pick-list.tsx @@ -34,6 +34,7 @@ import { import List from "./shared-list-render"; import { HeadingLevel } from "../functional/CalciteHeading"; import { createObserver } from "../../utils/observers"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list. @@ -46,7 +47,8 @@ import { createObserver } from "../../utils/observers"; }) export class CalcitePickList< ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement -> { +> implements InteractiveComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -128,6 +130,10 @@ export class CalcitePickList< cleanUpObserver.call(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Events diff --git a/src/components/calcite-pick-list/shared-list-render.tsx b/src/components/calcite-pick-list/shared-list-render.tsx index 813f8425685..5b193adc6f6 100644 --- a/src/components/calcite-pick-list/shared-list-render.tsx +++ b/src/components/calcite-pick-list/shared-list-render.tsx @@ -29,7 +29,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes }): VNode => { const defaultSlot = ; return ( - +
{filterEnabled ? ( diff --git a/src/components/calcite-radio-button/calcite-radio-button.scss b/src/components/calcite-radio-button/calcite-radio-button.scss index d9ab5303bae..8afa2b347ed 100644 --- a/src/components/calcite-radio-button/calcite-radio-button.scss +++ b/src/components/calcite-radio-button/calcite-radio-button.scss @@ -16,8 +16,7 @@ } } -:host([disabled]) { - @apply cursor-pointer; +@include disabled() { .radio { @apply cursor-default opacity-disabled; } diff --git a/src/components/calcite-radio-button/calcite-radio-button.tsx b/src/components/calcite-radio-button/calcite-radio-button.tsx index 15b0705c13c..ba25335bb39 100644 --- a/src/components/calcite-radio-button/calcite-radio-button.tsx +++ b/src/components/calcite-radio-button/calcite-radio-button.tsx @@ -23,13 +23,16 @@ import { } from "../../utils/form"; import { CSS } from "./resources"; import { getRoundRobinIndex } from "../../utils/array"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; @Component({ tag: "calcite-radio-button", styleUrl: "calcite-radio-button.scss", shadow: true }) -export class CalciteRadioButton implements LabelableComponent, CheckableFormCompoment { +export class CalciteRadioButton + implements LabelableComponent, CheckableFormCompoment, InteractiveComponent +{ //-------------------------------------------------------------------------- // // Element @@ -388,6 +391,10 @@ export class CalciteRadioButton implements LabelableComponent, CheckableFormComp disconnectForm(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Render Methods diff --git a/src/components/calcite-radio-group/calcite-radio-group.scss b/src/components/calcite-radio-group/calcite-radio-group.scss index 825c1dead76..4b4691bfc8f 100644 --- a/src/components/calcite-radio-group/calcite-radio-group.scss +++ b/src/components/calcite-radio-group/calcite-radio-group.scss @@ -5,6 +5,8 @@ outline-offset: -1px; } +@include disabled(); + :host([layout="vertical"]) { @apply flex-col items-start self-start; } @@ -28,9 +30,4 @@ @apply z-0; } -// disabled styles -:host([disabled]) { - @apply opacity-disabled pointer-events-none; -} - @include hidden-form-input(); diff --git a/src/components/calcite-radio-group/calcite-radio-group.tsx b/src/components/calcite-radio-group/calcite-radio-group.tsx index 139d30fc5f9..1313de929fb 100644 --- a/src/components/calcite-radio-group/calcite-radio-group.tsx +++ b/src/components/calcite-radio-group/calcite-radio-group.tsx @@ -18,6 +18,7 @@ import { Layout, Scale, Width } from "../interfaces"; import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { RadioAppearance } from "./interfaces"; +import { InteractiveComponent } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-radio-group-item`s. @@ -27,7 +28,7 @@ import { RadioAppearance } from "./interfaces"; styleUrl: "calcite-radio-group.scss", shadow: true }) -export class CalciteRadioGroup implements LabelableComponent, FormComponent { +export class CalciteRadioGroup implements LabelableComponent, FormComponent, InteractiveComponent { //-------------------------------------------------------------------------- // // Element diff --git a/src/components/calcite-rating/calcite-rating.scss b/src/components/calcite-rating/calcite-rating.scss index 22271da7f6e..4d82bffb5f6 100644 --- a/src/components/calcite-rating/calcite-rating.scss +++ b/src/components/calcite-rating/calcite-rating.scss @@ -11,6 +11,8 @@ width: fit-content; } +@include disabled(); + :host([scale="s"]) { @apply h-6; --calcite-rating-spacing-unit: theme("spacing.1"); @@ -26,10 +28,6 @@ --calcite-rating-spacing-unit: theme("spacing.3"); } -:host([disabled]) { - @apply pointer-events-none opacity-50; -} - :host([read-only]) { @apply pointer-events-none; } diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx index ab6901909e4..973ba23e423 100644 --- a/src/components/calcite-rating/calcite-rating.tsx +++ b/src/components/calcite-rating/calcite-rating.tsx @@ -16,13 +16,14 @@ import { Scale } from "../interfaces"; import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { TEXT } from "./resources"; +import { InteractiveComponent } from "../../utils/interactive"; @Component({ tag: "calcite-rating", styleUrl: "calcite-rating.scss", shadow: true }) -export class CalciteRating implements LabelableComponent, FormComponent { +export class CalciteRating implements LabelableComponent, FormComponent, InteractiveComponent { //-------------------------------------------------------------------------- // // Element @@ -174,12 +175,15 @@ export class CalciteRating implements LabelableComponent, FormComponent { } render() { - const { intlRating, showChip, scale, count, average } = this; + const { disabled, intlRating, showChip, scale, count, average } = this; + + // TODO: test if we need to handle chip return (
(this.hoverValue = null)} onMouseLeave={() => (this.hoverValue = null)} onTouchEnd={() => (this.hoverValue = null)} diff --git a/src/components/calcite-select/calcite-select.scss b/src/components/calcite-select/calcite-select.scss index 52b5f14a96a..51efbfc79bd 100644 --- a/src/components/calcite-select/calcite-select.scss +++ b/src/components/calcite-select/calcite-select.scss @@ -16,6 +16,8 @@ width: var(--select-width); } +@include disabled(); + :host([scale="s"]) { @apply h-6; --calcite-select-font-size: theme("fontSize.n2h"); @@ -88,10 +90,6 @@ select:disabled { @apply border-color-input bg-opacity-100; } -:host([disabled]) { - @apply pointer-events-none select-none opacity-disabled; -} - .icon-container { @apply items-center bg-transparent diff --git a/src/components/calcite-select/calcite-select.tsx b/src/components/calcite-select/calcite-select.tsx index 6d6820e4c71..e4099a6b76f 100644 --- a/src/components/calcite-select/calcite-select.tsx +++ b/src/components/calcite-select/calcite-select.tsx @@ -23,6 +23,7 @@ import { } from "../../utils/form"; import { CSS } from "./resources"; import { createObserver } from "../../utils/observers"; +import { InteractiveComponent } from "../../utils/interactive"; type CalciteOptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement; type NativeOptionOrGroup = HTMLOptionElement | HTMLOptGroupElement; @@ -45,7 +46,7 @@ function isOptionGroup( styleUrl: "calcite-select.scss", shadow: true }) -export class CalciteSelect implements LabelableComponent, FormComponent { +export class CalciteSelect implements LabelableComponent, FormComponent, InteractiveComponent { //-------------------------------------------------------------------------- // // Properties diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss index af075d82014..4a21477e538 100644 --- a/src/components/calcite-slider/calcite-slider.scss +++ b/src/components/calcite-slider/calcite-slider.scss @@ -47,8 +47,7 @@ ); } -:host([disabled]) { - @apply opacity-disabled pointer-events-none; +@include disabled() { .track__range, .tick--active { background-color: var(--calcite-ui-text-3); diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx index f7349ce5f83..805aff581a8 100644 --- a/src/components/calcite-slider/calcite-slider.tsx +++ b/src/components/calcite-slider/calcite-slider.tsx @@ -26,6 +26,7 @@ import { FormComponent, HiddenFormInputSlot } from "../../utils/form"; +import { InteractiveComponent } from "../../utils/interactive"; type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue"; @@ -34,7 +35,7 @@ type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue"; styleUrl: "calcite-slider.scss", shadow: true }) -export class CalciteSlider implements LabelableComponent, FormComponent { +export class CalciteSlider implements LabelableComponent, FormComponent, InteractiveComponent { //-------------------------------------------------------------------------- // // Element diff --git a/src/components/calcite-sortable-list/calcite-sortable-list.scss b/src/components/calcite-sortable-list/calcite-sortable-list.scss index 26031b4ded5..eb852e1694d 100644 --- a/src/components/calcite-sortable-list/calcite-sortable-list.scss +++ b/src/components/calcite-sortable-list/calcite-sortable-list.scss @@ -2,6 +2,8 @@ @apply flex; } +@include disabled(); + .container { @apply flex flex-auto; } diff --git a/src/components/calcite-sortable-list/calcite-sortable-list.tsx b/src/components/calcite-sortable-list/calcite-sortable-list.tsx index 61eeee8232b..e5f072e336c 100644 --- a/src/components/calcite-sortable-list/calcite-sortable-list.tsx +++ b/src/components/calcite-sortable-list/calcite-sortable-list.tsx @@ -13,6 +13,7 @@ import { import { createObserver } from "../../utils/observers"; import { Layout } from "../interfaces"; import { CSS } from "./resources"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding sortable items. @@ -22,7 +23,7 @@ import { CSS } from "./resources"; styleUrl: "calcite-sortable-list.scss", shadow: true }) -export class CalciteSortableList { +export class CalciteSortableList implements InteractiveComponent { // -------------------------------------------------------------------------- // // Properties @@ -98,6 +99,10 @@ export class CalciteSortableList { this.cleanUpDragAndDrop(); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Events diff --git a/src/components/calcite-split-button/calcite-split-button.scss b/src/components/calcite-split-button/calcite-split-button.scss index f1dd393c912..c4508ae2312 100644 --- a/src/components/calcite-split-button/calcite-split-button.scss +++ b/src/components/calcite-split-button/calcite-split-button.scss @@ -123,7 +123,7 @@ } } -:host([disabled]) { +@include disabled() { .split-button__divider-container { @apply opacity-disabled; } diff --git a/src/components/calcite-split-button/calcite-split-button.tsx b/src/components/calcite-split-button/calcite-split-button.tsx index 5a2b5be31ec..e26e129076a 100644 --- a/src/components/calcite-split-button/calcite-split-button.tsx +++ b/src/components/calcite-split-button/calcite-split-button.tsx @@ -1,8 +1,9 @@ -import { Component, Element, Event, EventEmitter, h, Prop, VNode } from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core"; import { CSS } from "./resources"; import { ButtonAppearance, ButtonColor, DropdownIconType } from "../calcite-button/interfaces"; import { FlipContext, Scale, Width } from "../interfaces"; import { OverlayPositioning } from "../../utils/popper"; +import { InteractiveComponent } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-dropdown` content. @@ -12,7 +13,7 @@ import { OverlayPositioning } from "../../utils/popper"; styleUrl: "calcite-split-button.scss", shadow: true }) -export class CalciteSplitButton { +export class CalciteSplitButton implements InteractiveComponent { @Element() el: HTMLCalciteSplitButtonElement; /** specify the appearance style of the button, defaults to solid. */ @@ -24,11 +25,25 @@ export class CalciteSplitButton { /** is the control disabled */ @Prop({ reflect: true }) disabled = false; + @Watch("disabled") + handleDisabledChange(value: boolean): void { + if (!value) { + this.active = false; + } + } + /** * Is the dropdown currently active or not * @internal */ - @Prop({ reflect: true }) active = false; + @Prop({ mutable: true, reflect: true }) active = false; + + @Watch("active") + activeHandler(): void { + if (this.disabled) { + this.active = false; + } + } /** specify the icon used for the dropdown menu, defaults to chevron */ @Prop({ reflect: true }) dropdownIconType: DropdownIconType = "chevron"; @@ -102,6 +117,7 @@ export class CalciteSplitButton {
allow overrides +@include disabled() { + & * { + @apply cursor-not-allowed pointer-events-auto; + } } :host([complete]) .container { diff --git a/src/components/calcite-stepper-item/calcite-stepper-item.tsx b/src/components/calcite-stepper-item/calcite-stepper-item.tsx index 040ebfdc17d..87b0e887941 100644 --- a/src/components/calcite-stepper-item/calcite-stepper-item.tsx +++ b/src/components/calcite-stepper-item/calcite-stepper-item.tsx @@ -12,6 +12,7 @@ import { } from "@stencil/core"; import { getElementProp } from "../../utils/dom"; import { Scale } from "../interfaces"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding custom content. @@ -21,7 +22,7 @@ import { Scale } from "../interfaces"; styleUrl: "calcite-stepper-item.scss", shadow: true }) -export class CalciteStepperItem { +export class CalciteStepperItem implements InteractiveComponent { //-------------------------------------------------------------------------- // // Element @@ -45,7 +46,7 @@ export class CalciteStepperItem { @Prop() error = false; /** is the step disabled and not navigable to by a user */ - @Prop() disabled = false; + @Prop({ reflect: true }) disabled = false; /** pass a title for the stepper item */ @Prop() itemTitle?: string; @@ -126,13 +127,13 @@ export class CalciteStepperItem { } } + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { return ( - this.emitRequestedItem()} - tabindex={this.disabled ? null : 0} - > + this.emitRequestedItem()}>
{this.icon ? this.renderIcon() : null} diff --git a/src/components/calcite-switch/calcite-switch.scss b/src/components/calcite-switch/calcite-switch.scss index eed76e10a5c..a9618c95a4e 100644 --- a/src/components/calcite-switch/calcite-switch.scss +++ b/src/components/calcite-switch/calcite-switch.scss @@ -45,9 +45,8 @@ tap-highlight-color: transparent; } -:host([disabled]) { - @apply opacity-disabled pointer-events-none cursor-default; -} +@include disabled(); + // focus styles :host { @apply focus-base w-auto; diff --git a/src/components/calcite-switch/calcite-switch.tsx b/src/components/calcite-switch/calcite-switch.tsx index 02eb6f0172c..86dcb783ec6 100644 --- a/src/components/calcite-switch/calcite-switch.tsx +++ b/src/components/calcite-switch/calcite-switch.tsx @@ -20,13 +20,16 @@ import { CheckableFormCompoment, HiddenFormInputSlot } from "../../utils/form"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; @Component({ tag: "calcite-switch", styleUrl: "calcite-switch.scss", shadow: true }) -export class CalciteSwitch implements LabelableComponent, CheckableFormCompoment { +export class CalciteSwitch + implements LabelableComponent, CheckableFormCompoment, InteractiveComponent +{ //-------------------------------------------------------------------------- // // Element @@ -181,8 +184,8 @@ export class CalciteSwitch implements LabelableComponent, CheckableFormCompoment disconnectForm(this); } - componentWillLoad(): void { - this.tabindex = this.el.getAttribute("tabindex") || this.disabled ? -1 : 0; + componentDidRender(): void { + updateHostInteraction(this); } // -------------------------------------------------------------------------- @@ -201,7 +204,6 @@ export class CalciteSwitch implements LabelableComponent, CheckableFormCompoment onClick={this.clickHandler} ref={this.setSwitchEl} role="switch" - tabindex={this.tabindex} >
diff --git a/src/components/calcite-tab-title/calcite-tab-title.scss b/src/components/calcite-tab-title/calcite-tab-title.scss index d4c554444e9..2fb761bd81d 100644 --- a/src/components/calcite-tab-title/calcite-tab-title.scss +++ b/src/components/calcite-tab-title/calcite-tab-title.scss @@ -36,8 +36,7 @@ @apply text-color-1 border-color-transparent; } -:host([disabled]) { - @apply pointer-events-none; +@include disabled() { span, a { @apply pointer-events-none opacity-50; diff --git a/src/components/calcite-tab-title/calcite-tab-title.tsx b/src/components/calcite-tab-title/calcite-tab-title.tsx index 40bd94b623c..1ab96e3d694 100644 --- a/src/components/calcite-tab-title/calcite-tab-title.tsx +++ b/src/components/calcite-tab-title/calcite-tab-title.tsx @@ -19,6 +19,7 @@ import { getElementProp, getElementDir } from "../../utils/dom"; import { TabID, TabLayout, TabPosition } from "../calcite-tabs/interfaces"; import { FlipContext, Scale } from "../interfaces"; import { createObserver } from "../../utils/observers"; +import { InteractiveComponent } from "../../utils/interactive"; /** * @slot - A slot for adding text. @@ -28,7 +29,7 @@ import { createObserver } from "../../utils/observers"; styleUrl: "calcite-tab-title.scss", shadow: true }) -export class CalciteTabTitle { +export class CalciteTabTitle implements InteractiveComponent { //-------------------------------------------------------------------------- // // Events @@ -151,6 +152,7 @@ export class CalciteTabTitle { /> ); + // TODO: check tabindex usage here return ( { +> implements InteractiveComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -137,6 +139,10 @@ export class CalciteValueList< this.setUpDragAndDrop(); } + componentDidRender(): void { + updateHostInteraction(this); + } + disconnectedCallback(): void { cleanUpObserver.call(this); this.cleanUpDragAndDrop(); diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 778dcd1e2d2..12c7222a8d9 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -517,3 +517,25 @@ export async function formAssociated(componentTagOrHtml: TagOrHTML, options: For } } } + +/** + * Helper to test the disabled prop disabling user interaction. + * + * @param componentTagOrHTML - the component tag or HTML markup to test against + */ +export async function disabled(componentTagOrHtml: TagOrHTML): Promise { + const page = await simplePageSetup(componentTagOrHtml); + const tag = getTag(componentTagOrHtml); + + const component = await page.find(tag); + component.setProperty("disabled", true); + await page.waitForChanges(); + + await page.keyboard.press("Tab"); + + expect(await page.evaluate(() => document.activeElement.matches("BODY"))).toBe(true); + + await component.click(); + + expect(await page.evaluate(() => document.activeElement.matches("BODY"))).toBe(true); +} diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts new file mode 100644 index 00000000000..d6fdb8b1b89 --- /dev/null +++ b/src/utils/interactive.ts @@ -0,0 +1,37 @@ +export interface InteractiveComponent { + /** + * The host element. + */ + readonly el: HTMLElement; + + /** + * When true, prevents user interaction. + * + * Notes: + * + * * This prop should use the @Prop decorator and reflect. + * * The `disabled` Sass mixin must be added to the component's stylesheet. + */ + disabled: boolean; +} + +/** + * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility. + * + * This should be used in the `componentDidRender` lifecycle hook. + * + * **Notes** + * + * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead. + * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error + */ +export function updateHostInteraction(component: InteractiveComponent): void { + // intentionally using attribute to avoid making host tabbable when !disabled + if (component.disabled) { + component.el.setAttribute("tabindex", "-1"); + } else { + component.el.removeAttribute("tabindex"); + } + + component.el.setAttribute("aria-disabled", component.disabled.toString()); +} From fc0ae27bf060e82c244a4e86de33cf3463f43fc0 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 25 Jan 2022 17:50:20 -0800 Subject: [PATCH 02/56] drop obsolete tile-select styles --- .../calcite-tile-select.scss | 105 ------------------ 1 file changed, 105 deletions(-) diff --git a/src/components/calcite-tile-select/calcite-tile-select.scss b/src/components/calcite-tile-select/calcite-tile-select.scss index b96859af1f7..9eb04c55de1 100644 --- a/src/components/calcite-tile-select/calcite-tile-select.scss +++ b/src/components/calcite-tile-select/calcite-tile-select.scss @@ -128,108 +128,3 @@ $spacing: $baseline * 0.5; } } } - -:host([checked]) { - .root { - @apply z-30; - box-shadow: 0 0 0 1px var(--calcite-ui-brand); - } -} - -.root.focused { - @apply z-30; -} - -:host(:not([input-enabled]):hover) { - .root { - box-shadow: 0 0 0 1px var(--calcite-ui-brand); - } -} - -:host(:not([input-enabled])) { - .root.focused { - box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), - inset 0 0 0 5px var(--calcite-ui-brand); - } -} - -:host([width="full"]) { - .root { - @apply max-w-none flex; - } - calcite-tile { - @apply flex-auto; - } -} - -:host([input-alignment="start"][width="full"]) { - calcite-tile { - @apply order-1; - margin-inline-start: theme("spacing.3"); - } -} - -:host(:not([input-enabled])) { - ::slotted(calcite-checkbox), - ::slotted(calcite-radio-button) { - @apply sr-only; - } -} - -:host([heading]:not([icon]):not([description])) { - .root { - align-items: center; - } -} - -:host([width="auto"][input-enabled][input-alignment="start"][icon][heading][description]), -:host([width="auto"][input-enabled][input-alignment="start"]:not([icon])[heading]:not([description])) { - .root { - display: inline-grid; - grid-gap: $spacing; - grid-template-columns: max-content 1fr; - } - ::slotted(calcite-checkbox), - ::slotted(calcite-radio-button) { - order: 0; - } - calcite-tile { - order: 1; - } -} - -:host([input-enabled][input-alignment="start"][icon][heading]:not([description])) { - ::slotted(calcite-checkbox), - ::slotted(calcite-radio-button) { - position: absolute; - top: $spacing; - inset-inline-start: $spacing; - } -} - -:host([input-enabled][input-alignment="end"][icon][heading]) { - ::slotted(calcite-checkbox), - ::slotted(calcite-radio-button) { - position: absolute; - top: $spacing; - inset-inline-end: $spacing; - } -} - -:host([input-enabled][input-alignment="end"][heading]:not([icon]):not([description])) { - .root { - display: inline-grid; - grid-gap: $spacing; - grid-template-columns: max-content 1fr; - } - ::slotted(calcite-checkbox), - ::slotted(calcite-radio-button) { - justify-self: flex-end; - } -} - -:host([hidden]) { - display: none; -} - -@include disabled(); From e4b40e2a70b6ea14e65117f7fdf46d881311ae68 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 08:33:29 -0800 Subject: [PATCH 03/56] remove stepper item overrides --- .../calcite-stepper-item/calcite-stepper-item.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/calcite-stepper-item/calcite-stepper-item.scss b/src/components/calcite-stepper-item/calcite-stepper-item.scss index 0c6e5a60c3d..28c85c8fbd0 100644 --- a/src/components/calcite-stepper-item/calcite-stepper-item.scss +++ b/src/components/calcite-stepper-item/calcite-stepper-item.scss @@ -131,12 +131,7 @@ margin-inline-end: var(--calcite-stepper-item-spacing-unit-m); } -// TODO: check below -> allow overrides -@include disabled() { - & * { - @apply cursor-not-allowed pointer-events-auto; - } -} +@include disabled(); :host([complete]) .container { // todo dark theme From 65840ccfc4d485607a59a0eabe92c6ff41b2580e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 09:43:12 -0800 Subject: [PATCH 04/56] prevent opacity stacking on slotted components --- src/assets/styles/includes.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/styles/includes.scss b/src/assets/styles/includes.scss index 402c1909f64..b2ad76a94f4 100644 --- a/src/assets/styles/includes.scss +++ b/src/assets/styles/includes.scss @@ -47,6 +47,7 @@ @apply cursor-default opacity-disabled pointer-events-none select-none; @content; + ::slotted([calcite-hydrated][disabled]), [calcite-hydrated][disabled] { /* prevent opacity stacking */ @apply opacity-100; From 739c4b52acd006030c3c690e646e430ce1fe7e0b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 10:36:36 -0800 Subject: [PATCH 05/56] enhance updateHostInteraction to restore tab index to 0 if host is tabbable --- .../calcite-tab-title/calcite-tab-title.tsx | 20 ++++++++----------- src/utils/interactive.ts | 13 +++++++----- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/components/calcite-tab-title/calcite-tab-title.tsx b/src/components/calcite-tab-title/calcite-tab-title.tsx index 1ab96e3d694..a0da5d3a9bd 100644 --- a/src/components/calcite-tab-title/calcite-tab-title.tsx +++ b/src/components/calcite-tab-title/calcite-tab-title.tsx @@ -19,7 +19,7 @@ import { getElementProp, getElementDir } from "../../utils/dom"; import { TabID, TabLayout, TabPosition } from "../calcite-tabs/interfaces"; import { FlipContext, Scale } from "../interfaces"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding text. @@ -131,7 +131,6 @@ export class CalciteTabTitle implements InteractiveComponent { render(): VNode { const id = this.el.id || this.guid; - const Tag = this.disabled ? "span" : "a"; const showSideBorders = this.bordered && !this.disabled && this.layout !== "center"; const iconStartEl = ( @@ -152,16 +151,9 @@ export class CalciteTabTitle implements InteractiveComponent { /> ); - // TODO: check tabindex usage here return ( - - + {this.iconEnd ? iconEndEl : null} - + ); } @@ -180,6 +172,10 @@ export class CalciteTabTitle implements InteractiveComponent { this.calciteTabTitleRegister.emit(await this.getTabIdentifier()); } + componentDidRender(): void { + updateHostInteraction(this, true); + } + //-------------------------------------------------------------------------- // // Event Listeners diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts index d6fdb8b1b89..aa2b8cf5fb8 100644 --- a/src/utils/interactive.ts +++ b/src/utils/interactive.ts @@ -25,12 +25,15 @@ export interface InteractiveComponent { * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead. * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error */ -export function updateHostInteraction(component: InteractiveComponent): void { - // intentionally using attribute to avoid making host tabbable when !disabled - if (component.disabled) { - component.el.setAttribute("tabindex", "-1"); +export function updateHostInteraction(component: InteractiveComponent, hostIsTabbable = false): void { + if (hostIsTabbable) { + component.el.setAttribute("tabindex", component.disabled ? "-1" : "0"); } else { - component.el.removeAttribute("tabindex"); + if (component.disabled) { + component.el.setAttribute("tabindex", "-1"); + } else { + component.el.removeAttribute("tabindex"); + } } component.el.setAttribute("aria-disabled", component.disabled.toString()); From f709413e3167f519e0d8e98bdb6ab997d60eaa44 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 10:38:00 -0800 Subject: [PATCH 06/56] remove test reminders --- .../calcite-inline-editable/calcite-inline-editable.scss | 1 - src/components/calcite-label/calcite-label.scss | 1 - src/components/calcite-rating/calcite-rating.tsx | 2 -- 3 files changed, 4 deletions(-) diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.scss b/src/components/calcite-inline-editable/calcite-inline-editable.scss index 867a7af32e0..d9c28e65dfd 100755 --- a/src/components/calcite-inline-editable/calcite-inline-editable.scss +++ b/src/components/calcite-inline-editable/calcite-inline-editable.scss @@ -44,7 +44,6 @@ @apply flex; } -// TODO: Test @include disabled() { .cancel-editing-button-wrapper { @apply border-color-2; diff --git a/src/components/calcite-label/calcite-label.scss b/src/components/calcite-label/calcite-label.scss index 11e91d798ce..79776e67e60 100644 --- a/src/components/calcite-label/calcite-label.scss +++ b/src/components/calcite-label/calcite-label.scss @@ -63,7 +63,6 @@ } } -// TODO: check @include disabled() { & > .container { @apply pointer-events-none opacity-disabled; diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx index 973ba23e423..130a34b7066 100644 --- a/src/components/calcite-rating/calcite-rating.tsx +++ b/src/components/calcite-rating/calcite-rating.tsx @@ -177,8 +177,6 @@ export class CalciteRating implements LabelableComponent, FormComponent, Interac render() { const { disabled, intlRating, showChip, scale, count, average } = this; - // TODO: test if we need to handle chip - return (
Date: Fri, 28 Jan 2022 10:39:05 -0800 Subject: [PATCH 07/56] remove redundant styles --- src/components/calcite-input/calcite-input.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/calcite-input/calcite-input.scss b/src/components/calcite-input/calcite-input.scss index 002dbbfd9e9..56bac4dae7c 100755 --- a/src/components/calcite-input/calcite-input.scss +++ b/src/components/calcite-input/calcite-input.scss @@ -92,15 +92,6 @@ } @include disabled() { - // TODO: test - & .wrapper { - @apply pointer-events-none text-opacity-disabled; - } - & button, - & textarea, - & input { - @apply pointer-events-none; - } & textarea { resize: none; } From f5f84c979ff81f7543cffdb8a1163aa121615d5f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 10:39:36 -0800 Subject: [PATCH 08/56] ensure tile-select and tile-select-group can be disabled --- .../calcite-tile-select-group.scss | 2 ++ .../calcite-tile-select-group.tsx | 27 +++++++++++++++++-- .../calcite-tile-select.scss | 2 ++ .../calcite-tile-select.tsx | 8 +++--- 4 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/components/calcite-tile-select-group/calcite-tile-select-group.scss b/src/components/calcite-tile-select-group/calcite-tile-select-group.scss index f6f79f485de..d5fa2093f61 100644 --- a/src/components/calcite-tile-select-group/calcite-tile-select-group.scss +++ b/src/components/calcite-tile-select-group/calcite-tile-select-group.scss @@ -8,3 +8,5 @@ :host([layout="vertical"]) { @apply flex-col; } + +@include disabled(); diff --git a/src/components/calcite-tile-select-group/calcite-tile-select-group.tsx b/src/components/calcite-tile-select-group/calcite-tile-select-group.tsx index 6a0e9e7bdae..3ea2cb6c04a 100644 --- a/src/components/calcite-tile-select-group/calcite-tile-select-group.tsx +++ b/src/components/calcite-tile-select-group/calcite-tile-select-group.tsx @@ -1,5 +1,6 @@ -import { Component, h, VNode, Prop } from "@stencil/core"; +import { Component, h, VNode, Prop, Element } from "@stencil/core"; import { TileSelectGroupLayout } from "./interfaces"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-tile-select`s. @@ -9,15 +10,37 @@ import { TileSelectGroupLayout } from "./interfaces"; styleUrl: "calcite-tile-select-group.scss", shadow: true }) -export class CalciteTileSelectGroup { +export class CalciteTileSelectGroup implements InteractiveComponent { + //-------------------------------------------------------------------------- + // + // Element + // + //-------------------------------------------------------------------------- + + @Element() el: HTMLCalciteTileSelectGroupElement; + //-------------------------------------------------------------------------- // // Properties // //-------------------------------------------------------------------------- + + /** The disabled state of the tile select. */ + @Prop({ reflect: true }) disabled = false; + /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ @Prop({ reflect: true }) layout?: TileSelectGroupLayout = "horizontal"; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { return ; } diff --git a/src/components/calcite-tile-select/calcite-tile-select.scss b/src/components/calcite-tile-select/calcite-tile-select.scss index 9eb04c55de1..42871b1ec8c 100644 --- a/src/components/calcite-tile-select/calcite-tile-select.scss +++ b/src/components/calcite-tile-select/calcite-tile-select.scss @@ -128,3 +128,5 @@ $spacing: $baseline * 0.5; } } } + +@include disabled(); diff --git a/src/components/calcite-tile-select/calcite-tile-select.tsx b/src/components/calcite-tile-select/calcite-tile-select.tsx index 2bdd6ff294a..c9392c8d18c 100644 --- a/src/components/calcite-tile-select/calcite-tile-select.tsx +++ b/src/components/calcite-tile-select/calcite-tile-select.tsx @@ -15,7 +15,7 @@ import { Alignment, Width } from "../interfaces"; import { TileSelectType } from "./interfaces"; import { guid } from "../../utils/guid"; import { CSS } from "./resources"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding custom content. @@ -226,14 +226,16 @@ export class CalciteTileSelect implements InteractiveComponent { this.input.parentNode.removeChild(this.input); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Render Methods // // -------------------------------------------------------------------------- - // TODO: double check disabled usage here - private renderInput(): void { this.input = document.createElement( this.type === "radio" ? "calcite-radio-button" : "calcite-checkbox" From 7295794a7daad520951f07c8f0a6c68d9ce80939 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 18:48:58 -0800 Subject: [PATCH 09/56] add interactive spec test --- src/utils/interactive.spec.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/utils/interactive.spec.ts diff --git a/src/utils/interactive.spec.ts b/src/utils/interactive.spec.ts new file mode 100644 index 00000000000..777db331e67 --- /dev/null +++ b/src/utils/interactive.spec.ts @@ -0,0 +1,28 @@ +import { updateHostInteraction } from "./interactive"; + +describe("interactive", () => { + it("updateHostInteraction", () => { + document.body.innerHTML = ` + + `; + + const fakeInteractiveEl = document.querySelector("fake-interactive"); + + const fakeInteractive = { + el: fakeInteractiveEl, + disabled: false + }; + + updateHostInteraction(fakeInteractive); + + expect(fakeInteractiveEl.getAttribute("tabindex")).toBeNull(); + expect(fakeInteractiveEl.getAttribute("aria-disabled")).toBe("false"); + + fakeInteractive.disabled = true; + + updateHostInteraction(fakeInteractive); + + expect(fakeInteractiveEl.getAttribute("tabindex")).toBe("-1"); + expect(fakeInteractiveEl.getAttribute("aria-disabled")).toBe("true"); + }); +}); From 4d9c73e32d9abf6eb03cd03204359ad94b0bcbbf Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 18:49:35 -0800 Subject: [PATCH 10/56] beef up disabled test helper --- src/tests/commonTests.ts | 40 +++++++++++++++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 12c7222a8d9..61d7fed92c1 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -526,16 +526,46 @@ export async function formAssociated(componentTagOrHtml: TagOrHTML, options: For export async function disabled(componentTagOrHtml: TagOrHTML): Promise { const page = await simplePageSetup(componentTagOrHtml); const tag = getTag(componentTagOrHtml); - const component = await page.find(tag); + const enabledComponentClickSpy = await component.spyOnEvent("click"); + + async function expectToBeFocused(tag: string): Promise { + expect(await page.evaluate((tag: string) => document.activeElement.matches(tag), tag)).toBe(true); + } + + expect(component.getAttribute("aria-disabled")).toBe("false"); + + await page.keyboard.press("Tab"); + await expectToBeFocused(tag); + + const [shadowFocusableX, shadowFocusableY] = await page.$eval(tag, (element: HTMLElement) => { + const rect = element.shadowRoot.activeElement.getBoundingClientRect(); + return [rect.x, rect.y]; + }); + + await page.keyboard.press("Tab"); + await expectToBeFocused("body"); + + await page.mouse.click(shadowFocusableX, shadowFocusableY); + await expectToBeFocused(tag); + + expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); + component.setProperty("disabled", true); await page.waitForChanges(); + const disabledComponentClickSpy = await component.spyOnEvent("click"); - await page.keyboard.press("Tab"); + expect(component.getAttribute("aria-disabled")).toBe("true"); - expect(await page.evaluate(() => document.activeElement.matches("BODY"))).toBe(true); + await page.$eval("body", (body: HTMLBodyElement) => + // use click() to avoid having Puppeteer click on the test component + body.click() + ); + await page.keyboard.press("Tab"); + await expectToBeFocused("body"); - await component.click(); + await page.mouse.click(shadowFocusableX, shadowFocusableY); + await expectToBeFocused("body"); - expect(await page.evaluate(() => document.activeElement.matches("BODY"))).toBe(true); + expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); } From 11ca931621d2c4ce94f7e77f788cc1035fb1af4e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 19:23:42 -0800 Subject: [PATCH 11/56] wire up tests --- .../calcite-action/calcite-action.e2e.ts | 26 ++---------- .../calcite-block/calcite-block.e2e.ts | 40 ++----------------- .../calcite-button/calcite-button.e2e.ts | 4 +- .../calcite-checkbox/calcite-checkbox.e2e.ts | 19 ++------- .../calcite-color-picker.e2e.ts | 4 +- .../calcite-combobox-item.e2e.ts | 4 +- .../calcite-combobox/calcite-combobox.e2e.ts | 4 +- .../calcite-date-picker-day.e2e.ts | 5 +++ .../calcite-dropdown/calcite-dropdown.e2e.ts | 27 ++----------- src/components/calcite-fab/calcite-fab.e2e.ts | 12 ++---- .../calcite-filter/calcite-filter.e2e.ts | 4 +- .../calcite-inline-editable.e2e.ts | 33 ++++----------- .../calcite-input-date-picker.e2e.ts | 4 +- .../calcite-input-time-picker.e2e.ts | 13 +++++- .../calcite-input/calcite-input.e2e.ts | 27 ++----------- .../calcite-link/calcite-link.e2e.ts | 4 +- .../calcite-list-item.e2e.ts | 4 +- .../calcite-list/calcite-list.e2e.ts | 4 +- .../calcite-panel/calcite-panel.e2e.ts | 4 +- .../calcite-pick-list.e2e.ts | 13 ++++-- .../calcite-pick-list/shared-list-tests.ts | 25 +++--------- .../calcite-radio-button.e2e.ts | 3 ++ .../calcite-radio-group.e2e.ts | 4 +- .../calcite-rating/calcite-rating.e2e.ts | 14 ++----- .../calcite-select/calcite-select.e2e.ts | 4 +- .../calcite-slider/calcite-slider.e2e.ts | 9 +---- .../calcite-sortable-list.e2e.ts | 4 +- .../calcite-split-button.e2e.ts | 4 +- .../calcite-stepper-item.e2e.ts | 3 +- .../calcite-switch/calcite-switch.e2e.ts | 16 ++------ .../calcite-tab-title.e2e.ts | 4 +- .../calcite-tabs/calcite-tabs.e2e.ts | 24 ----------- .../calcite-tile-select-group.e2e.ts | 4 +- .../calcite-tile-select.e2e.ts | 4 +- .../calcite-tile/calcite-tile.e2e.ts | 20 ++-------- .../calcite-value-list.e2e.ts | 13 ++++-- 36 files changed, 135 insertions(+), 275 deletions(-) create mode 100644 src/components/calcite-date-picker-day/calcite-date-picker-day.e2e.ts diff --git a/src/components/calcite-action/calcite-action.e2e.ts b/src/components/calcite-action/calcite-action.e2e.ts index ea079d7f110..7adb28be1ab 100755 --- a/src/components/calcite-action/calcite-action.e2e.ts +++ b/src/components/calcite-action/calcite-action.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, hidden, renders } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-action", () => { @@ -7,6 +7,8 @@ describe("calcite-action", () => { it("honors hidden attribute", async () => hidden("calcite-action")); + it("can be disabled", () => disabled("calcite-action")); + it("should have visible text when text is enabled", async () => { const page = await newE2EPage(); await page.setContent(``); @@ -99,14 +101,6 @@ describe("calcite-action", () => { expect(button.getAttribute("aria-label")).toBe("hi"); }); - it("should be disabled", async () => { - const page = await newE2EPage(); - await page.setContent(``); - - const button = await page.find(`calcite-action >>> .${CSS.button}`); - expect(button).toHaveAttribute("disabled"); - }); - it("should have appearance=solid", async () => { const page = await newE2EPage(); await page.setContent(``); @@ -119,18 +113,4 @@ describe("calcite-action", () => { await accessible(``); await accessible(``); }); - - it("should not emit click event when disabled", async () => { - const page = await newE2EPage(); - - await page.setContent(``); - - const action = await page.find("calcite-action"); - - const clickSpy = await action.spyOnEvent("click"); - - await action.click(); - - expect(clickSpy).toHaveReceivedEventTimes(0); - }); }); diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts index 921801be993..e6135f83f3b 100644 --- a/src/components/calcite-block/calcite-block.e2e.ts +++ b/src/components/calcite-block/calcite-block.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; import { CSS, SLOTS, TEXT } from "./resources"; -import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests"; import { html } from "../../tests/utils"; describe("calcite-block", () => { @@ -43,42 +43,8 @@ describe("calcite-block", () => { `)); - it("can be disabled", async () => { - const page = await newE2EPage({ - html: ` - -
content
- - ` - }); - - const content = await page.find(".content"); - const clickSpy = await content.spyOnEvent("click"); - await content.click(); - expect(clickSpy).toHaveReceivedEventTimes(1); - - const block = await page.find("calcite-block"); - block.setProperty("disabled", true); - await page.waitForChanges(); - - // `tabindex=-1` on host removes children from the tab order - expect(block.getAttribute("tabindex")).toBe("-1"); - - await content.click(); - expect(clickSpy).toHaveReceivedEventTimes(1); - - const header = await page.find(`calcite-block >>> .${CSS.headerContainer}`); - const toggleSpy = await block.spyOnEvent("calciteBlockToggle"); - - await header.click(); - await header.click(); - expect(toggleSpy).toHaveReceivedEventTimes(0); - - block.setAttribute("disabled", false); - await page.waitForChanges(); - - expect(block.getAttribute("tabindex")).toBeNull(); - }); + it("can be disabled", () => + disabled(html``)); it("has a loading state", async () => { const page = await newE2EPage({ diff --git a/src/components/calcite-button/calcite-button.e2e.ts b/src/components/calcite-button/calcite-button.e2e.ts index 5cbe913ca93..63a3c684f79 100644 --- a/src/components/calcite-button/calcite-button.e2e.ts +++ b/src/components/calcite-button/calcite-button.e2e.ts @@ -1,5 +1,5 @@ import { E2EElement, newE2EPage } from "@stencil/core/testing"; -import { accessible, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; +import { accessible, disabled, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; import { CSS } from "./resources"; import { html, GlobalTestProps } from "../../tests/utils"; @@ -44,6 +44,8 @@ describe("calcite-button", () => { it("is labelable", async () => labelable("calcite-button")); + it("can be disabled", () => disabled("calcite-button")); + it("should update childElType when href changes", async () => { const page = await newE2EPage({ html: `Continue` }); const link = await page.find("calcite-button"); diff --git a/src/components/calcite-checkbox/calcite-checkbox.e2e.ts b/src/components/calcite-checkbox/calcite-checkbox.e2e.ts index 3e9e280f07d..14bf4ce2b01 100644 --- a/src/components/calcite-checkbox/calcite-checkbox.e2e.ts +++ b/src/components/calcite-checkbox/calcite-checkbox.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, focusable, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; +import { accessible, disabled, focusable, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; describe("calcite-checkbox", () => { it("is accessible", async () => @@ -15,6 +15,8 @@ describe("calcite-checkbox", () => { it("is form-associated", async () => formAssociated("calcite-checkbox", { testValue: true })); + it("can be disabled", () => disabled("calcite-checkbox")); + it("renders with correct default attributes", async () => { const page = await newE2EPage(); await page.setContent(""); @@ -70,21 +72,6 @@ describe("calcite-checkbox", () => { expect(spy).toHaveReceivedEventTimes(0); }); - it("does not toggle when clicked if disabled", async () => { - const page = await newE2EPage(); - await page.setContent(""); - - const calciteCheckbox = await page.find("calcite-checkbox"); - - expect(calciteCheckbox).not.toHaveAttribute("checked"); - - await calciteCheckbox.click(); - - await page.waitForChanges(); - - expect(calciteCheckbox).not.toHaveAttribute("checked"); - }); - it("removes the indeterminate attribute when clicked", async () => { const page = await newE2EPage(); await page.setContent(""); diff --git a/src/components/calcite-color-picker/calcite-color-picker.e2e.ts b/src/components/calcite-color-picker/calcite-color-picker.e2e.ts index c36899d6ad1..1216b4e28a5 100644 --- a/src/components/calcite-color-picker/calcite-color-picker.e2e.ts +++ b/src/components/calcite-color-picker/calcite-color-picker.e2e.ts @@ -1,4 +1,4 @@ -import { accessible, defaults, hidden, reflects, renders, focusable } from "../../tests/commonTests"; +import { accessible, defaults, hidden, reflects, renders, focusable, disabled } from "../../tests/commonTests"; import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, TEXT } from "./resources"; import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; @@ -163,6 +163,8 @@ describe("calcite-color-picker", () => { } ])); + it("can be disabled", () => disabled("calcite-color-picker")); + it("emits event when value changes", async () => { const page = await newE2EPage({ html: "" diff --git a/src/components/calcite-combobox-item/calcite-combobox-item.e2e.ts b/src/components/calcite-combobox-item/calcite-combobox-item.e2e.ts index ca9dafd950a..24e12a12a9f 100644 --- a/src/components/calcite-combobox-item/calcite-combobox-item.e2e.ts +++ b/src/components/calcite-combobox-item/calcite-combobox-item.e2e.ts @@ -1,4 +1,4 @@ -import { hidden, renders, slots } from "../../tests/commonTests"; +import { disabled, hidden, renders, slots } from "../../tests/commonTests"; describe("calcite-combobox-item", () => { it("renders", async () => renders("calcite-combobox-item", { display: "flex" })); @@ -6,4 +6,6 @@ describe("calcite-combobox-item", () => { it("honors hidden attribute", async () => hidden("calcite-combobox-item")); it("has slots", () => slots("calcite-combobox-item", [], true)); + + it("can be disabled", () => disabled("calcite-combobox-item")); }); diff --git a/src/components/calcite-combobox/calcite-combobox.e2e.ts b/src/components/calcite-combobox/calcite-combobox.e2e.ts index 25fe8abc72f..d134a529088 100644 --- a/src/components/calcite-combobox/calcite-combobox.e2e.ts +++ b/src/components/calcite-combobox/calcite-combobox.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { renders, hidden, accessible, defaults, labelable, formAssociated } from "../../tests/commonTests"; +import { renders, hidden, accessible, defaults, labelable, formAssociated, disabled } from "../../tests/commonTests"; import { html } from "../../tests/utils"; import { TEXT } from "./resources"; @@ -45,6 +45,8 @@ describe("calcite-combobox", () => { it("is labelable", async () => labelable("calcite-combobox")); + it("can be disabled", () => disabled("calcite-combobox")); + it("should show the listbox when it receives focus", async () => { const page = await newE2EPage(); await page.setContent(` diff --git a/src/components/calcite-date-picker-day/calcite-date-picker-day.e2e.ts b/src/components/calcite-date-picker-day/calcite-date-picker-day.e2e.ts new file mode 100644 index 00000000000..c00824412b9 --- /dev/null +++ b/src/components/calcite-date-picker-day/calcite-date-picker-day.e2e.ts @@ -0,0 +1,5 @@ +import { disabled } from "../../tests/commonTests"; + +describe("calcite-date-picker-day", () => { + it("can be disabled", () => disabled("calcite-date-picker-day")); +}); diff --git a/src/components/calcite-dropdown/calcite-dropdown.e2e.ts b/src/components/calcite-dropdown/calcite-dropdown.e2e.ts index 19932c6f3da..691dc947a95 100644 --- a/src/components/calcite-dropdown/calcite-dropdown.e2e.ts +++ b/src/components/calcite-dropdown/calcite-dropdown.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, renders } from "../../tests/commonTests"; +import { accessible, defaults, disabled, renders } from "../../tests/commonTests"; import dedent from "dedent"; import { html } from "../../tests/utils"; @@ -24,6 +24,9 @@ describe("calcite-dropdown", () => { defaultValue: "absolute" } ])); + + it("can be disabled", () => disabled("calcite-dropdown")); + /** * Test helper for selected calcite-dropdown items. Expects items to have IDs to test against. */ @@ -772,28 +775,6 @@ describe("calcite-dropdown", () => { expect(await page.evaluate(() => document.activeElement.id)).toEqual("trigger"); }); - it("when disabled, clicks on slotted dropdown trigger do not open dropdown", async () => { - const page = await newE2EPage(); - await page.setContent(html` - - Open dropdown - - Dropdown Item Content - Dropdown Item Content - Dropdown Item Content - - - `); - - const element = await page.find("calcite-dropdown"); - const trigger = await element.find("#trigger"); - const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper"); - expect(await dropdownWrapper.isVisible()).toBe(false); - await trigger.click(); - await page.waitForChanges(); - expect(await dropdownWrapper.isVisible()).toBe(false); - }); - it("accepts multiple triggers", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/src/components/calcite-fab/calcite-fab.e2e.ts b/src/components/calcite-fab/calcite-fab.e2e.ts index 701e05457a6..1d7430bd869 100755 --- a/src/components/calcite-fab/calcite-fab.e2e.ts +++ b/src/components/calcite-fab/calcite-fab.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, hidden, renders } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders } from "../../tests/commonTests"; import { CSS } from "./resources"; import { defaults } from "../../tests/commonTests"; @@ -20,6 +20,8 @@ describe("calcite-fab", () => { } ])); + it("can be disabled", () => disabled("calcite-fab")); + it("should have visible text when text is enabled", async () => { const page = await newE2EPage(); await page.setContent(``); @@ -70,14 +72,6 @@ describe("calcite-fab", () => { expect(await calciteButton.getProperty("label")).toBe("hi"); }); - it("should be disabled", async () => { - const page = await newE2EPage(); - await page.setContent(``); - - const button = await page.find(`calcite-fab >>> .${CSS.button}`); - expect(button).toHaveAttribute("disabled"); - }); - it("should have appearance=outline", async () => { const page = await newE2EPage(); await page.setContent(``); diff --git a/src/components/calcite-filter/calcite-filter.e2e.ts b/src/components/calcite-filter/calcite-filter.e2e.ts index fb88cfe4075..2161ff23df3 100644 --- a/src/components/calcite-filter/calcite-filter.e2e.ts +++ b/src/components/calcite-filter/calcite-filter.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, focusable, hidden, renders } from "../../tests/commonTests"; +import { accessible, disabled, focusable, hidden, renders } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-filter", () => { @@ -11,6 +11,8 @@ describe("calcite-filter", () => { it("is focusable", async () => focusable("calcite-filter")); + it("can be disabled", () => disabled("calcite-filter")); + describe("strings", () => { it("should update the filter placeholder when a string is provided", async () => { const page = await newE2EPage(); diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts b/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts index f27138ec908..ebd56f8ed72 100644 --- a/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts +++ b/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts @@ -1,4 +1,4 @@ -import { accessible, labelable, renders } from "../../tests/commonTests"; +import { accessible, disabled, labelable, renders } from "../../tests/commonTests"; import { E2EPage } from "@stencil/core/testing"; import { newE2EPage } from "@stencil/core/testing"; import { CSS } from "./resources"; @@ -15,6 +15,13 @@ describe("calcite-inline-editable", () => { { display: "block" } )); + it("can be disabled", () => + disabled(html` + + + + `)); + describe("rendering permutations", () => { let page: E2EPage; beforeEach(async () => { @@ -111,30 +118,6 @@ describe("calcite-inline-editable", () => { expect(calciteInlineEditableEnableEditingChange).toHaveReceivedEventTimes(1); }); - it("prevents editing when the component is disabled", async () => { - page = await newE2EPage(); - await page.setContent(` - - - - `); - const calciteInlineEditableEnableEditingChange = await page.spyOnEvent( - "calciteInlineEditableEnableEditingChange" - ); - const element = await page.find("calcite-inline-editable"); - const input = await page.find("calcite-input"); - await element.click(); - expect(element).not.toHaveAttribute("editing-enabled"); - expect(input).toHaveAttribute("disabled"); - expect(calciteInlineEditableEnableEditingChange).toHaveReceivedEventTimes(0); - element.setProperty("disabled", false); - await page.waitForChanges(); - await element.click(); - expect(element).toHaveAttribute("editing-enabled"); - expect(input).not.toHaveAttribute("disabled"); - expect(calciteInlineEditableEnableEditingChange).toHaveReceivedEventTimes(1); - }); - it("disables editing when the child input loses focus", async () => { const element = await page.find("calcite-inline-editable"); const input = await page.find("calcite-input"); diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.e2e.ts b/src/components/calcite-input-date-picker/calcite-input-date-picker.e2e.ts index aa201bfb97c..bbeae7d44e8 100644 --- a/src/components/calcite-input-date-picker/calcite-input-date-picker.e2e.ts +++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { defaults, formAssociated, labelable, renders } from "../../tests/commonTests"; +import { defaults, disabled, formAssociated, labelable, renders } from "../../tests/commonTests"; import { html } from "../../tests/utils"; const animationDurationInMs = 200; @@ -17,6 +17,8 @@ describe("calcite-input-date-picker", () => { it("is labelable", async () => labelable("calcite-input-date-picker")); + it("can be disabled", () => disabled("calcite-input-date-picker")); + describe("event emitting when the value changes", () => { it("emits when configured for single date", async () => { const page = await newE2EPage(); diff --git a/src/components/calcite-input-time-picker/calcite-input-time-picker.e2e.ts b/src/components/calcite-input-time-picker/calcite-input-time-picker.e2e.ts index 995edef5dca..2f51eb1d689 100644 --- a/src/components/calcite-input-time-picker/calcite-input-time-picker.e2e.ts +++ b/src/components/calcite-input-time-picker/calcite-input-time-picker.e2e.ts @@ -1,6 +1,15 @@ import { newE2EPage } from "@stencil/core/testing"; import { localizeTimeString } from "../../utils/time"; -import { accessible, defaults, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests"; +import { + accessible, + defaults, + disabled, + focusable, + formAssociated, + labelable, + reflects, + renders +} from "../../tests/commonTests"; describe("calcite-input-time-picker", () => { it("renders", async () => renders("calcite-input-time-picker", { display: "inline-block" })); @@ -33,6 +42,8 @@ describe("calcite-input-time-picker", () => { shadowFocusTargetSelector: "calcite-input" })); + it("can be disabled", () => disabled("calcite-input-time-picker")); + it("opens the time picker on input keyboard focus", async () => { const page = await newE2EPage({ html: `` diff --git a/src/components/calcite-input/calcite-input.e2e.ts b/src/components/calcite-input/calcite-input.e2e.ts index 9f995749841..24d41afeab9 100644 --- a/src/components/calcite-input/calcite-input.e2e.ts +++ b/src/components/calcite-input/calcite-input.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { defaults, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests"; +import { defaults, disabled, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests"; import { html } from "../../tests/utils"; import { letterKeys, numberKeys } from "../../utils/key"; import { getDecimalSeparator, locales, localizeNumberString } from "../../utils/locale"; @@ -72,6 +72,8 @@ describe("calcite-input", () => { } ])); + it("can be disabled", () => disabled("calcite-input")); + it("inherits requested props when from wrapping calcite-label when props are provided", async () => { const page = await newE2EPage(); await page.setContent(html` @@ -355,29 +357,6 @@ describe("calcite-input", () => { expect(await element.getProperty("value")).toBe("6"); }); - it("should not increment or decrement value when disabled", async () => { - const page = await newE2EPage(); - await page.setContent(html``); - - const input = await page.find("calcite-input"); - - expect(await input.getProperty("value")).toBe("5"); - - const numberHorizontalItemUp = await page.find("calcite-input >>> .number-button-item[data-adjustment='up']"); - - await numberHorizontalItemUp.click(); - await page.waitForChanges(); - - expect(await input.getProperty("value")).toBe("5"); - - const numberHorizontalItemDown = await page.find("calcite-input >>> .number-button-item[data-adjustment='down']"); - - await numberHorizontalItemDown.click(); - await page.waitForChanges(); - - expect(await input.getProperty("value")).toBe("5"); - }); - it("correctly stops decrementing value when min is set", async () => { const page = await newE2EPage(); await page.setContent(html` `); diff --git a/src/components/calcite-link/calcite-link.e2e.ts b/src/components/calcite-link/calcite-link.e2e.ts index 188143412bf..6a3b105c0e5 100644 --- a/src/components/calcite-link/calcite-link.e2e.ts +++ b/src/components/calcite-link/calcite-link.e2e.ts @@ -1,5 +1,5 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, renders } from "../../tests/commonTests"; +import { accessible, defaults, disabled, renders } from "../../tests/commonTests"; describe("calcite-link", () => { it("renders", async () => renders("link", { display: "inline" })); @@ -18,6 +18,8 @@ describe("calcite-link", () => { await accessible("Go"); }); + it("can be disabled", () => disabled("calcite-link")); + it("sets download attribute on internal anchor", async () => { const page = await newE2EPage(); await page.setContent(`Continue`); diff --git a/src/components/calcite-list-item/calcite-list-item.e2e.ts b/src/components/calcite-list-item/calcite-list-item.e2e.ts index 5a56e314f83..68f912ca0ee 100755 --- a/src/components/calcite-list-item/calcite-list-item.e2e.ts +++ b/src/components/calcite-list-item/calcite-list-item.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { hidden, renders, focusable, slots } from "../../tests/commonTests"; +import { hidden, renders, focusable, slots, disabled } from "../../tests/commonTests"; import { defaults } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; @@ -35,6 +35,8 @@ describe("calcite-list-item", () => { it("has slots", () => slots("calcite-list-item", SLOTS)); + it("can be disabled", () => disabled("calcite-list-item")); + it("renders content node when label is provided", async () => { const page = await newE2EPage({ html: `` }); diff --git a/src/components/calcite-list/calcite-list.e2e.ts b/src/components/calcite-list/calcite-list.e2e.ts index 9fbca27c8c1..a64630488b2 100755 --- a/src/components/calcite-list/calcite-list.e2e.ts +++ b/src/components/calcite-list/calcite-list.e2e.ts @@ -1,4 +1,4 @@ -import { accessible, hidden, renders, focusable } from "../../tests/commonTests"; +import { accessible, hidden, renders, focusable, disabled } from "../../tests/commonTests"; import { html } from "../../tests/utils"; describe("calcite-list", () => { @@ -29,4 +29,6 @@ describe("calcite-list", () => { `); }); + + it("can be disabled", () => disabled("calcite-list")); }); diff --git a/src/components/calcite-panel/calcite-panel.e2e.ts b/src/components/calcite-panel/calcite-panel.e2e.ts index 2d3f4553f41..85dde31fef5 100644 --- a/src/components/calcite-panel/calcite-panel.e2e.ts +++ b/src/components/calcite-panel/calcite-panel.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests"; import { html } from "../../tests/utils"; import { CSS, SLOTS } from "./resources"; @@ -22,6 +22,8 @@ describe("calcite-panel", () => { it("has slots", () => slots("calcite-panel", SLOTS)); + it("can be disabled", () => disabled("calcite-panel")); + it("honors dismissed prop", async () => { const page = await newE2EPage(); diff --git a/src/components/calcite-pick-list/calcite-pick-list.e2e.ts b/src/components/calcite-pick-list/calcite-pick-list.e2e.ts index e399b706869..657d8f8c1bc 100644 --- a/src/components/calcite-pick-list/calcite-pick-list.e2e.ts +++ b/src/components/calcite-pick-list/calcite-pick-list.e2e.ts @@ -4,10 +4,11 @@ import { accessible, hidden, renders, defaults } from "../../tests/commonTests"; import { selectionAndDeselection, filterBehavior, - disabledStates, + loadingState, keyboardNavigation, itemRemoval, - focusing + focusing, + disabling } from "./shared-list-tests"; import { html } from "../../tests/utils"; import { CSS as PICK_LIST_GROUP_CSS } from "../calcite-pick-list-group/resources"; @@ -32,6 +33,10 @@ describe("calcite-pick-list", () => { `)); + describe("disabling", () => { + disabling("pick"); + }); + describe("Selection and Deselection", () => { selectionAndDeselection("pick"); }); @@ -183,8 +188,8 @@ describe("calcite-pick-list", () => { itemRemoval("pick"); }); - describe("disabled states", () => { - disabledStates("pick"); + describe("loading state", () => { + loadingState("pick"); }); describe("setFocus", () => { diff --git a/src/components/calcite-pick-list/shared-list-tests.ts b/src/components/calcite-pick-list/shared-list-tests.ts index 74410155e28..b8abd618ff7 100644 --- a/src/components/calcite-pick-list/shared-list-tests.ts +++ b/src/components/calcite-pick-list/shared-list-tests.ts @@ -1,5 +1,5 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { focusable } from "../../tests/commonTests"; +import { disabled, focusable } from "../../tests/commonTests"; import { html } from "../../tests/utils"; import { CSS as PICK_LIST_ITEM_CSS } from "../calcite-pick-list-item/resources"; @@ -514,24 +514,7 @@ export function filterBehavior(listType: ListType): void { }); } -export function disabledStates(listType: ListType): void { - it("disabled", async () => { - const page = await newE2EPage({ - html: html` - - - - ` - }); - - const list = await page.find(`calcite-${listType}-list`); - const item1 = await list.find("[value=one]"); - const toggleSpy = await list.spyOnEvent("calciteListChange"); - - await item1.click(); - expect(toggleSpy).toHaveReceivedEventTimes(0); - }); - +export function loadingState(listType: ListType): void { it("loading", async () => { const page = await newE2EPage(); await page.setContent(` @@ -598,3 +581,7 @@ export function focusing(listType: ListType): void { )); }); } + +export function disabling(listType: ListType): void { + it("can be disabled", () => disabled(`calcite-${listType}`)); +} diff --git a/src/components/calcite-radio-button/calcite-radio-button.e2e.ts b/src/components/calcite-radio-button/calcite-radio-button.e2e.ts index 42300312e09..5b180fd414c 100644 --- a/src/components/calcite-radio-button/calcite-radio-button.e2e.ts +++ b/src/components/calcite-radio-button/calcite-radio-button.e2e.ts @@ -2,6 +2,7 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, + disabled, focusable, formAssociated, hidden, @@ -31,6 +32,8 @@ describe("calcite-radio-button", () => { propertyToToggle: "checked" })); + it("can be disabled", () => disabled("calcite-radio-button")); + it("focusing skips over hidden radio-buttons", async () => { const page = await newE2EPage(); await page.setContent(` diff --git a/src/components/calcite-radio-group/calcite-radio-group.e2e.ts b/src/components/calcite-radio-group/calcite-radio-group.e2e.ts index f658c27b572..a42da8a8fbb 100644 --- a/src/components/calcite-radio-group/calcite-radio-group.e2e.ts +++ b/src/components/calcite-radio-group/calcite-radio-group.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { focusable, formAssociated, labelable, renders } from "../../tests/commonTests"; +import { disabled, focusable, formAssociated, labelable, renders } from "../../tests/commonTests"; import { html } from "../../tests/utils"; describe("calcite-radio-group", () => { @@ -15,6 +15,8 @@ describe("calcite-radio-group", () => { { focusTargetSelector: "calcite-radio-group-item" } )); + it("can be disabled", () => disabled("calcite-radio-group")); + it("does not require an item to be checked", async () => { const page = await newE2EPage(); await page.setContent( diff --git a/src/components/calcite-rating/calcite-rating.e2e.ts b/src/components/calcite-rating/calcite-rating.e2e.ts index 7dbfd8aae05..ef227ed972a 100644 --- a/src/components/calcite-rating/calcite-rating.e2e.ts +++ b/src/components/calcite-rating/calcite-rating.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { renders, accessible, focusable, labelable, formAssociated } from "../../tests/commonTests"; +import { renders, accessible, focusable, labelable, formAssociated, disabled } from "../../tests/commonTests"; describe("calcite-rating", () => { it("renders", async () => renders("", { display: "flex" })); @@ -8,6 +8,8 @@ describe("calcite-rating", () => { it("is labelable", async () => labelable("calcite-rating")); + it("can be disabled", () => disabled("calcite-rating")); + it("renders outlined star when no value or average is set", async () => { const page = await newE2EPage(); await page.setContent(""); @@ -371,16 +373,6 @@ describe("calcite-rating", () => { expect(element).toEqualAttribute("value", "4"); }); - it("disables click interaction when disabled is requested", async () => { - const page = await newE2EPage(); - await page.setContent(""); - const element = await page.find("calcite-rating"); - const ratingItem1 = await page.find("calcite-rating >>> .star"); - expect(element).toEqualAttribute("value", "0"); - await ratingItem1.click(); - expect(element).toEqualAttribute("value", "0"); - }); - it("does not render the calcite chip when count and average are not present", async () => { const page = await newE2EPage(); await page.setContent(""); diff --git a/src/components/calcite-select/calcite-select.e2e.ts b/src/components/calcite-select/calcite-select.e2e.ts index 6b3784e7ac8..801158426c4 100644 --- a/src/components/calcite-select/calcite-select.e2e.ts +++ b/src/components/calcite-select/calcite-select.e2e.ts @@ -1,5 +1,5 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests"; +import { accessible, disabled, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests"; import { html } from "../../tests/utils"; import { CSS } from "./resources"; @@ -41,6 +41,8 @@ describe("calcite-select", () => { it("is labelable", async () => labelable("calcite-select")); + it("can be disabled", () => disabled("calcite-select")); + describe("flat options", () => { it("allows selecting items", async () => { const page = await newE2EPage({ diff --git a/src/components/calcite-slider/calcite-slider.e2e.ts b/src/components/calcite-slider/calcite-slider.e2e.ts index 5f4862cea37..a2a803a1130 100644 --- a/src/components/calcite-slider/calcite-slider.e2e.ts +++ b/src/components/calcite-slider/calcite-slider.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { defaults, formAssociated, labelable, renders } from "../../tests/commonTests"; +import { defaults, disabled, formAssociated, labelable, renders } from "../../tests/commonTests"; import { getElementXY, html } from "../../tests/utils"; describe("calcite-slider", () => { @@ -53,12 +53,7 @@ describe("calcite-slider", () => { it("is labelable", async () => labelable("calcite-slider")); - it("becomes inactive from disabled prop", async () => { - const page = await newE2EPage(); - await page.setContent(``); - const slider = await page.find("calcite-slider"); - expect(slider).toHaveAttribute("disabled"); - }); + it("can be disabled", () => disabled("calcite-slider")); it("sets aria attributes properly for single value", async () => { const page = await newE2EPage(); diff --git a/src/components/calcite-sortable-list/calcite-sortable-list.e2e.ts b/src/components/calcite-sortable-list/calcite-sortable-list.e2e.ts index 26302a68b86..b6a160ac275 100644 --- a/src/components/calcite-sortable-list/calcite-sortable-list.e2e.ts +++ b/src/components/calcite-sortable-list/calcite-sortable-list.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, hidden, renders } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders } from "../../tests/commonTests"; import { dragAndDrop } from "../../tests/utils"; describe("calcite-sortable-list", () => { @@ -9,6 +9,8 @@ describe("calcite-sortable-list", () => { it("is accessible", async () => accessible(``)); + it("can be disabled", () => disabled("calcite-sortable-list")); + const worksUsingMouse = async (page: E2EPage): Promise => { await dragAndDrop(page, `#one calcite-handle`, `#two calcite-handle`); diff --git a/src/components/calcite-split-button/calcite-split-button.e2e.ts b/src/components/calcite-split-button/calcite-split-button.e2e.ts index 8fa4d495587..090f7866e13 100644 --- a/src/components/calcite-split-button/calcite-split-button.e2e.ts +++ b/src/components/calcite-split-button/calcite-split-button.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, renders, defaults } from "../../tests/commonTests"; +import { accessible, renders, defaults, disabled } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-split-button", () => { @@ -51,6 +51,8 @@ describe("calcite-split-button", () => { ${content} `)); + it("can be disabled", () => disabled("calcite-split-button")); + it("renders default props when none are provided", async () => { const page = await newE2EPage(); await page.setContent(` diff --git a/src/components/calcite-stepper-item/calcite-stepper-item.e2e.ts b/src/components/calcite-stepper-item/calcite-stepper-item.e2e.ts index 13d2b93e19f..a8ad7fb42fd 100644 --- a/src/components/calcite-stepper-item/calcite-stepper-item.e2e.ts +++ b/src/components/calcite-stepper-item/calcite-stepper-item.e2e.ts @@ -1,5 +1,6 @@ -import { renders } from "../../tests/commonTests"; +import { disabled, renders } from "../../tests/commonTests"; describe("calcite-stepper-item", () => { it("renders", () => renders("calcite-stepper-item", { display: "flex" })); + it("can be disabled", () => disabled("calcite-stepper-item")); }); diff --git a/src/components/calcite-switch/calcite-switch.e2e.ts b/src/components/calcite-switch/calcite-switch.e2e.ts index fbf1c8a60cb..59b560e8393 100644 --- a/src/components/calcite-switch/calcite-switch.e2e.ts +++ b/src/components/calcite-switch/calcite-switch.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; +import { accessible, disabled, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; describe("calcite-switch", () => { it("renders with correct default attributes", async () => { @@ -20,6 +20,8 @@ describe("calcite-switch", () => { it("is form-associated", async () => formAssociated("calcite-switch", { testValue: true })); + it("can be disabled", () => disabled("calcite-switch")); + it("toggles the checked attributes appropriately when clicked", async () => { const page = await newE2EPage(); await page.setContent(""); @@ -74,18 +76,6 @@ describe("calcite-switch", () => { expect(spy).toHaveReceivedEventTimes(0); }); - it("does not toggle when disabled", async () => { - const page = await newE2EPage(); - await page.setContent(``); - const calciteSwitch = await page.find("calcite-switch"); - const changeEvent = await calciteSwitch.spyOnEvent("calciteSwitchChange"); - expect(changeEvent).toHaveReceivedEventTimes(0); - await calciteSwitch.click(); - expect(changeEvent).toHaveReceivedEventTimes(0); - expect(calciteSwitch).not.toHaveAttribute("checked"); - expect(await calciteSwitch.getProperty("checked")).toBe(false); - }); - it("toggles the checked attributes when the checkbox is toggled", async () => { const page = await newE2EPage(); await page.setContent(``); diff --git a/src/components/calcite-tab-title/calcite-tab-title.e2e.ts b/src/components/calcite-tab-title/calcite-tab-title.e2e.ts index 1c6460f4705..59818919455 100644 --- a/src/components/calcite-tab-title/calcite-tab-title.e2e.ts +++ b/src/components/calcite-tab-title/calcite-tab-title.e2e.ts @@ -1,11 +1,13 @@ import { newE2EPage } from "@stencil/core/testing"; -import { HYDRATED_ATTR, renders } from "../../tests/commonTests"; +import { disabled, HYDRATED_ATTR, renders } from "../../tests/commonTests"; describe("calcite-tab-title", () => { const tabTitleHtml = ""; it("renders", async () => renders(tabTitleHtml, { display: "block" })); + it("can be disabled", () => disabled("calcite-tab-title")); + it("renders with an icon-start", async () => { const page = await newE2EPage(); await page.setContent(`Text`); diff --git a/src/components/calcite-tabs/calcite-tabs.e2e.ts b/src/components/calcite-tabs/calcite-tabs.e2e.ts index feab26c49ad..a5e58b3d0e9 100644 --- a/src/components/calcite-tabs/calcite-tabs.e2e.ts +++ b/src/components/calcite-tabs/calcite-tabs.e2e.ts @@ -106,30 +106,6 @@ describe("calcite-tabs", () => { } }); - it("disallows selection of a disabled tab", async () => { - const page = await newE2EPage(); - - await page.setContent(` - - - Tab 1 Title - Tab 2 Title - - - Tab 1 Content - Tab 2 Content - - `); - - await page.waitForChanges(); - - const [, tab2] = await page.findAll("calcite-tab"); - const [, tabTitle2] = await page.findAll("calcite-tab-title"); - - await tabTitle2.click(); - expect(tab2).not.toHaveAttribute("active"); - }); - describe("when no scale is provided", () => { it("should render itself and child tab elements with default medium scale", async () => { const page = await newE2EPage({ diff --git a/src/components/calcite-tile-select-group/calcite-tile-select-group.e2e.ts b/src/components/calcite-tile-select-group/calcite-tile-select-group.e2e.ts index 73e95d7e3e7..06091c08d4e 100644 --- a/src/components/calcite-tile-select-group/calcite-tile-select-group.e2e.ts +++ b/src/components/calcite-tile-select-group/calcite-tile-select-group.e2e.ts @@ -1,4 +1,4 @@ -import { accessible, defaults, reflects, renders } from "../../tests/commonTests"; +import { accessible, defaults, disabled, reflects, renders } from "../../tests/commonTests"; describe("calcite-tile-select-group", () => { it("renders", async () => renders("calcite-tile-select-group", { display: "flex" })); @@ -9,4 +9,6 @@ describe("calcite-tile-select-group", () => { defaults("calcite-tile-select-group", [{ propertyName: "layout", defaultValue: "horizontal" }])); it("reflects", async () => reflects("calcite-tile-select-group", [{ propertyName: "layout", value: "horizontal" }])); + + it("can be disabled", () => disabled("calcite-tile-select-group")); }); diff --git a/src/components/calcite-tile-select/calcite-tile-select.e2e.ts b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts index d0e7c4478f6..d132c62cf49 100644 --- a/src/components/calcite-tile-select/calcite-tile-select.e2e.ts +++ b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, reflects, renders } from "../../tests/commonTests"; import { html } from "../../tests/utils"; describe("calcite-tile-select", () => { @@ -32,6 +32,8 @@ describe("calcite-tile-select", () => { it("honors hidden attribute", async () => hidden("calcite-tile-select")); + it("can be disabled", () => disabled("calcite-tile-select")); + it("renders a calcite-tile", async () => { const page = await newE2EPage(); await page.setContent(""); diff --git a/src/components/calcite-tile/calcite-tile.e2e.ts b/src/components/calcite-tile/calcite-tile.e2e.ts index 2ca84e1f58b..520a880da6d 100644 --- a/src/components/calcite-tile/calcite-tile.e2e.ts +++ b/src/components/calcite-tile/calcite-tile.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, hidden, reflects, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests"; import { html } from "../../tests/utils"; import { SLOTS } from "./resources"; @@ -30,6 +30,8 @@ describe("calcite-tile", () => { it("honors hidden attribute", async () => hidden("calcite-tile")); + it("can be disabled", () => disabled("calcite-tile")); + it("renders without a link by default", async () => { const page = await newE2EPage(); await page.setContent(""); @@ -59,22 +61,6 @@ describe("calcite-tile", () => { expect(description).toBeNull(); }); - it("disabling it also disables link", async () => { - const page = await newE2EPage({ - html: html`` - }); - const tile = await page.find("calcite-tile"); - const link = await page.find("calcite-tile >>> calcite-link"); - - expect(await link.getProperty("disabled")).toBe(false); - - tile.setProperty("disabled", true); - - await page.waitForChanges(); - - expect(await link.getProperty("disabled")).toBe(true); - }); - it("renders icon only when supplied", async () => { const page = await newE2EPage(); await page.setContent(""); diff --git a/src/components/calcite-value-list/calcite-value-list.e2e.ts b/src/components/calcite-value-list/calcite-value-list.e2e.ts index 5be0bced008..051e7d9c180 100644 --- a/src/components/calcite-value-list/calcite-value-list.e2e.ts +++ b/src/components/calcite-value-list/calcite-value-list.e2e.ts @@ -4,10 +4,11 @@ import { accessible, hidden, renders } from "../../tests/commonTests"; import { selectionAndDeselection, filterBehavior, - disabledStates, + loadingState, keyboardNavigation, itemRemoval, - focusing + focusing, + disabling } from "../calcite-pick-list/shared-list-tests"; import { dragAndDrop, html } from "../../tests/utils"; @@ -23,6 +24,10 @@ describe("calcite-value-list", () => { `)); + describe("disabling", () => { + disabling("value"); + }); + describe("Selection and Deselection", () => { selectionAndDeselection("value"); }); @@ -64,8 +69,8 @@ describe("calcite-value-list", () => { itemRemoval("value"); }); - describe("disabled states", () => { - disabledStates("value"); + describe("loading state", () => { + loadingState("value"); }); describe("setFocus", () => { From 4947d41c098eab31be018a68c9254439f00468c7 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jan 2022 20:03:11 -0800 Subject: [PATCH 12/56] add disabled stories --- .../calcite-block/calcite-block.stories.ts | 6 ++++++ .../calcite-button/calcite-button.stories.ts | 4 +++- .../calcite-checkbox.stories.ts | 2 ++ .../calcite-color-picker.stories.ts | 3 +++ .../calcite-combobox.stories.ts | 13 +++++++++++++ .../calcite-dropdown.stories.ts | 18 ++++++++++++++++++ .../calcite-fab/calcite-fab.stories.ts | 3 +++ .../calcite-inline-editable.stories.ts | 4 ++++ .../calcite-input-date-picker.stories.ts | 2 ++ .../calcite-input-time-picker.stories.ts | 2 ++ .../calcite-input/calcite-input.stories.ts | 2 ++ .../calcite-link/calcite-link.stories.ts | 2 ++ .../calcite-list/calcite-list.stories.ts | 18 ++++++++++++++++++ .../calcite-panel/calcite-panel.stories.ts | 2 ++ .../calcite-pick-list.stories.ts | 11 +++++++++++ .../calcite-radio-button.stories.ts | 2 ++ .../calcite-radio-group.stories.ts | 7 +++++++ .../calcite-rating/calcite-rating.stories.ts | 2 ++ .../calcite-select/calcite-select.stories.ts | 5 +++++ .../calcite-slider/calcite-slider.stories.ts | 2 ++ .../calcite-split-button.stories.ts | 8 ++++++++ .../calcite-stepper/calcite-stepper.stories.ts | 7 +++++++ .../calcite-switch/calcite-switch.stories.ts | 2 ++ .../calcite-tabs/calcite-tabs.stories.ts | 9 +++++++++ .../calcite-tile-select-group.stories.ts | 5 +++++ .../calcite-tile/calcite-tile.stories.ts | 2 ++ .../calcite-value-list.stories.ts | 11 +++++++++++ 27 files changed, 153 insertions(+), 1 deletion(-) diff --git a/src/components/calcite-block/calcite-block.stories.ts b/src/components/calcite-block/calcite-block.stories.ts index c498c36017c..48905b95ace 100644 --- a/src/components/calcite-block/calcite-block.stories.ts +++ b/src/components/calcite-block/calcite-block.stories.ts @@ -167,3 +167,9 @@ export const withHeaderControl = (): string => export const withIconAndHeader = (): string => create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `
✅
`); + +export const disabled = (): string => html` + + demo + +`; diff --git a/src/components/calcite-button/calcite-button.stories.ts b/src/components/calcite-button/calcite-button.stories.ts index e5fb9890540..8ae2a410f6e 100644 --- a/src/components/calcite-button/calcite-button.stories.ts +++ b/src/components/calcite-button/calcite-button.stories.ts @@ -1,7 +1,7 @@ import { text, select } from "@storybook/addon-knobs"; import { iconNames, boolean } from "../../../.storybook/helpers"; import { themesDarkDefault } from "../../../.storybook/utils"; -import { html } from "../../tests/utils"; +import { html, placeholderImage } from "../../tests/utils"; import readme from "./readme.md"; export default { @@ -175,3 +175,5 @@ export const RTL = (): string => html` ${text("text", "button text here")} `; + +export const disabled = (): string => html`disabled`; diff --git a/src/components/calcite-checkbox/calcite-checkbox.stories.ts b/src/components/calcite-checkbox/calcite-checkbox.stories.ts index 89b18f8c33b..f5811b714e0 100644 --- a/src/components/calcite-checkbox/calcite-checkbox.stories.ts +++ b/src/components/calcite-checkbox/calcite-checkbox.stories.ts @@ -49,3 +49,5 @@ export const RTL = (): string => html` ${text("label", "Checkbox")} `; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-color-picker/calcite-color-picker.stories.ts b/src/components/calcite-color-picker/calcite-color-picker.stories.ts index 6fee334519d..6a687f720b2 100644 --- a/src/components/calcite-color-picker/calcite-color-picker.stories.ts +++ b/src/components/calcite-color-picker/calcite-color-picker.stories.ts @@ -8,6 +8,7 @@ import { } from "../../../.storybook/utils"; import colorReadme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; +import { html } from "../../tests/utils"; export default { title: "Components/Controls/ColorPicker", @@ -97,3 +98,5 @@ export const AllowingEmpty = (): string => { name: "allow-empty", value: true }, { name: "value", value: text("value", "") } ]); + +export const disabled = (): string => html``; diff --git a/src/components/calcite-combobox/calcite-combobox.stories.ts b/src/components/calcite-combobox/calcite-combobox.stories.ts index 1c6f8012b9a..7f253e914b6 100644 --- a/src/components/calcite-combobox/calcite-combobox.stories.ts +++ b/src/components/calcite-combobox/calcite-combobox.stories.ts @@ -217,3 +217,16 @@ export const Rtl = (): string => html` `; Rtl.storyName = "RTL"; + +export const disabled = (): string => html` + + + + + + + + + + +`; diff --git a/src/components/calcite-dropdown/calcite-dropdown.stories.ts b/src/components/calcite-dropdown/calcite-dropdown.stories.ts index 34cc578b16e..41bf6b3bc1a 100644 --- a/src/components/calcite-dropdown/calcite-dropdown.stories.ts +++ b/src/components/calcite-dropdown/calcite-dropdown.stories.ts @@ -388,3 +388,21 @@ export const ScrollingAfterCertainItems = (): string => html` `; ScrollingAfterCertainItems.storyName = "Scrolling after certain items"; + +export const disabled = (): string => html` + Open Dropdown + + 1 + 2 + 3 + 4 + 5 + + + 6 + 7 + 8 + 9 + 10 + +`; diff --git a/src/components/calcite-fab/calcite-fab.stories.ts b/src/components/calcite-fab/calcite-fab.stories.ts index 7dbef3f56c9..084efe82798 100644 --- a/src/components/calcite-fab/calcite-fab.stories.ts +++ b/src/components/calcite-fab/calcite-fab.stories.ts @@ -9,6 +9,7 @@ import { import readme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; import { ICONS } from "./resources"; +import { html } from "../../tests/utils"; const { scale } = ATTRIBUTES; export default { @@ -107,3 +108,5 @@ export const darkThemeRTL = (): string => ); darkThemeRTL.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts b/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts index 9de39e53f0c..e65e15b3cb7 100644 --- a/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts +++ b/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts @@ -126,3 +126,7 @@ export const DarkMode = (): string => html` DarkMode.storyName = "Dark mode"; DarkMode.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html` + +`; diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts b/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts index a3834539a64..751d2e9491a 100644 --- a/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts +++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts @@ -84,3 +84,5 @@ export const RTL = (): string => html` >
`; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts b/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts index 51d6a1ccbf4..754e75b8765 100644 --- a/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts +++ b/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts @@ -38,3 +38,5 @@ export const DarkTheme = (): string => html` `; DarkTheme.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-input/calcite-input.stories.ts b/src/components/calcite-input/calcite-input.stories.ts index 219459b368b..26142d81768 100644 --- a/src/components/calcite-input/calcite-input.stories.ts +++ b/src/components/calcite-input/calcite-input.stories.ts @@ -270,3 +270,5 @@ export const WithLabelAndInputMessageRTL = (): string => html`
`; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-link/calcite-link.stories.ts b/src/components/calcite-link/calcite-link.stories.ts index a8912379c72..3e2101fef31 100644 --- a/src/components/calcite-link/calcite-link.stories.ts +++ b/src/components/calcite-link/calcite-link.stories.ts @@ -142,3 +142,5 @@ export const WithIconStartAndIconEndRTL = (): string => html` around the link
`; + +export const disabled = (): string => html`disabled html` DarkMode.storyName = "Dark mode"; DarkMode.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html` + + + +`; diff --git a/src/components/calcite-panel/calcite-panel.stories.ts b/src/components/calcite-panel/calcite-panel.stories.ts index 12c69836b99..8a11b7bda79 100644 --- a/src/components/calcite-panel/calcite-panel.stories.ts +++ b/src/components/calcite-panel/calcite-panel.stories.ts @@ -163,3 +163,5 @@ export const darkThemeRTL = (): string => ); darkThemeRTL.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html`disabled`; diff --git a/src/components/calcite-pick-list/calcite-pick-list.stories.ts b/src/components/calcite-pick-list/calcite-pick-list.stories.ts index 596b9fae0d1..1139dab86d4 100644 --- a/src/components/calcite-pick-list/calcite-pick-list.stories.ts +++ b/src/components/calcite-pick-list/calcite-pick-list.stories.ts @@ -165,3 +165,14 @@ export const nested = (): string => ` ); + +export const disabled = (): string => html` + + + +`; diff --git a/src/components/calcite-radio-button/calcite-radio-button.stories.ts b/src/components/calcite-radio-button/calcite-radio-button.stories.ts index 9057cba5519..19485c79e92 100644 --- a/src/components/calcite-radio-button/calcite-radio-button.stories.ts +++ b/src/components/calcite-radio-button/calcite-radio-button.stories.ts @@ -59,3 +59,5 @@ export const RTL = (): string => html` ${text("label", "Radio Button")} `; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-radio-group/calcite-radio-group.stories.ts b/src/components/calcite-radio-group/calcite-radio-group.stories.ts index 813a33c4ddd..5c36f34cb73 100644 --- a/src/components/calcite-radio-group/calcite-radio-group.stories.ts +++ b/src/components/calcite-radio-group/calcite-radio-group.stories.ts @@ -115,3 +115,10 @@ export const RTL = (): string => html` Vue `; + +export const disabled = (): string => html` + React + Ember + Angular + Vue +`; diff --git a/src/components/calcite-rating/calcite-rating.stories.ts b/src/components/calcite-rating/calcite-rating.stories.ts index c9c14b76aaa..54de1913fb9 100644 --- a/src/components/calcite-rating/calcite-rating.stories.ts +++ b/src/components/calcite-rating/calcite-rating.stories.ts @@ -80,3 +80,5 @@ export const Rtl = (): string => html` `; Rtl.storyName = "RTL"; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-select/calcite-select.stories.ts b/src/components/calcite-select/calcite-select.stories.ts index 7d4b483ce04..2119d0f2bc3 100644 --- a/src/components/calcite-select/calcite-select.stories.ts +++ b/src/components/calcite-select/calcite-select.stories.ts @@ -138,3 +138,8 @@ export const RTL = (): string => ` ); + +export const disabled = (): string => html` + + +`; diff --git a/src/components/calcite-slider/calcite-slider.stories.ts b/src/components/calcite-slider/calcite-slider.stories.ts index bcea6ea2885..2d9c8be6d97 100644 --- a/src/components/calcite-slider/calcite-slider.stories.ts +++ b/src/components/calcite-slider/calcite-slider.stories.ts @@ -281,3 +281,5 @@ export const HistogramDark = (): HTMLCalciteSliderElement => { HistogramDark.storyName = "Histogram Dark theme"; HistogramDark.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-split-button/calcite-split-button.stories.ts b/src/components/calcite-split-button/calcite-split-button.stories.ts index 3def9c4b835..cc17efa4c57 100644 --- a/src/components/calcite-split-button/calcite-split-button.stories.ts +++ b/src/components/calcite-split-button/calcite-split-button.stories.ts @@ -139,3 +139,11 @@ export const DarkMode = (): string => html` DarkMode.storyName = "Dark mode"; DarkMode.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html` + + Option 2 + Option 3 + Option 4 + +`; diff --git a/src/components/calcite-stepper/calcite-stepper.stories.ts b/src/components/calcite-stepper/calcite-stepper.stories.ts index 9bf2076e601..62b2866ef78 100644 --- a/src/components/calcite-stepper/calcite-stepper.stories.ts +++ b/src/components/calcite-stepper/calcite-stepper.stories.ts @@ -175,3 +175,10 @@ export const Rtl = (): string => html` `; Rtl.storyName = "RTL"; + +export const disabled = (): string => html` + 1 + 2 + 3 + 4 +`; diff --git a/src/components/calcite-switch/calcite-switch.stories.ts b/src/components/calcite-switch/calcite-switch.stories.ts index 235fa02c4a7..a3ebc769f8d 100644 --- a/src/components/calcite-switch/calcite-switch.stories.ts +++ b/src/components/calcite-switch/calcite-switch.stories.ts @@ -64,3 +64,5 @@ export const Rtl = (): string => html` `; Rtl.storyName = "RTL"; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-tabs/calcite-tabs.stories.ts b/src/components/calcite-tabs/calcite-tabs.stories.ts index 7a880485f01..beee8166581 100644 --- a/src/components/calcite-tabs/calcite-tabs.stories.ts +++ b/src/components/calcite-tabs/calcite-tabs.stories.ts @@ -238,3 +238,12 @@ export const RTL = (): string => html`

Tab 4 Content

 `; + +export const disabled = (): string => html` + + Tab 1 Title + Tab 2 Title + +

Tab 1 Content

 +

Tab 2 Content

 +`; diff --git a/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts b/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts index 591bb6c4407..43bf52a8a27 100644 --- a/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts +++ b/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts @@ -171,3 +171,8 @@ export const RTL = (): string => html` > `; + +export const disabled = (): string => html` + + +`; diff --git a/src/components/calcite-tile/calcite-tile.stories.ts b/src/components/calcite-tile/calcite-tile.stories.ts index 1194b3069a5..fd21b181391 100644 --- a/src/components/calcite-tile/calcite-tile.stories.ts +++ b/src/components/calcite-tile/calcite-tile.stories.ts @@ -76,3 +76,5 @@ export const LargeTile = (): string => html` > `; + +export const disabled = (): string => html``; diff --git a/src/components/calcite-value-list/calcite-value-list.stories.ts b/src/components/calcite-value-list/calcite-value-list.stories.ts index 35a6651ba15..d5dd6c8add4 100644 --- a/src/components/calcite-value-list/calcite-value-list.stories.ts +++ b/src/components/calcite-value-list/calcite-value-list.stories.ts @@ -130,3 +130,14 @@ export const darkThemeRTL = (): string => ); darkThemeRTL.parameters = { themes: themesDarkDefault }; + +export const disabled = (): string => html` + + + +`; From 825073853b41a960689269028938585488843850 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 10:59:05 -0800 Subject: [PATCH 13/56] fix missed rename --- src/components/block/block.tsx | 6 +++--- src/components/input-date-picker/input-date-picker.tsx | 2 +- src/components/list/list.tsx | 2 +- src/components/panel/panel.tsx | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/block/block.tsx b/src/components/block/block.tsx index 90791d0e8dd..b048b13eb53 100644 --- a/src/components/block/block.tsx +++ b/src/components/block/block.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from "@stencil/core"; import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources"; import { getSlotted } from "../../utils/dom"; -import { CalciteHeading, HeadingLevel } from "../functional/CalciteHeading"; +import { Heading, HeadingLevel } from "../functional/Heading"; import { Status } from "../interfaces"; import { ConditionalSlotComponent, @@ -192,9 +192,9 @@ export class Block implements ConditionalSlotComponent, InteractiveComponent { const { heading, headingLevel, summary } = this; return heading || summary ? (
- + {heading} - + {summary ?
{summary}
: null}
) : null; diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx index 3cdcf47fdee..8cf7f6bc91c 100644 --- a/src/components/input-date-picker/input-date-picker.tsx +++ b/src/components/input-date-picker/input-date-picker.tsx @@ -22,7 +22,7 @@ import { parseDateString, sameDate } from "../../utils/date"; -import { HeadingLevel } from "../functional/CalciteHeading"; +import { HeadingLevel } from "../functional/Heading"; import { TEXT } from "../date-picker/resources"; import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx index ddc93c3c690..fa0c77c18b3 100755 --- a/src/components/list/list.tsx +++ b/src/components/list/list.tsx @@ -1,6 +1,6 @@ import { Component, Element, h, VNode, Host, Prop, Method } from "@stencil/core"; import { CSS } from "./resources"; -import { HeadingLevel } from "../functional/CalciteHeading"; +import { HeadingLevel } from "../functional/Heading"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index b734e516298..0ed6d46598f 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -13,7 +13,7 @@ import { import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources"; import { getElementDir, getSlotted } from "../../utils/dom"; import { Scale } from "../interfaces"; -import { HeadingLevel, CalciteHeading } from "../functional/CalciteHeading"; +import { HeadingLevel, Heading } from "../functional/Heading"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { ConditionalSlotComponent, @@ -290,9 +290,9 @@ export class Panel implements ConditionalSlotComponent, InteractiveComponent { renderHeaderContent(): VNode { const { heading, headingLevel, summary } = this; const headingNode = heading ? ( - + {heading} - + ) : null; const summaryNode = summary ? {summary} : null; From d40468fe6e884436e6de233da5b1e727a69d056b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 14:55:42 -0800 Subject: [PATCH 14/56] fix typo --- src/components/tab-title/tab-title.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx index 4ae29aa0c20..79963bbe7e7 100644 --- a/src/components/tab-title/tab-title.tsx +++ b/src/components/tab-title/tab-title.tsx @@ -32,7 +32,7 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac export class TabTitle implements InteractiveComponent { //-------------------------------------------------------------------------- // - // Events + // Element // //-------------------------------------------------------------------------- From aca508fb9dc290841d5f428b8528d52dcb96b478 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 14:56:21 -0800 Subject: [PATCH 15/56] use element as focus target if shadow root has no active element --- src/tests/commonTests.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index d8ffbd5f8f0..a7dffc52c3e 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -539,7 +539,8 @@ export async function disabled(componentTagOrHtml: TagOrHTML): Promise { await expectToBeFocused(tag); const [shadowFocusableX, shadowFocusableY] = await page.$eval(tag, (element: HTMLElement) => { - const rect = element.shadowRoot.activeElement.getBoundingClientRect(); + const focusTarget = element.shadowRoot.activeElement || element; + const rect = focusTarget.getBoundingClientRect(); return [rect.x, rect.y]; }); From 2d86b4bed8a6ea9d2ab25a83c2896575ecc7b622 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 15:08:23 -0800 Subject: [PATCH 16/56] tweak updateHostInteraction + remove aria-disabled when false --- src/tests/commonTests.ts | 2 +- src/utils/interactive.spec.ts | 2 +- src/utils/interactive.ts | 16 +++++++++------- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index a7dffc52c3e..248c350f6d6 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -533,7 +533,7 @@ export async function disabled(componentTagOrHtml: TagOrHTML): Promise { expect(await page.evaluate((tag: string) => document.activeElement.matches(tag), tag)).toBe(true); } - expect(component.getAttribute("aria-disabled")).toBe("false"); + expect(component.getAttribute("aria-disabled")).toBeNull(); await page.keyboard.press("Tab"); await expectToBeFocused(tag); diff --git a/src/utils/interactive.spec.ts b/src/utils/interactive.spec.ts index 777db331e67..16c7a20c4c5 100644 --- a/src/utils/interactive.spec.ts +++ b/src/utils/interactive.spec.ts @@ -16,7 +16,7 @@ describe("interactive", () => { updateHostInteraction(fakeInteractive); expect(fakeInteractiveEl.getAttribute("tabindex")).toBeNull(); - expect(fakeInteractiveEl.getAttribute("aria-disabled")).toBe("false"); + expect(fakeInteractiveEl.getAttribute("aria-disabled")).toBeNull(); fakeInteractive.disabled = true; diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts index aa2b8cf5fb8..807762629ca 100644 --- a/src/utils/interactive.ts +++ b/src/utils/interactive.ts @@ -26,15 +26,17 @@ export interface InteractiveComponent { * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error */ export function updateHostInteraction(component: InteractiveComponent, hostIsTabbable = false): void { + if (component.disabled) { + component.el.setAttribute("tabindex", "-1"); + component.el.setAttribute("aria-disabled", "true"); + return; + } + if (hostIsTabbable) { - component.el.setAttribute("tabindex", component.disabled ? "-1" : "0"); + component.el.setAttribute("tabindex", "0"); } else { - if (component.disabled) { - component.el.setAttribute("tabindex", "-1"); - } else { - component.el.removeAttribute("tabindex"); - } + component.el.removeAttribute("tabindex"); } - component.el.setAttribute("aria-disabled", component.disabled.toString()); + component.el.removeAttribute("aria-disabled"); } From d0c62e631ed059dd38cfb85b5bdb4de3d1271006 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 15:41:25 -0800 Subject: [PATCH 17/56] update tests --- src/components/dropdown/dropdown.e2e.ts | 10 +++++++++- src/components/link/link.e2e.ts | 2 +- src/components/panel/panel.e2e.ts | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts index 1a61fe1e252..7b4b948bd54 100644 --- a/src/components/dropdown/dropdown.e2e.ts +++ b/src/components/dropdown/dropdown.e2e.ts @@ -25,7 +25,15 @@ describe("calcite-dropdown", () => { } ])); - it("can be disabled", () => disabled("calcite-dropdown")); + it("can be disabled", () => + disabled(` + Open dropdown + + Dropdown Item Content + Dropdown Item Content + Dropdown Item Content + + `)); /** * Test helper for selected calcite-dropdown items. Expects items to have IDs to test against. diff --git a/src/components/link/link.e2e.ts b/src/components/link/link.e2e.ts index 6a3b105c0e5..816d5ded724 100644 --- a/src/components/link/link.e2e.ts +++ b/src/components/link/link.e2e.ts @@ -18,7 +18,7 @@ describe("calcite-link", () => { await accessible("Go"); }); - it("can be disabled", () => disabled("calcite-link")); + it("can be disabled", () => disabled(`link`)); it("sets download attribute on internal anchor", async () => { const page = await newE2EPage(); diff --git a/src/components/panel/panel.e2e.ts b/src/components/panel/panel.e2e.ts index 85dde31fef5..7c419af4dae 100644 --- a/src/components/panel/panel.e2e.ts +++ b/src/components/panel/panel.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-panel", () => { it("has slots", () => slots("calcite-panel", SLOTS)); - it("can be disabled", () => disabled("calcite-panel")); + it("can be disabled", () => disabled(`scrolling content`)); it("honors dismissed prop", async () => { const page = await newE2EPage(); From 615ced7a346cafd25b72b9fa6ab43d8425733f8d Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 15:43:31 -0800 Subject: [PATCH 18/56] wire up tile --- src/components/tile/tile.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/tile/tile.tsx b/src/components/tile/tile.tsx index fcc53e59cfe..c4dae0ed30d 100644 --- a/src/components/tile/tile.tsx +++ b/src/components/tile/tile.tsx @@ -6,7 +6,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot content-start - A slot for adding non-actionable elements before the tile content. @@ -78,6 +78,10 @@ export class Tile implements ConditionalSlotComponent, InteractiveComponent { disconnectConditionalSlotComponent(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Render Methods From 5f9d969548bd259a905836f7822f27e3b80dff1e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 16:14:38 -0800 Subject: [PATCH 19/56] update tests --- .../combobox-item/combobox-item.e2e.ts | 2 +- .../date-picker-day/date-picker-day.tsx | 7 +------ src/components/dropdown/dropdown.e2e.ts | 16 ++++++++-------- src/components/list/list.e2e.ts | 5 ++++- .../sortable-list/sortable-list.e2e.ts | 9 +++++++-- .../tile-select-group/tile-select-group.e2e.ts | 8 +++++++- 6 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/components/combobox-item/combobox-item.e2e.ts b/src/components/combobox-item/combobox-item.e2e.ts index 24e12a12a9f..eba99a2cb82 100644 --- a/src/components/combobox-item/combobox-item.e2e.ts +++ b/src/components/combobox-item/combobox-item.e2e.ts @@ -7,5 +7,5 @@ describe("calcite-combobox-item", () => { it("has slots", () => slots("calcite-combobox-item", [], true)); - it("can be disabled", () => disabled("calcite-combobox-item")); + it("can be disabled", () => disabled("calcite-combobox-item", { focusable: false })); }); diff --git a/src/components/date-picker-day/date-picker-day.tsx b/src/components/date-picker-day/date-picker-day.tsx index 8598fca4e92..718d499c1b7 100644 --- a/src/components/date-picker-day/date-picker-day.tsx +++ b/src/components/date-picker-day/date-picker-day.tsx @@ -129,12 +129,7 @@ export class DatePickerDay implements InteractiveComponent { .join(""); const dir = getElementDir(this.el); return ( - +
diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts index 7b4b948bd54..add0767566c 100644 --- a/src/components/dropdown/dropdown.e2e.ts +++ b/src/components/dropdown/dropdown.e2e.ts @@ -26,14 +26,14 @@ describe("calcite-dropdown", () => { ])); it("can be disabled", () => - disabled(` - Open dropdown - - Dropdown Item Content - Dropdown Item Content - Dropdown Item Content - - `)); + disabled(html` + Open dropdown + + Dropdown Item Content + Dropdown Item Content + Dropdown Item Content + + `)); /** * Test helper for selected calcite-dropdown items. Expects items to have IDs to test against. diff --git a/src/components/list/list.e2e.ts b/src/components/list/list.e2e.ts index a64630488b2..3ee044a01c1 100755 --- a/src/components/list/list.e2e.ts +++ b/src/components/list/list.e2e.ts @@ -30,5 +30,8 @@ describe("calcite-list", () => { `); }); - it("can be disabled", () => disabled("calcite-list")); + it("can be disabled", () => + disabled(html` + + `)); }); diff --git a/src/components/sortable-list/sortable-list.e2e.ts b/src/components/sortable-list/sortable-list.e2e.ts index b6a160ac275..48ab3334a32 100644 --- a/src/components/sortable-list/sortable-list.e2e.ts +++ b/src/components/sortable-list/sortable-list.e2e.ts @@ -1,6 +1,6 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { accessible, disabled, hidden, renders } from "../../tests/commonTests"; -import { dragAndDrop } from "../../tests/utils"; +import { dragAndDrop, html } from "../../tests/utils"; describe("calcite-sortable-list", () => { it("renders", async () => renders("calcite-sortable-list", { display: "flex" })); @@ -9,7 +9,12 @@ describe("calcite-sortable-list", () => { it("is accessible", async () => accessible(``)); - it("can be disabled", () => disabled("calcite-sortable-list")); + it("can be disabled", () => + disabled(html` +
1
+
2
+
3
+ `)); const worksUsingMouse = async (page: E2EPage): Promise => { await dragAndDrop(page, `#one calcite-handle`, `#two calcite-handle`); diff --git a/src/components/tile-select-group/tile-select-group.e2e.ts b/src/components/tile-select-group/tile-select-group.e2e.ts index 06091c08d4e..3c159ccf429 100644 --- a/src/components/tile-select-group/tile-select-group.e2e.ts +++ b/src/components/tile-select-group/tile-select-group.e2e.ts @@ -1,4 +1,5 @@ import { accessible, defaults, disabled, reflects, renders } from "../../tests/commonTests"; +import { html } from "../../tests/utils"; describe("calcite-tile-select-group", () => { it("renders", async () => renders("calcite-tile-select-group", { display: "flex" })); @@ -10,5 +11,10 @@ describe("calcite-tile-select-group", () => { it("reflects", async () => reflects("calcite-tile-select-group", [{ propertyName: "layout", value: "horizontal" }])); - it("can be disabled", () => disabled("calcite-tile-select-group")); + it("can be disabled", () => + disabled(html` + + + + `)); }); From e6bc681968989e041436d8e61b8a0fa81fb4c49b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 16:16:53 -0800 Subject: [PATCH 20/56] update stepper item to keep host focusable --- src/components/stepper-item/stepper-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/stepper-item/stepper-item.tsx b/src/components/stepper-item/stepper-item.tsx index ab4c829dfed..0b32ec99be7 100644 --- a/src/components/stepper-item/stepper-item.tsx +++ b/src/components/stepper-item/stepper-item.tsx @@ -128,7 +128,7 @@ export class StepperItem implements InteractiveComponent { } componentDidRender(): void { - updateHostInteraction(this); + updateHostInteraction(this, true); } render(): VNode { From 48fbcced8a8c5ecdaa6cf861d8fdf6b891cbc463 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 16:19:52 -0800 Subject: [PATCH 21/56] tweak implementing components and add option to skip asserting focusable elements --- .../combobox-item/combobox-item.tsx | 6 +--- .../date-picker-month/date-picker-month.tsx | 1 + src/components/switch/switch.tsx | 13 -------- src/tests/commonTests.ts | 32 ++++++++++++++++++- 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/components/combobox-item/combobox-item.tsx b/src/components/combobox-item/combobox-item.tsx index a865192b80d..1c47795660d 100644 --- a/src/components/combobox-item/combobox-item.tsx +++ b/src/components/combobox-item/combobox-item.tsx @@ -21,7 +21,7 @@ import { disconnectConditionalSlotComponent, ConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { InteractiveComponent } from "../../utils/interactive"; /** * @slot - A slot for adding nested `calcite-combobox-item`s. @@ -98,10 +98,6 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon disconnectConditionalSlotComponent(this); } - componentDidRender(): void { - updateHostInteraction(this); - } - // -------------------------------------------------------------------------- // // Events diff --git a/src/components/date-picker-month/date-picker-month.tsx b/src/components/date-picker-month/date-picker-month.tsx index 0c6dd0f264e..883fae3d9a0 100644 --- a/src/components/date-picker-month/date-picker-month.tsx +++ b/src/components/date-picker-month/date-picker-month.tsx @@ -395,6 +395,7 @@ export class DatePickerMonth { scale={this.scale} selected={this.isSelected(date)} startOfRange={this.isStartOfRange(date)} + tabIndex={active ? 0 : -1} value={date} /> ); diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 4d161eb4b4f..b9b2ac4a4ed 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -45,11 +45,6 @@ export class Switch implements LabelableComponent, CheckableFormCompoment, Inter /** True if the switch is disabled */ @Prop({ reflect: true }) disabled = false; - @Watch("disabled") - disabledWatcher(newDisabled: boolean): void { - this.tabindex = newDisabled ? -1 : 0; - } - /** Applies to the aria-label attribute on the switch */ @Prop() label?: string; @@ -91,14 +86,6 @@ export class Switch implements LabelableComponent, CheckableFormCompoment, Inter defaultChecked: boolean; - //-------------------------------------------------------------------------- - // - // State - // - //-------------------------------------------------------------------------- - - @State() tabindex: number; - //-------------------------------------------------------------------------- // // Public Methods diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 248c350f6d6..281cc1c6b9b 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -518,12 +518,22 @@ export async function formAssociated(componentTagOrHtml: TagOrHTML, options: For } } +interface DisabledOptions { + /** + * When `true`, the test will skip assertions on internal, focusable elements. + */ + focusable: boolean; +} + /** * Helper to test the disabled prop disabling user interaction. * * @param componentTagOrHTML - the component tag or HTML markup to test against */ -export async function disabled(componentTagOrHtml: TagOrHTML): Promise { +export async function disabled( + componentTagOrHtml: TagOrHTML, + options?: DisabledOptions = { focusable: true } +): Promise { const page = await simplePageSetup(componentTagOrHtml); const tag = getTag(componentTagOrHtml); const component = await page.find(tag); @@ -535,6 +545,26 @@ export async function disabled(componentTagOrHtml: TagOrHTML): Promise { expect(component.getAttribute("aria-disabled")).toBeNull(); + if (!options.focusable) { + await page.click(tag); + + await expectToBeFocused("body"); + expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); + + component.setProperty("disabled", true); + await page.waitForChanges(); + const disabledComponentClickSpy = await component.spyOnEvent("click"); + + expect(component.getAttribute("aria-disabled")).toBe("true"); + + await page.click(tag); + await expectToBeFocused("body"); + + expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); + + return; + } + await page.keyboard.press("Tab"); await expectToBeFocused(tag); From 56df805b370a5ae144644d7eac651937f23e9af9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 17:20:47 -0800 Subject: [PATCH 22/56] beef up utils and doc --- src/assets/styles/includes.scss | 2 ++ .../combobox-item/combobox-item.e2e.ts | 2 +- src/components/dropdown/dropdown.e2e.ts | 19 +++++++++++-------- .../inline-editable/inline-editable.e2e.ts | 13 ++++++++----- src/components/list/list.e2e.ts | 9 ++++++--- .../sortable-list/sortable-list.e2e.ts | 13 ++++++++----- .../tile-select-group.e2e.ts | 13 ++++++++----- src/tests/commonTests.ts | 17 ++++++++++------- 8 files changed, 54 insertions(+), 34 deletions(-) diff --git a/src/assets/styles/includes.scss b/src/assets/styles/includes.scss index b2ad76a94f4..0fc6a3c2422 100644 --- a/src/assets/styles/includes.scss +++ b/src/assets/styles/includes.scss @@ -42,6 +42,8 @@ } } +// mixin to provide base disabled styles for interactive components +// additional styling can be passed via @content @mixin disabled() { :host([disabled]) { @apply cursor-default opacity-disabled pointer-events-none select-none; diff --git a/src/components/combobox-item/combobox-item.e2e.ts b/src/components/combobox-item/combobox-item.e2e.ts index eba99a2cb82..791749bc628 100644 --- a/src/components/combobox-item/combobox-item.e2e.ts +++ b/src/components/combobox-item/combobox-item.e2e.ts @@ -7,5 +7,5 @@ describe("calcite-combobox-item", () => { it("has slots", () => slots("calcite-combobox-item", [], true)); - it("can be disabled", () => disabled("calcite-combobox-item", { focusable: false })); + it("can be disabled", () => disabled("calcite-combobox-item", { focusTarget: false })); }); diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts index add0767566c..dfa40207c1c 100644 --- a/src/components/dropdown/dropdown.e2e.ts +++ b/src/components/dropdown/dropdown.e2e.ts @@ -26,14 +26,17 @@ describe("calcite-dropdown", () => { ])); it("can be disabled", () => - disabled(html` - Open dropdown - - Dropdown Item Content - Dropdown Item Content - Dropdown Item Content - - `)); + disabled( + html` + Open dropdown + + Dropdown Item Content + Dropdown Item Content + Dropdown Item Content + + `, + { focusTarget: "child" } + )); /** * Test helper for selected calcite-dropdown items. Expects items to have IDs to test against. diff --git a/src/components/inline-editable/inline-editable.e2e.ts b/src/components/inline-editable/inline-editable.e2e.ts index ebd56f8ed72..147edf11c1d 100644 --- a/src/components/inline-editable/inline-editable.e2e.ts +++ b/src/components/inline-editable/inline-editable.e2e.ts @@ -16,11 +16,14 @@ describe("calcite-inline-editable", () => { )); it("can be disabled", () => - disabled(html` - - - - `)); + disabled( + html` + + + + `, + { focusTarget: "child" } + )); describe("rendering permutations", () => { let page: E2EPage; diff --git a/src/components/list/list.e2e.ts b/src/components/list/list.e2e.ts index 3ee044a01c1..66afa9ff498 100755 --- a/src/components/list/list.e2e.ts +++ b/src/components/list/list.e2e.ts @@ -31,7 +31,10 @@ describe("calcite-list", () => { }); it("can be disabled", () => - disabled(html` - - `)); + disabled( + html` + + `, + { focusTarget: "child" } + )); }); diff --git a/src/components/sortable-list/sortable-list.e2e.ts b/src/components/sortable-list/sortable-list.e2e.ts index 48ab3334a32..96dd457e771 100644 --- a/src/components/sortable-list/sortable-list.e2e.ts +++ b/src/components/sortable-list/sortable-list.e2e.ts @@ -10,11 +10,14 @@ describe("calcite-sortable-list", () => { it("is accessible", async () => accessible(``)); it("can be disabled", () => - disabled(html` -
1
-
2
-
3
- `)); + disabled( + html` +
1
+
2
+
3
+ `, + { focusTarget: "child" } + )); const worksUsingMouse = async (page: E2EPage): Promise => { await dragAndDrop(page, `#one calcite-handle`, `#two calcite-handle`); diff --git a/src/components/tile-select-group/tile-select-group.e2e.ts b/src/components/tile-select-group/tile-select-group.e2e.ts index 3c159ccf429..20e250aaa8b 100644 --- a/src/components/tile-select-group/tile-select-group.e2e.ts +++ b/src/components/tile-select-group/tile-select-group.e2e.ts @@ -12,9 +12,12 @@ describe("calcite-tile-select-group", () => { it("reflects", async () => reflects("calcite-tile-select-group", [{ propertyName: "layout", value: "horizontal" }])); it("can be disabled", () => - disabled(html` - - - - `)); + disabled( + html` + + + + `, + { focusTarget: "child" } + )); }); diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 281cc1c6b9b..d4038ac0412 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -520,9 +520,9 @@ export async function formAssociated(componentTagOrHtml: TagOrHTML, options: For interface DisabledOptions { /** - * When `true`, the test will skip assertions on internal, focusable elements. + * Use this to specify whether the test should cover focusing. */ - focusable: boolean; + focusTarget: "host" | "child" | "none"; } /** @@ -532,7 +532,7 @@ interface DisabledOptions { */ export async function disabled( componentTagOrHtml: TagOrHTML, - options?: DisabledOptions = { focusable: true } + options: DisabledOptions = { focusTarget: "host" } ): Promise { const page = await simplePageSetup(componentTagOrHtml); const tag = getTag(componentTagOrHtml); @@ -545,7 +545,7 @@ export async function disabled( expect(component.getAttribute("aria-disabled")).toBeNull(); - if (!options.focusable) { + if (options.focusTarget === "none") { await page.click(tag); await expectToBeFocused("body"); @@ -566,9 +566,12 @@ export async function disabled( } await page.keyboard.press("Tab"); - await expectToBeFocused(tag); + const focusTarget = + options.focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); + expect(focusTarget).not.toBe("body"); + await expectToBeFocused(focusTarget); - const [shadowFocusableX, shadowFocusableY] = await page.$eval(tag, (element: HTMLElement) => { + const [shadowFocusableX, shadowFocusableY] = await page.$eval(focusTarget, (element: HTMLElement) => { const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); return [rect.x, rect.y]; @@ -578,7 +581,7 @@ export async function disabled( await expectToBeFocused("body"); await page.mouse.click(shadowFocusableX, shadowFocusableY); - await expectToBeFocused(tag); + await expectToBeFocused(focusTarget); expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); From 0b9d8d5c94a564420d0ceecf2a9884b3d8e64687 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 17:54:17 -0800 Subject: [PATCH 23/56] wire up updateHostInteraction regardless of implementation --- src/components/action/action.tsx | 6 +++++- src/components/button/button.tsx | 6 +++++- src/components/combobox-item/combobox-item.tsx | 6 +++++- src/components/filter/filter.tsx | 12 +++++++++++- src/components/select/select.tsx | 6 +++++- src/components/slider/slider.tsx | 3 ++- 6 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx index e182e4e2eda..0688be60d6c 100755 --- a/src/components/action/action.tsx +++ b/src/components/action/action.tsx @@ -16,7 +16,7 @@ import { Alignment, Appearance, Scale } from "../interfaces"; import { CSS, TEXT } from "./resources"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding a `calcite-icon`. @@ -134,6 +134,10 @@ export class Action implements InteractiveComponent { this.mutationObserver?.disconnect(); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Methods diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 2f275801b2d..b5f63187151 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -6,7 +6,7 @@ import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces"; import { FlipContext, Scale, Width } from "../interfaces"; import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** 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 */ @@ -147,6 +147,10 @@ export class Button implements LabelableComponent, InteractiveComponent { } } + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { const Tag = this.childElType; const loaderNode = this.hasLoader ? ( diff --git a/src/components/combobox-item/combobox-item.tsx b/src/components/combobox-item/combobox-item.tsx index 1c47795660d..a865192b80d 100644 --- a/src/components/combobox-item/combobox-item.tsx +++ b/src/components/combobox-item/combobox-item.tsx @@ -21,7 +21,7 @@ import { disconnectConditionalSlotComponent, ConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding nested `calcite-combobox-item`s. @@ -98,6 +98,10 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon disconnectConditionalSlotComponent(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Events diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index 768adf9b33f..9c4c1def904 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -13,7 +13,7 @@ import { import { debounce, forIn } from "lodash-es"; import { CSS, ICONS, TEXT } from "./resources"; import { focusElement } from "../../utils/dom"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; const filterDebounceInMs = 250; @@ -89,6 +89,16 @@ export class Filter implements InteractiveComponent { textInput: HTMLCalciteInputElement; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Events diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index 963ac027468..c0e2a8987eb 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -23,7 +23,7 @@ import { } from "../../utils/form"; import { CSS } from "./resources"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; type OptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement; type NativeOptionOrGroup = HTMLOptionElement | HTMLOptGroupElement; @@ -155,6 +155,10 @@ export class Select implements LabelableComponent, FormComponent, InteractiveCom afterConnectDefaultValueSet(this, this.selectedOption?.value ?? ""); } + componentDidRender(): void { + updateHostInteraction(this); + } + //-------------------------------------------------------------------------- // // Public Methods diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx index 551636496b8..ec26eac0b38 100644 --- a/src/components/slider/slider.tsx +++ b/src/components/slider/slider.tsx @@ -26,7 +26,7 @@ import { FormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue"; @@ -174,6 +174,7 @@ export class Slider implements LabelableComponent, FormComponent, InteractiveCom } } this.hideObscuredBoundingTickLabels(); + updateHostInteraction(this); } render(): VNode { From a961bc7a072cbbd05e4d2ba4f3672fb971f8f55b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 1 Feb 2022 18:19:42 -0800 Subject: [PATCH 24/56] update more components --- .../date-picker-month/date-picker-month.tsx | 2 +- .../input-date-picker/input-date-picker.tsx | 6 +++++- .../input-time-picker/input-time-picker.tsx | 6 +++++- src/components/pick-list/shared-list-tests.ts | 12 +++++++++++- src/components/split-button/split-button.tsx | 12 +++++++++++- 5 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/components/date-picker-month/date-picker-month.tsx b/src/components/date-picker-month/date-picker-month.tsx index 883fae3d9a0..e6ef565f78b 100644 --- a/src/components/date-picker-month/date-picker-month.tsx +++ b/src/components/date-picker-month/date-picker-month.tsx @@ -395,7 +395,7 @@ export class DatePickerMonth { scale={this.scale} selected={this.isSelected(date)} startOfRange={this.isStartOfRange(date)} - tabIndex={active ? 0 : -1} + tabIndex={active ? 0 : null} value={date} /> ); diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx index 8cf7f6bc91c..1c679f6b6ae 100644 --- a/src/components/input-date-picker/input-date-picker.tsx +++ b/src/components/input-date-picker/input-date-picker.tsx @@ -35,7 +35,7 @@ import { } from "../../utils/popper"; import { StrictModifiers, Instance as Popper } from "@popperjs/core"; import { DateRangeChange } from "../date-picker/interfaces"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; const DEFAULT_PLACEMENT = "bottom-leading"; @@ -335,6 +335,10 @@ export class InputDatePicker implements LabelableComponent, FormComponent, Inter disconnectForm(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { const { disabled } = this; const date = dateFromRange( diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx index 0147c532f95..c399f3f02cf 100644 --- a/src/components/input-time-picker/input-time-picker.tsx +++ b/src/components/input-time-picker/input-time-picker.tsx @@ -17,7 +17,7 @@ import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/t import { Scale } from "../interfaces"; import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; @Component({ tag: "calcite-input-time-picker", @@ -360,6 +360,10 @@ export class InputTimePicker implements LabelableComponent, FormComponent, Inter disconnectForm(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Render Methods diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts index 012f9972651..ff1d4334e2c 100644 --- a/src/components/pick-list/shared-list-tests.ts +++ b/src/components/pick-list/shared-list-tests.ts @@ -583,5 +583,15 @@ export function focusing(listType: ListType): void { } export function disabling(listType: ListType): void { - it("can be disabled", () => disabled(`calcite-${listType}`)); + it("can be disabled", () => + disabled( + html` + + + + `, + { + focusTarget: "child" + } + )); } diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx index 0f7ce1e663a..e3024670832 100644 --- a/src/components/split-button/split-button.tsx +++ b/src/components/split-button/split-button.tsx @@ -3,7 +3,7 @@ import { CSS } from "./resources"; import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces"; import { FlipContext, Scale, Width } from "../interfaces"; import { OverlayPositioning } from "../../utils/popper"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-dropdown` content. @@ -85,6 +85,16 @@ export class SplitButton implements InteractiveComponent { /** fired when the secondary button is clicked */ @Event() calciteSplitButtonSecondaryClick: EventEmitter; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { const widthClasses = { [CSS.container]: true, From 3421acb656873f3963182fadc60b2da055e85666 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Feb 2022 10:01:24 -0800 Subject: [PATCH 25/56] tweak test helper --- src/tests/commonTests.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index d4038ac0412..15b9ffa12f9 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -540,7 +540,8 @@ export async function disabled( const enabledComponentClickSpy = await component.spyOnEvent("click"); async function expectToBeFocused(tag: string): Promise { - expect(await page.evaluate((tag: string) => document.activeElement.matches(tag), tag)).toBe(true); + const focusedTag = await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); + expect(focusedTag).toBe(tag); } expect(component.getAttribute("aria-disabled")).toBeNull(); @@ -574,7 +575,7 @@ export async function disabled( const [shadowFocusableX, shadowFocusableY] = await page.$eval(focusTarget, (element: HTMLElement) => { const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); - return [rect.x, rect.y]; + return [rect.x + rect.width / 2, rect.y + rect.height / 2]; }); await page.keyboard.press("Tab"); From 8c44eef3a704e9359b6aaeed12e5ccf86fb04da2 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Feb 2022 10:31:45 -0800 Subject: [PATCH 26/56] fix rating test --- src/components/rating/rating.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx index f4309296abf..90d90e3b0cb 100644 --- a/src/components/rating/rating.tsx +++ b/src/components/rating/rating.tsx @@ -16,7 +16,7 @@ import { Scale } from "../interfaces"; import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { TEXT } from "./resources"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; @Component({ tag: "calcite-rating", @@ -95,6 +95,10 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom disconnectForm(this); } + componentDidRender(): void { + updateHostInteraction(this); + } + //-------------------------------------------------------------------------- // // Events @@ -159,6 +163,10 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom id={`${this.guid}-${i}`} name={this.guid} onChange={() => this.updateValue(i)} + onClick={(event) => + // click is fired from the the component's label, so we treat this as an internal event + event.stopPropagation() + } onFocus={() => { this.hasFocus = true; this.focusValue = i; From 0ad2ed1ec8087407a2abf78a0b5c73568e1fd23f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Feb 2022 12:25:50 -0800 Subject: [PATCH 27/56] prevent page redirection --- src/tests/commonTests.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 15b9ffa12f9..2c2d30e162e 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -539,6 +539,11 @@ export async function disabled( const component = await page.find(tag); const enabledComponentClickSpy = await component.spyOnEvent("click"); + await page.$eval(tag, (el) => { + // we prevent the default behavior to avoid having a component redirect the page + el.addEventListener("click", (event) => event.preventDefault()); + }); + async function expectToBeFocused(tag: string): Promise { const focusedTag = await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); expect(focusedTag).toBe(tag); From bb398deea42b48ade2d7a393036dd419b57cdc3e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Feb 2022 14:37:42 -0800 Subject: [PATCH 28/56] tweak helper --- src/tests/commonTests.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 2c2d30e162e..ba962409e0f 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -583,7 +583,9 @@ export async function disabled( return [rect.x + rect.width / 2, rect.y + rect.height / 2]; }); + await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); + await page.keyboard.up("Shift"); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableX, shadowFocusableY); From 6442cd89bc82b7184817ce072f370633a6b054d9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Feb 2022 15:57:37 -0800 Subject: [PATCH 29/56] only prevent default click behavior for internal tags --- src/tests/commonTests.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index ba962409e0f..f86fac00fc0 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -540,8 +540,18 @@ export async function disabled( const enabledComponentClickSpy = await component.spyOnEvent("click"); await page.$eval(tag, (el) => { - // we prevent the default behavior to avoid having a component redirect the page - el.addEventListener("click", (event) => event.preventDefault()); + el.addEventListener( + "click", + (event) => { + const path = event.composedPath() as HTMLElement[]; + + if (path.find((el) => el?.tagName === "A")) { + // we prevent the default behavior to avoid a page redirect + el.addEventListener("click", (event) => event.preventDefault(), { once: true }); + } + }, + true + ); }); async function expectToBeFocused(tag: string): Promise { From 5a8a9765322714e57c7184366048e6a175b5aa87 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Feb 2022 17:10:38 -0800 Subject: [PATCH 30/56] wire up missing components --- src/components/fab/fab.tsx | 12 +++++++++++- src/components/inline-editable/inline-editable.tsx | 6 +++++- src/components/radio-group/radio-group.tsx | 8 ++++++-- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/fab/fab.tsx b/src/components/fab/fab.tsx index 4bb4f103f36..f45139e6224 100755 --- a/src/components/fab/fab.tsx +++ b/src/components/fab/fab.tsx @@ -3,7 +3,7 @@ import { Appearance, Scale } from "../interfaces"; import { ButtonColor } from "../button/interfaces"; import { CSS, ICONS } from "./resources"; import { focusElement } from "../../utils/dom"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; @Component({ tag: "calcite-fab", @@ -73,6 +73,16 @@ export class Fab implements InteractiveComponent { private buttonEl: HTMLElement; + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidRender(): void { + updateHostInteraction(this); + } + // -------------------------------------------------------------------------- // // Methods diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index 532b2e586c9..e3caccf27d9 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -15,7 +15,7 @@ import { Scale } from "../interfaces"; import { TEXT, CSS } from "./resources"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; /** * @slot - A slot for adding a `calcite-input`. @@ -107,6 +107,10 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent this.mutationObserver?.disconnect(); } + componentDidRender(): void { + updateHostInteraction(this); + } + render(): VNode { return (
+ From 880e548c4783f1062dd651a6d4365da5629eb5ff Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 3 Feb 2022 18:47:26 -0800 Subject: [PATCH 31/56] remove unused import --- src/components/switch/switch.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index b9b2ac4a4ed..7d1287c6a99 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -7,7 +7,6 @@ import { Host, Method, Prop, - State, VNode, Watch } from "@stencil/core"; From f32244f0d3bdcb27fdca9c1a7df525c0d338c3e8 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 3 Feb 2022 18:48:45 -0800 Subject: [PATCH 32/56] skip scrim for disabled lists --- src/components/pick-list/shared-list-render.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pick-list/shared-list-render.tsx b/src/components/pick-list/shared-list-render.tsx index 5b193adc6f6..c632f659e8d 100644 --- a/src/components/pick-list/shared-list-render.tsx +++ b/src/components/pick-list/shared-list-render.tsx @@ -44,7 +44,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes ) : null} - {loading || disabled ? : null} + {loading ? : null} {defaultSlot} From 8018e22741e9e922327db215ba20358cc2f2ecfc Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 3 Feb 2022 20:06:39 -0800 Subject: [PATCH 33/56] tweak helper --- src/tests/commonTests.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index f86fac00fc0..2b3e4791fda 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -587,18 +587,20 @@ export async function disabled( expect(focusTarget).not.toBe("body"); await expectToBeFocused(focusTarget); - const [shadowFocusableX, shadowFocusableY] = await page.$eval(focusTarget, (element: HTMLElement) => { + const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(focusTarget, (element: HTMLElement) => { const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); return [rect.x + rect.width / 2, rect.y + rect.height / 2]; }); - await page.keyboard.down("Shift"); - await page.keyboard.press("Tab"); - await page.keyboard.up("Shift"); + async function resetFocus(): Promise { + await page.mouse.click(0, 0); + } + + await resetFocus(); await expectToBeFocused("body"); - await page.mouse.click(shadowFocusableX, shadowFocusableY); + await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); await expectToBeFocused(focusTarget); expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); @@ -609,14 +611,11 @@ export async function disabled( expect(component.getAttribute("aria-disabled")).toBe("true"); - await page.$eval("body", (body: HTMLBodyElement) => - // use click() to avoid having Puppeteer click on the test component - body.click() - ); + await resetFocus(); await page.keyboard.press("Tab"); await expectToBeFocused("body"); - await page.mouse.click(shadowFocusableX, shadowFocusableY); + await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); From b75ffb146a333a2907fd1202b913e38c3927feab Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 3 Feb 2022 20:07:53 -0800 Subject: [PATCH 34/56] fix tests --- src/components/combobox-item/combobox-item.e2e.ts | 2 +- src/components/radio-button/radio-button.tsx | 2 +- src/components/switch/switch.tsx | 1 + src/components/tile-select/tile-select.tsx | 2 +- src/components/tile/tile.e2e.ts | 3 +-- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/combobox-item/combobox-item.e2e.ts b/src/components/combobox-item/combobox-item.e2e.ts index 791749bc628..10bcbcbe025 100644 --- a/src/components/combobox-item/combobox-item.e2e.ts +++ b/src/components/combobox-item/combobox-item.e2e.ts @@ -7,5 +7,5 @@ describe("calcite-combobox-item", () => { it("has slots", () => slots("calcite-combobox-item", [], true)); - it("can be disabled", () => disabled("calcite-combobox-item", { focusTarget: false })); + it("can be disabled", () => disabled("calcite-combobox-item", { focusTarget: "none" })); }); diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index 046fb982a74..8d9103f8ba1 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -140,7 +140,7 @@ export class RadioButton //-------------------------------------------------------------------------- selectItem = (items: HTMLCalciteRadioButtonElement[], selectedIndex: number): void => { - items[selectedIndex].click(); + items[selectedIndex].checked = true; }; queryButtons = (): HTMLCalciteRadioButtonElement[] => { diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 7d1287c6a99..8ba297109a3 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -188,6 +188,7 @@ export class Switch implements LabelableComponent, CheckableFormCompoment, Inter onClick={this.clickHandler} ref={this.setSwitchEl} role="switch" + tabIndex={0} >
diff --git a/src/components/tile-select/tile-select.tsx b/src/components/tile-select/tile-select.tsx index 2ef91e0356b..2b3b49b37d2 100644 --- a/src/components/tile-select/tile-select.tsx +++ b/src/components/tile-select/tile-select.tsx @@ -188,7 +188,7 @@ export class TileSelect implements InteractiveComponent { const target = event.target as HTMLElement; const targets = ["calcite-tile", "calcite-tile-select"]; if (targets.includes(target.localName)) { - this.input.click(); + this.input.checked = true; } } diff --git a/src/components/tile/tile.e2e.ts b/src/components/tile/tile.e2e.ts index 520a880da6d..07eb41f8ef5 100644 --- a/src/components/tile/tile.e2e.ts +++ b/src/components/tile/tile.e2e.ts @@ -1,6 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests"; -import { html } from "../../tests/utils"; import { SLOTS } from "./resources"; describe("calcite-tile", () => { @@ -30,7 +29,7 @@ describe("calcite-tile", () => { it("honors hidden attribute", async () => hidden("calcite-tile")); - it("can be disabled", () => disabled("calcite-tile")); + it("can be disabled", () => disabled("")); it("renders without a link by default", async () => { const page = await newE2EPage(); From 4c6a657be41cba6a8f4e9318146290fafd02575e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 3 Feb 2022 21:37:35 -0800 Subject: [PATCH 35/56] fix tests and tweak util --- .../date-picker-day/date-picker-day.e2e.ts | 15 ++++++++++- .../date-picker-day/date-picker-day.tsx | 6 ++++- .../date-picker-month/date-picker-month.tsx | 1 - src/components/radio-button/radio-button.tsx | 2 +- src/components/tile-select/tile-select.tsx | 2 +- src/tests/commonTests.ts | 25 ++++++++++++++++--- src/tests/utils.ts | 14 ++++++++++- src/utils/interactive.ts | 9 +++++-- 8 files changed, 62 insertions(+), 12 deletions(-) diff --git a/src/components/date-picker-day/date-picker-day.e2e.ts b/src/components/date-picker-day/date-picker-day.e2e.ts index c00824412b9..19655d068ee 100644 --- a/src/components/date-picker-day/date-picker-day.e2e.ts +++ b/src/components/date-picker-day/date-picker-day.e2e.ts @@ -1,5 +1,18 @@ import { disabled } from "../../tests/commonTests"; +import { newProgrammaticE2EPage } from "../../tests/utils"; describe("calcite-date-picker-day", () => { - it("can be disabled", () => disabled("calcite-date-picker-day")); + it("can be disabled", async () => { + const page = await newProgrammaticE2EPage(); + await page.evaluate(() => { + const dateEl = document.createElement("calcite-date-picker-day") as HTMLCalciteDatePickerDayElement; + dateEl.active = true; + dateEl.day = 3; + dateEl.localeData = { numerals: "0123456789" } as HTMLCalciteDatePickerDayElement["localeData"]; + document.body.append(dateEl); + }); + await page.waitForChanges(); + + return disabled({ tag: "calcite-date-picker-day", page }); + }); }); diff --git a/src/components/date-picker-day/date-picker-day.tsx b/src/components/date-picker-day/date-picker-day.tsx index 718d499c1b7..a8550d45bc1 100644 --- a/src/components/date-picker-day/date-picker-day.tsx +++ b/src/components/date-picker-day/date-picker-day.tsx @@ -142,6 +142,10 @@ export class DatePickerDay implements InteractiveComponent { } componentDidRender(): void { - updateHostInteraction(this); + updateHostInteraction(this, this.isTabbable); + } + + isTabbable(): boolean { + return this.active; } } diff --git a/src/components/date-picker-month/date-picker-month.tsx b/src/components/date-picker-month/date-picker-month.tsx index e6ef565f78b..0c6dd0f264e 100644 --- a/src/components/date-picker-month/date-picker-month.tsx +++ b/src/components/date-picker-month/date-picker-month.tsx @@ -395,7 +395,6 @@ export class DatePickerMonth { scale={this.scale} selected={this.isSelected(date)} startOfRange={this.isStartOfRange(date)} - tabIndex={active ? 0 : null} value={date} /> ); diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index 8d9103f8ba1..046fb982a74 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -140,7 +140,7 @@ export class RadioButton //-------------------------------------------------------------------------- selectItem = (items: HTMLCalciteRadioButtonElement[], selectedIndex: number): void => { - items[selectedIndex].checked = true; + items[selectedIndex].click(); }; queryButtons = (): HTMLCalciteRadioButtonElement[] => { diff --git a/src/components/tile-select/tile-select.tsx b/src/components/tile-select/tile-select.tsx index 2b3b49b37d2..2ef91e0356b 100644 --- a/src/components/tile-select/tile-select.tsx +++ b/src/components/tile-select/tile-select.tsx @@ -188,7 +188,7 @@ export class TileSelect implements InteractiveComponent { const target = event.target as HTMLElement; const targets = ["calcite-tile", "calcite-tile-select"]; if (targets.includes(target.localName)) { - this.input.checked = true; + this.input.click(); } } diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 2b3e4791fda..ca97ea92148 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -12,6 +12,10 @@ type ComponentTag = keyof JSX.IntrinsicElements; type AxeOwningWindow = GlobalTestProps<{ axe: typeof axe }>; type ComponentHTML = string; type TagOrHTML = ComponentTag | ComponentHTML; +type TagAndPage = { + tag: ComponentTag; + page: E2EPage; +}; export const HYDRATED_ATTR = config.hydratedFlag.name; @@ -525,17 +529,28 @@ interface DisabledOptions { focusTarget: "host" | "child" | "none"; } +async function getTagAndPage(componentSetup: TagOrHTML | TagAndPage): Promise { + if (typeof componentSetup === "string") { + const page = await simplePageSetup(componentSetup); + const tag = getTag(componentSetup); + + return { page, tag }; + } + + return componentSetup; +} + /** * Helper to test the disabled prop disabling user interaction. * * @param componentTagOrHTML - the component tag or HTML markup to test against */ export async function disabled( - componentTagOrHtml: TagOrHTML, + componentSetup: TagOrHTML | TagAndPage, options: DisabledOptions = { focusTarget: "host" } ): Promise { - const page = await simplePageSetup(componentTagOrHtml); - const tag = getTag(componentTagOrHtml); + const { page, tag } = await getTagAndPage(componentSetup); + const component = await page.find(tag); const enabledComponentClickSpy = await component.spyOnEvent("click"); @@ -603,7 +618,9 @@ export async function disabled( await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); await expectToBeFocused(focusTarget); - expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); + // some components emit more than one click event, + // so we check if at least one event is received + expect(enabledComponentClickSpy.length).toBeGreaterThanOrEqual(1); component.setProperty("disabled", true); await page.waitForChanges(); diff --git a/src/tests/utils.ts b/src/tests/utils.ts index 4ac23a7d7cb..77aab72da97 100644 --- a/src/tests/utils.ts +++ b/src/tests/utils.ts @@ -1,4 +1,4 @@ -import { E2EElement, E2EPage } from "@stencil/core/testing"; +import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; import { BoundingBox, JSONObject } from "puppeteer"; import dedent from "dedent"; @@ -328,3 +328,15 @@ export async function visualizeMouseCursor(page: E2EPage): Promise { export async function waitForAnimationFrame(): Promise { return new Promise((resolve) => requestAnimationFrame(() => resolve())); } + +/** + * Creates an E2E page for tests that need to create and set up elements programmatically. + */ +export async function newProgrammaticE2EPage(): Promise { + const page = await newE2EPage(); + // we need to initialize the page with any component to ensure they are available in the browser context + await page.setContent(""); + await page.evaluate(() => document.querySelector("calcite-icon").remove()); + + return page; +} diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts index 807762629ca..3c635f7e83a 100644 --- a/src/utils/interactive.ts +++ b/src/utils/interactive.ts @@ -15,6 +15,8 @@ export interface InteractiveComponent { disabled: boolean; } +type Predicate = () => boolean; + /** * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility. * @@ -25,14 +27,17 @@ export interface InteractiveComponent { * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead. * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error */ -export function updateHostInteraction(component: InteractiveComponent, hostIsTabbable = false): void { +export function updateHostInteraction( + component: InteractiveComponent, + hostIsTabbable: boolean | Predicate = false +): void { if (component.disabled) { component.el.setAttribute("tabindex", "-1"); component.el.setAttribute("aria-disabled", "true"); return; } - if (hostIsTabbable) { + if (hostIsTabbable === true || (typeof hostIsTabbable === "function" && hostIsTabbable.call(component))) { component.el.setAttribute("tabindex", "0"); } else { component.el.removeAttribute("tabindex"); From 503d8118fade4776e9da6acb5314d868eeb660db Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 09:57:32 -0800 Subject: [PATCH 36/56] tweak util --- src/tests/commonTests.ts | 41 +++++++++++++++++++++++++++++++++------- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index ca97ea92148..db924b85ff5 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -522,11 +522,18 @@ export async function formAssociated(componentTagOrHtml: TagOrHTML, options: For } } +interface TabAndClickTargets { + tab: string; + click: string; +} + +type FocusTarget = "host" | "child" | "none"; + interface DisabledOptions { /** * Use this to specify whether the test should cover focusing. */ - focusTarget: "host" | "child" | "none"; + focusTarget: FocusTarget | TabAndClickTargets; } async function getTagAndPage(componentSetup: TagOrHTML | TagAndPage): Promise { @@ -578,6 +585,7 @@ export async function disabled( if (options.focusTarget === "none") { await page.click(tag); + await page.waitForChanges(); await expectToBeFocused("body"); expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); @@ -589,6 +597,7 @@ export async function disabled( expect(component.getAttribute("aria-disabled")).toBe("true"); await page.click(tag); + await page.waitForChanges(); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); @@ -596,13 +605,27 @@ export async function disabled( return; } + async function getFocusTarget(focusTarget: FocusTarget): Promise { + return focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); + } + await page.keyboard.press("Tab"); - const focusTarget = - options.focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); - expect(focusTarget).not.toBe("body"); - await expectToBeFocused(focusTarget); + await page.waitForChanges(); - const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(focusTarget, (element: HTMLElement) => { + let tabFocusTarget: string; + let clickFocusTarget: string; + + if (typeof options.focusTarget === "object") { + tabFocusTarget = options.focusTarget.tab; + clickFocusTarget = options.focusTarget.click; + } else { + tabFocusTarget = clickFocusTarget = await getFocusTarget(options.focusTarget); + } + + expect(tabFocusTarget).not.toBe("body"); + await expectToBeFocused(tabFocusTarget); + + const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(tabFocusTarget, (element: HTMLElement) => { const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); return [rect.x + rect.width / 2, rect.y + rect.height / 2]; @@ -610,13 +633,15 @@ export async function disabled( async function resetFocus(): Promise { await page.mouse.click(0, 0); + await page.waitForChanges(); } await resetFocus(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await expectToBeFocused(focusTarget); + await page.waitForChanges(); + await expectToBeFocused(clickFocusTarget); // some components emit more than one click event, // so we check if at least one event is received @@ -630,9 +655,11 @@ export async function disabled( await resetFocus(); await page.keyboard.press("Tab"); + await page.waitForChanges(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); + await page.waitForChanges(); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); From 62b299488cf5272d365a41063408d6cb89297ce1 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 09:58:18 -0800 Subject: [PATCH 37/56] fix tests --- src/components/color-picker/color-picker.e2e.ts | 2 +- src/components/inline-editable/inline-editable.e2e.ts | 2 +- src/components/inline-editable/inline-editable.tsx | 4 ---- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts index 1216b4e28a5..56964941bb3 100644 --- a/src/components/color-picker/color-picker.e2e.ts +++ b/src/components/color-picker/color-picker.e2e.ts @@ -163,7 +163,7 @@ describe("calcite-color-picker", () => { } ])); - it("can be disabled", () => disabled("calcite-color-picker")); + it("can be disabled", () => disabled("")); it("emits event when value changes", async () => { const page = await newE2EPage({ diff --git a/src/components/inline-editable/inline-editable.e2e.ts b/src/components/inline-editable/inline-editable.e2e.ts index 147edf11c1d..53c0f8f2efc 100644 --- a/src/components/inline-editable/inline-editable.e2e.ts +++ b/src/components/inline-editable/inline-editable.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-inline-editable", () => { `, - { focusTarget: "child" } + { focusTarget: { tab: "calcite-inline-editable", click: "calcite-input" } } )); describe("rendering permutations", () => { diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index e3caccf27d9..95cef7c8b08 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -307,7 +307,6 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent } if (!!e.shiftKey && e.target === this.cancelEditingButton) { e.preventDefault(); - e.stopPropagation(); this.inputElement?.setFocus(); } } @@ -318,13 +317,11 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent private cancelEditingHandler = async (e: MouseEvent) => { e.preventDefault(); - e.stopPropagation(); this.cancelEditing(); }; private enableEditingHandler = async (e: MouseEvent) => { e.preventDefault(); - e.stopPropagation(); if (this.disabled) { return; } @@ -335,7 +332,6 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent private confirmChangesHandler = async (e: MouseEvent) => { e.preventDefault(); - e.stopPropagation(); this.calciteInlineEditableEditConfirm.emit(); try { if (this.afterConfirm) { From 84c8ea5bdb0b1e385d4291f08f50eafae54b05e8 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 10:21:25 -0800 Subject: [PATCH 38/56] tweaks --- src/components/radio-group/radio-group.e2e.ts | 10 +++++++++- src/tests/commonTests.ts | 8 ++++---- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/radio-group/radio-group.e2e.ts b/src/components/radio-group/radio-group.e2e.ts index a42da8a8fbb..46a63b271f3 100644 --- a/src/components/radio-group/radio-group.e2e.ts +++ b/src/components/radio-group/radio-group.e2e.ts @@ -15,7 +15,15 @@ describe("calcite-radio-group", () => { { focusTargetSelector: "calcite-radio-group-item" } )); - it("can be disabled", () => disabled("calcite-radio-group")); + it("can be disabled", () => + disabled( + html` + + + + `, + { focusTarget: "child" } + )); it("does not require an item to be checked", async () => { const page = await newE2EPage(); diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index db924b85ff5..47ac3bc1d0b 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -631,12 +631,12 @@ export async function disabled( return [rect.x + rect.width / 2, rect.y + rect.height / 2]; }); - async function resetFocus(): Promise { - await page.mouse.click(0, 0); + async function clearFocus(): Promise { + await page.evaluate(() => (document.activeElement as HTMLElement)?.blur()); await page.waitForChanges(); } - await resetFocus(); + await clearFocus(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); @@ -653,7 +653,7 @@ export async function disabled( expect(component.getAttribute("aria-disabled")).toBe("true"); - await resetFocus(); + await clearFocus(); await page.keyboard.press("Tab"); await page.waitForChanges(); await expectToBeFocused("body"); From 9d285ba6f5b72e226c319a1cd6e2c371291965cd Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 10:30:39 -0800 Subject: [PATCH 39/56] fix test --- src/components/tile-select/tile-select.e2e.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/tile-select/tile-select.e2e.ts b/src/components/tile-select/tile-select.e2e.ts index d132c62cf49..a482366c4ea 100644 --- a/src/components/tile-select/tile-select.e2e.ts +++ b/src/components/tile-select/tile-select.e2e.ts @@ -32,7 +32,13 @@ describe("calcite-tile-select", () => { it("honors hidden attribute", async () => hidden("calcite-tile-select")); - it("can be disabled", () => disabled("calcite-tile-select")); + it("can be disabled", () => + disabled( + "calcite-tile-select", + + /* focusing on child since tile appends to light DOM */ + { focusTarget: "child" } + )); it("renders a calcite-tile", async () => { const page = await newE2EPage(); From 0c87e8dd96388d7da907c5fd4d27fac5d0122c85 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 11:08:03 -0800 Subject: [PATCH 40/56] add frame delay before running assertions --- src/tests/commonTests.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 47ac3bc1d0b..bed415dd455 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -3,7 +3,7 @@ import { JSX } from "../components"; import { toHaveNoViolations } from "jest-axe"; import axe from "axe-core"; import { config } from "../../stencil.config"; -import { GlobalTestProps, html } from "./utils"; +import { GlobalTestProps, html, waitForAnimationFrame } from "./utils"; import { hiddenFormInputSlotName } from "../utils/form"; expect.extend(toHaveNoViolations); @@ -586,18 +586,21 @@ export async function disabled( if (options.focusTarget === "none") { await page.click(tag); await page.waitForChanges(); + await waitForAnimationFrame(); await expectToBeFocused("body"); expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); component.setProperty("disabled", true); await page.waitForChanges(); + await waitForAnimationFrame(); const disabledComponentClickSpy = await component.spyOnEvent("click"); expect(component.getAttribute("aria-disabled")).toBe("true"); await page.click(tag); await page.waitForChanges(); + await waitForAnimationFrame(); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); @@ -611,6 +614,7 @@ export async function disabled( await page.keyboard.press("Tab"); await page.waitForChanges(); + await waitForAnimationFrame(); let tabFocusTarget: string; let clickFocusTarget: string; @@ -634,6 +638,7 @@ export async function disabled( async function clearFocus(): Promise { await page.evaluate(() => (document.activeElement as HTMLElement)?.blur()); await page.waitForChanges(); + await waitForAnimationFrame(); } await clearFocus(); @@ -641,6 +646,7 @@ export async function disabled( await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); await page.waitForChanges(); + await waitForAnimationFrame(); await expectToBeFocused(clickFocusTarget); // some components emit more than one click event, @@ -649,6 +655,7 @@ export async function disabled( component.setProperty("disabled", true); await page.waitForChanges(); + await waitForAnimationFrame(); const disabledComponentClickSpy = await component.spyOnEvent("click"); expect(component.getAttribute("aria-disabled")).toBe("true"); @@ -656,10 +663,12 @@ export async function disabled( await clearFocus(); await page.keyboard.press("Tab"); await page.waitForChanges(); + await waitForAnimationFrame(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); await page.waitForChanges(); + await waitForAnimationFrame(); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); From 88d6a8485bceb4bc7c69709f94e4620af61876db Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 13:44:27 -0800 Subject: [PATCH 41/56] blur child element of disabled parent --- src/utils/interactive.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts index 3c635f7e83a..60d48122dbc 100644 --- a/src/utils/interactive.ts +++ b/src/utils/interactive.ts @@ -34,6 +34,11 @@ export function updateHostInteraction( if (component.disabled) { component.el.setAttribute("tabindex", "-1"); component.el.setAttribute("aria-disabled", "true"); + + if (component.el.contains(document.activeElement)) { + (document.activeElement as HTMLElement).blur(); + } + return; } From 3931085294ff2c9bb61d7c7ca74d8ffe0bbf912e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 16:53:08 -0800 Subject: [PATCH 42/56] tweak helper --- src/utils/interactive.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts index 60d48122dbc..8dd52058dac 100644 --- a/src/utils/interactive.ts +++ b/src/utils/interactive.ts @@ -15,7 +15,7 @@ export interface InteractiveComponent { disabled: boolean; } -type Predicate = () => boolean; +type HostIsTabbablePredicate = () => boolean; /** * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility. @@ -29,7 +29,7 @@ type Predicate = () => boolean; */ export function updateHostInteraction( component: InteractiveComponent, - hostIsTabbable: boolean | Predicate = false + hostIsTabbable: boolean | HostIsTabbablePredicate = false ): void { if (component.disabled) { component.el.setAttribute("tabindex", "-1"); @@ -42,7 +42,9 @@ export function updateHostInteraction( return; } - if (hostIsTabbable === true || (typeof hostIsTabbable === "function" && hostIsTabbable.call(component))) { + if (typeof hostIsTabbable === "function") { + component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1"); + } else if (hostIsTabbable === true) { component.el.setAttribute("tabindex", "0"); } else { component.el.removeAttribute("tabindex"); From 548f37832a8825fbbd5b7de7452cfb0cfe8f820b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 17:10:20 -0800 Subject: [PATCH 43/56] fix inline-editable test --- src/components/inline-editable/inline-editable.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index 95cef7c8b08..6c197f52371 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -161,6 +161,7 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent label={this.intlConfirmChanges} loading={this.loading} onClick={this.confirmChangesHandler} + ref={(el) => (this.confirmEditingButton = el)} scale={this.scale} /> ]} @@ -219,6 +220,8 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent private cancelEditingButton: HTMLCalciteButtonElement; + private confirmEditingButton: HTMLCalciteButtonElement; + labelEl: HTMLCalciteLabelElement; mutationObserver = createObserver("mutation", () => this.mutationObserverCallback()); @@ -321,10 +324,15 @@ export class InlineEditable implements InteractiveComponent, LabelableComponent }; private enableEditingHandler = async (e: MouseEvent) => { - e.preventDefault(); - if (this.disabled) { + if ( + this.disabled || + e.target === this.cancelEditingButton || + e.target === this.confirmEditingButton + ) { return; } + + e.preventDefault(); if (!this.editingEnabled) { this.enableEditing(); } From 3da8445716237dfcdab618674b381b1f439c9645 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 17:10:56 -0800 Subject: [PATCH 44/56] add missing interface to color picker --- src/components/color-picker/color-picker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 8b44eedc140..62155f588c7 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -29,7 +29,7 @@ import { colorEqual, CSSColorMode, Format, normalizeHex, parseMode, SupportedMod import { throttle } from "lodash-es"; import { clamp } from "../../utils/math"; -import { updateHostInteraction } from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; const throttleFor60FpsInMs = 16; const defaultValue = normalizeHex(DEFAULT_COLOR.hex()); @@ -40,7 +40,7 @@ const defaultFormat = "auto"; styleUrl: "color-picker.scss", shadow: true }) -export class ColorPicker { +export class ColorPicker implements InteractiveComponent { //-------------------------------------------------------------------------- // // Element From 477a49406ca4f2cdc17a84a5288d6d571521010b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 18:53:57 -0800 Subject: [PATCH 45/56] restore link internal tabindex --- src/components/link/link.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index a6c49ae377d..2e335d0d1a7 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -99,6 +99,7 @@ export class Link implements InteractiveComponent { const Tag = this.childElType; const role = this.childElType === "span" ? "link" : null; + const tabIndex = this.childElType === "span" ? 0 : null; return ( @@ -113,6 +114,7 @@ export class Link implements InteractiveComponent { ref={this.storeTagRef} rel={Tag === "a" && this.rel} role={role} + tabIndex={tabIndex} target={Tag === "a" && this.target} > {this.iconStart ? iconStartEl : null} From d372e64ebd192938c663fe56b18882764a1cb9bc Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 19:08:54 -0800 Subject: [PATCH 46/56] tweak focus order reset logic --- src/tests/commonTests.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index bed415dd455..69cdb8227f2 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -635,13 +635,14 @@ export async function disabled( return [rect.x + rect.width / 2, rect.y + rect.height / 2]; }); - async function clearFocus(): Promise { - await page.evaluate(() => (document.activeElement as HTMLElement)?.blur()); + async function resetFocusOrder(): Promise { + // test page has default margin, so clicking on 0,0 will not hit the test element + await page.mouse.click(0, 0); await page.waitForChanges(); await waitForAnimationFrame(); } - await clearFocus(); + await resetFocusOrder(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); @@ -660,7 +661,7 @@ export async function disabled( expect(component.getAttribute("aria-disabled")).toBe("true"); - await clearFocus(); + await resetFocusOrder(); await page.keyboard.press("Tab"); await page.waitForChanges(); await waitForAnimationFrame(); From 915cc2757725fd36742a50ce886b4a77174a84ad Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 20:08:53 -0800 Subject: [PATCH 47/56] fix dropdown test --- src/components/dropdown/dropdown.tsx | 9 ++++++--- src/tests/commonTests.ts | 8 +++++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 30e6bc45298..d5cee22368b 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -230,7 +230,7 @@ export class Dropdown implements InteractiveComponent { return; } - this.closeCalciteDropdown(); + this.closeCalciteDropdown(false); } @Listen("calciteDropdownCloseRequest") @@ -488,9 +488,12 @@ export class Dropdown implements InteractiveComponent { return maxScrollerHeight; } - private closeCalciteDropdown() { + private closeCalciteDropdown(focusTrigger = true) { this.active = false; - focusElement(this.triggers[0]); + + if (focusTrigger) { + focusElement(this.triggers[0]); + } } private focusOnFirstActiveOrFirstItem = (): void => { diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 69cdb8227f2..65affb87443 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -560,6 +560,10 @@ export async function disabled( const component = await page.find(tag); const enabledComponentClickSpy = await component.spyOnEvent("click"); + await page.addStyleTag({ + // skip animations/transitions + content: `:root { --calcite-duration-factor: 0; }` + }); await page.$eval(tag, (el) => { el.addEventListener( @@ -632,7 +636,9 @@ export async function disabled( const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(tabFocusTarget, (element: HTMLElement) => { const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); - return [rect.x + rect.width / 2, rect.y + rect.height / 2]; + + console.log(Math.floor(rect.x + rect.width / 2), Math.floor(rect.y + rect.height / 2)); + return [Math.floor(rect.x + rect.width / 2), Math.floor(rect.y + rect.height / 2)]; }); async function resetFocusOrder(): Promise { From 6972039c2ad48a60723eafa6eaea1109d904121b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 20:16:44 -0800 Subject: [PATCH 48/56] fix list-item test --- src/components/list-item/list-item.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-item/list-item.e2e.ts b/src/components/list-item/list-item.e2e.ts index 68f912ca0ee..d34f0cbbe28 100755 --- a/src/components/list-item/list-item.e2e.ts +++ b/src/components/list-item/list-item.e2e.ts @@ -35,7 +35,7 @@ describe("calcite-list-item", () => { it("has slots", () => slots("calcite-list-item", SLOTS)); - it("can be disabled", () => disabled("calcite-list-item")); + it("can be disabled", () => disabled(``)); it("renders content node when label is provided", async () => { const page = await newE2EPage({ html: `` }); From 0a717efef8d85905e20f71820ac132f770e7031d Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 20:29:31 -0800 Subject: [PATCH 49/56] fix color-picker test --- src/components/color-picker/color-picker.tsx | 9 +++++++++ src/tests/commonTests.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 62155f588c7..3f82cc809e7 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -302,6 +302,8 @@ export class ColorPicker implements InteractiveComponent { private hueThumbState: "idle" | "hover" | "drag" = "idle"; + private hueScopeNode: HTMLDivElement; + private internalColorUpdateContext: "internal" | "initial" | null = null; private previousColor: InternalColor | null; @@ -522,9 +524,11 @@ export class ColorPicker implements InteractiveComponent { if (region === "color-field") { this.hueThumbState = "drag"; this.captureColorFieldColor(offsetX, offsetY); + this.colorFieldScopeNode.focus(); } else if (region === "slider") { this.sliderThumbState = "drag"; this.captureHueSliderColor(offsetX); + this.hueScopeNode.focus(); } // prevent text selection outside of color field & slider area @@ -798,6 +802,7 @@ export class ColorPicker implements InteractiveComponent { aria-valuenow={color?.round().hue() || DEFAULT_COLOR.round().hue()} class={{ [CSS.scope]: true, [CSS.hueScope]: true }} onKeyDown={this.handleHueScopeKeyDown} + ref={this.storeHueScope} role="slider" style={{ top: `${hueTop}px`, left: `${hueLeft}px` }} tabindex="0" @@ -902,6 +907,10 @@ export class ColorPicker implements InteractiveComponent { this.colorFieldScopeNode = node; }; + private storeHueScope = (node: HTMLDivElement): void => { + this.hueScopeNode = node; + }; + private renderChannelsTabTitle = (channelMode: this["channelMode"]): VNode => { const { channelMode: activeChannelMode, intlRgb, intlHsv } = this; const active = channelMode === activeChannelMode; diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 65affb87443..e8c6d1446ea 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -637,7 +637,6 @@ export async function disabled( const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); - console.log(Math.floor(rect.x + rect.width / 2), Math.floor(rect.y + rect.height / 2)); return [Math.floor(rect.x + rect.width / 2), Math.floor(rect.y + rect.height / 2)]; }); @@ -654,6 +653,7 @@ export async function disabled( await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); await page.waitForChanges(); await waitForAnimationFrame(); + await expectToBeFocused(clickFocusTarget); // some components emit more than one click event, From 92cf2ecfe597d75727a01ea0e84d40a866bc9313 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 20:32:20 -0800 Subject: [PATCH 50/56] remove unnecessary delays --- src/tests/commonTests.ts | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index e8c6d1446ea..4fba2d493bb 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -589,22 +589,17 @@ export async function disabled( if (options.focusTarget === "none") { await page.click(tag); - await page.waitForChanges(); - await waitForAnimationFrame(); - await expectToBeFocused("body"); + expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1); component.setProperty("disabled", true); await page.waitForChanges(); - await waitForAnimationFrame(); const disabledComponentClickSpy = await component.spyOnEvent("click"); expect(component.getAttribute("aria-disabled")).toBe("true"); await page.click(tag); - await page.waitForChanges(); - await waitForAnimationFrame(); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); @@ -617,8 +612,6 @@ export async function disabled( } await page.keyboard.press("Tab"); - await page.waitForChanges(); - await waitForAnimationFrame(); let tabFocusTarget: string; let clickFocusTarget: string; @@ -643,17 +636,12 @@ export async function disabled( async function resetFocusOrder(): Promise { // test page has default margin, so clicking on 0,0 will not hit the test element await page.mouse.click(0, 0); - await page.waitForChanges(); - await waitForAnimationFrame(); } await resetFocusOrder(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await page.waitForChanges(); - await waitForAnimationFrame(); - await expectToBeFocused(clickFocusTarget); // some components emit more than one click event, @@ -662,20 +650,15 @@ export async function disabled( component.setProperty("disabled", true); await page.waitForChanges(); - await waitForAnimationFrame(); const disabledComponentClickSpy = await component.spyOnEvent("click"); expect(component.getAttribute("aria-disabled")).toBe("true"); await resetFocusOrder(); await page.keyboard.press("Tab"); - await page.waitForChanges(); - await waitForAnimationFrame(); await expectToBeFocused("body"); await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await page.waitForChanges(); - await waitForAnimationFrame(); await expectToBeFocused("body"); expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0); From f10604af5cb5d35a5a94e8d60e68802c6f61de4e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 4 Feb 2022 22:19:23 -0800 Subject: [PATCH 51/56] tweak test util --- src/tests/commonTests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 4fba2d493bb..7abc17e825e 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -630,7 +630,7 @@ export async function disabled( const focusTarget = element.shadowRoot.activeElement || element; const rect = focusTarget.getBoundingClientRect(); - return [Math.floor(rect.x + rect.width / 2), Math.floor(rect.y + rect.height / 2)]; + return [rect.x + rect.width / 2, rect.y + rect.height / 2]; }); async function resetFocusOrder(): Promise { From 530534f195e7123446b71fc9ca3dda81122d20da Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 7 Feb 2022 09:08:15 -0800 Subject: [PATCH 52/56] update rating test --- src/components/rating/rating.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/rating/rating.e2e.ts b/src/components/rating/rating.e2e.ts index ef227ed972a..9aa2b3dbfef 100644 --- a/src/components/rating/rating.e2e.ts +++ b/src/components/rating/rating.e2e.ts @@ -8,7 +8,7 @@ describe("calcite-rating", () => { it("is labelable", async () => labelable("calcite-rating")); - it("can be disabled", () => disabled("calcite-rating")); + it("can be disabled", () => disabled("")); it("renders outlined star when no value or average is set", async () => { const page = await newE2EPage(); From 0df1b86dceba2be2cb8b0cdb2bf7c0c7dfb1224b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 7 Feb 2022 09:30:23 -0800 Subject: [PATCH 53/56] remove scrim overlay usage for disabled states --- src/components/filter/filter.tsx | 3 +-- src/components/panel/panel.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index 2bbe75fe02f..b25c5de98cd 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -198,12 +198,11 @@ export class Filter implements InteractiveComponent { return ( - {disabled ? : null}