fix(list, list-item): support keyboard sorting in screen readers. #7426

Esri · Apr 2, 2024 · 2cbf451 · 2cbf451
1 parent 1563dcb
commit 2cbf451
Showing 1 changed file with 21 additions and 18 deletions.
diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx
@@ -4,6 +4,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Method,
   Prop,
   State,
@@ -298,24 +299,26 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo
 
   render(): VNode {
     return (
-      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-      <span
-        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
-        aria-label={this.disabled ? null : this.getAriaText("label")}
-        aria-pressed={this.disabled ? null : toAriaBoolean(this.selected)}
-        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
-        onBlur={this.handleBlur}
-        onKeyDown={this.handleKeyDown}
-        role="button"
-        tabIndex={this.disabled ? null : 0}
-        title={this.getTooltip()}
-        // 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={(el): void => {
-          this.handleButton = el;
-        }}
-      >
-        <calcite-icon icon={ICONS.drag} scale="s" />
-      </span>
+      <Host role="application">
+        <span
+          // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+          aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
+          aria-label={this.disabled ? null : this.getAriaText("label")}
+          aria-pressed={this.disabled ? null : toAriaBoolean(this.selected)}
+          class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          role="button"
+          tabIndex={this.disabled ? null : 0}
+          title={this.getTooltip()}
+          // 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={(el): void => {
+            this.handleButton = el;
+          }}
+        >
+          <calcite-icon icon={ICONS.drag} scale="s" />
+        </span>
+      </Host>
     );
   }
 }