fix: allow users to control tabindex on interactive components (#8166)

**Related Issue:** #4970 ## Summary Updates the interactive component pattern to avoid the need to control `tabindex` on the host to prevent tabbing into a component's subtree. This works by introducing a new functional component (`InteractiveContainer`) that leverages `inert` (prevent tabbing into its contents) and `display: contents` (allows us to use it as a root container without affecting layout), which should be the root container under the host. Updating components to this pattern should be straightforward as the styling of the helper component is bundled within the `disabled` mixin that interactive components already include and `updateHostInteraction` no longer needs its 2nd parameter. For cases that were setting the 2nd parameter (`hostIsTabbable`) all they have to do to migrate depends on the value: 1. `false` (default) – no further changes necessary 2. `true` – set `tabIndex={0}` on the host 3. predicate function – set `tabIndex={myPredicateFunction() ? 0 : -1 }` on the host 4. `"managed"` – no further changes necessary as owner/parent sets `tabIndex` on the component already Any use of `Fragment` can be replaced by `InteractiveContainer` directly. 2 and 3 might also need to determine the tab index based on `disabled`.
Esri · Dec 20, 2023 · b15c052 · b15c052
1 parent b3d5169
commit b15c052
Show file tree

Hide file tree

Showing 54 changed files with 1,628 additions and 1,462 deletions.
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -62,6 +62,10 @@
       @apply opacity-100;
     }
   }
+
+  .interaction-container {
+    display: contents;
+  }
 }
 
 // used for host-specific styling when the `disabled` mixin cannot be applied on the host (e.g., `display: contents`)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4659,9 +4659,6 @@ export namespace Components {
           * Specifies the number of columns the component should span.
          */
         "colSpan": number;
-        /**
-          * When true, prevents user interaction.  Notes:  This prop should use the
-         */
         "disabled": boolean;
         /**
           * Use this property to override individual strings used by the component.
@@ -12090,9 +12087,6 @@ declare namespace LocalJSX {
           * Specifies the number of columns the component should span.
          */
         "colSpan"?: number;
-        /**
-          * When true, prevents user interaction.  Notes:  This prop should use the
-         */
         "disabled"?: boolean;
         /**
           * Use this property to override individual strings used by the component.

diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
@@ -17,6 +17,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -308,24 +309,26 @@ export class Action
 
     return (
       <Host>
-        <button
-          aria-busy={toAriaBoolean(loading)}
-          aria-controls={indicator ? indicatorId : null}
-          aria-disabled={toAriaBoolean(disabled)}
-          aria-label={ariaLabel}
-          aria-pressed={toAriaBoolean(active)}
-          class={buttonClasses}
-          disabled={disabled}
-          id={buttonId}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}
-        >
-          {this.renderIconContainer()}
-          {this.renderTextContainer()}
-          {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
-        </button>
-        <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />
-        {this.renderIndicatorText()}
+        <InteractiveContainer disabled={disabled}>
+          <button
+            aria-busy={toAriaBoolean(loading)}
+            aria-controls={indicator ? indicatorId : null}
+            aria-disabled={toAriaBoolean(disabled)}
+            aria-label={ariaLabel}
+            aria-pressed={toAriaBoolean(active)}
+            class={buttonClasses}
+            disabled={disabled}
+            id={buttonId}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}
+          >
+            {this.renderIconContainer()}
+            {this.renderTextContainer()}
+            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
+          </button>
+          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />
+          {this.renderIndicatorText()}
+        </InteractiveContainer>
       </Host>
     );
   }

diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
@@ -21,6 +21,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -372,24 +373,26 @@ export class Block
 
     return (
       <Host>
-        <article
-          aria-busy={toAriaBoolean(loading)}
-          class={{
-            [CSS.container]: true,
-          }}
-        >
-          {headerNode}
-          <section
-            aria-labelledby={IDS.toggle}
-            class={CSS.content}
-            hidden={!open}
-            id={IDS.content}
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.setTransitionEl}
+        <InteractiveContainer disabled={this.disabled}>
+          <article
+            aria-busy={toAriaBoolean(loading)}
+            class={{
+              [CSS.container]: true,
+            }}
           >
-            {this.renderScrim()}
-          </section>
-        </article>
+            {headerNode}
+            <section
+              aria-labelledby={IDS.toggle}
+              class={CSS.content}
+              hidden={!open}
+              id={IDS.content}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.setTransitionEl}
+            >
+              {this.renderScrim()}
+            </section>
+          </article>
+        </InteractiveContainer>
       </Host>
     );
   }

diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -15,6 +15,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
@@ -272,35 +273,37 @@ export class Button
     );
 
     return (
-      <Tag
-        aria-disabled={childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null}
-        aria-expanded={this.el.getAttribute("aria-expanded")}
-        aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
-        aria-live="polite"
-        class={{
-          [CSS.buttonPadding]: noStartEndIcons,
-          [CSS.buttonPaddingShrunk]: !noStartEndIcons,
-          [CSS.contentSlotted]: this.hasContent,
-          [CSS.iconStartEmpty]: !this.iconStart,
-          [CSS.iconEndEmpty]: !this.iconEnd,
-        }}
-        disabled={childElType === "button" ? this.disabled || this.loading : null}
-        href={childElType === "a" && this.href}
-        name={childElType === "button" && this.name}
-        onClick={this.handleClick}
-        rel={childElType === "a" && this.rel}
-        tabIndex={this.disabled ? -1 : null}
-        target={childElType === "a" && this.target}
-        title={this.tooltipText}
-        type={childElType === "button" && this.type}
-        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-        ref={this.setChildEl}
-      >
-        {loaderNode}
-        {this.iconStart ? iconStartEl : null}
-        {this.hasContent ? contentEl : null}
-        {this.iconEnd ? iconEndEl : null}
-      </Tag>
+      <InteractiveContainer disabled={this.disabled}>
+        <Tag
+          aria-disabled={childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null}
+          aria-expanded={this.el.getAttribute("aria-expanded")}
+          aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
+          aria-live="polite"
+          class={{
+            [CSS.buttonPadding]: noStartEndIcons,
+            [CSS.buttonPaddingShrunk]: !noStartEndIcons,
+            [CSS.contentSlotted]: this.hasContent,
+            [CSS.iconStartEmpty]: !this.iconStart,
+            [CSS.iconEndEmpty]: !this.iconEnd,
+          }}
+          disabled={childElType === "button" ? this.disabled || this.loading : null}
+          href={childElType === "a" && this.href}
+          name={childElType === "button" && this.name}
+          onClick={this.handleClick}
+          rel={childElType === "a" && this.rel}
+          tabIndex={this.disabled ? -1 : null}
+          target={childElType === "a" && this.target}
+          title={this.tooltipText}
+          type={childElType === "button" && this.type}
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+          ref={this.setChildEl}
+        >
+          {loaderNode}
+          {this.iconStart ? iconStartEl : null}
+          {this.hasContent ? contentEl : null}
+          {this.iconEnd ? iconEndEl : null}
+        </Tag>
+      </InteractiveContainer>
     );
   }
 

diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -21,6 +21,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -256,23 +257,25 @@ export class Checkbox
   render(): VNode {
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>
-        <div
-          aria-checked={toAriaBoolean(this.checked)}
-          aria-label={getLabelText(this)}
-          class="toggle"
-          onBlur={this.onToggleBlur}
-          onFocus={this.onToggleFocus}
-          role="checkbox"
-          tabIndex={this.disabled ? undefined : 0}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(toggleEl) => (this.toggleEl = toggleEl)}
-        >
-          <svg aria-hidden="true" class="check-svg" viewBox="0 0 16 16">
-            <path d={this.getPath()} />
-          </svg>
-          <slot />
-        </div>
-        <HiddenFormInputSlot component={this} />
+        <InteractiveContainer disabled={this.disabled}>
+          <div
+            aria-checked={toAriaBoolean(this.checked)}
+            aria-label={getLabelText(this)}
+            class="toggle"
+            onBlur={this.onToggleBlur}
+            onFocus={this.onToggleFocus}
+            role="checkbox"
+            tabIndex={this.disabled ? undefined : 0}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(toggleEl) => (this.toggleEl = toggleEl)}
+          >
+            <svg aria-hidden="true" class="check-svg" viewBox="0 0 16 16">
+              <path d={this.getPath()} />
+            </svg>
+            <slot />
+          </div>
+          <HiddenFormInputSlot component={this} />
+        </InteractiveContainer>
       </Host>
     );
   }

diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -15,6 +15,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
@@ -241,19 +242,22 @@ export class ChipGroup implements InteractiveComponent {
   render(): VNode {
     const role =
       this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
+    const { disabled } = this;
 
     return (
-      <div
-        aria-disabled={toAriaBoolean(this.disabled)}
-        aria-label={this.label}
-        class="container"
-        role={role}
-      >
-        <slot
-          onSlotchange={this.updateItems}
-          ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}
-        />
-      </div>
+      <InteractiveContainer disabled={disabled}>
+        <div
+          aria-disabled={toAriaBoolean(disabled)}
+          aria-label={this.label}
+          class="container"
+          role={role}
+        >
+          <slot
+            onSlotchange={this.updateItems}
+            ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}
+          />
+        </div>
+      </InteractiveContainer>
     );
   }
 }