feat(table): Improve accessibility of interaction-mode: static Table

packages/calcite-components/src/components.d.ts

@@ -4769,7 +4769,6 @@ export namespace Components {
         "messages": TableHeaderMessages;
         "numberCell": boolean;
         "parentRowIsSelected": boolean;
-        "parentRowPosition": number;
         "parentRowType": RowType;
         "positionInRow": number;
         /**
@@ -12276,7 +12275,6 @@ declare namespace LocalJSX {
         "messages"?: TableHeaderMessages;
         "numberCell"?: boolean;
         "parentRowIsSelected"?: boolean;
-        "parentRowPosition"?: number;
         "parentRowType"?: RowType;
         "positionInRow"?: number;
         /**

packages/calcite-components/src/components/table-cell/table-cell.tsx

@@ -1,4 +1,15 @@
-import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from "@stencil/core";
+import {
+  Component,
+  Element,
+  Fragment,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+  VNode,
+  Watch,
+} from "@stencil/core";
 import { Alignment, Scale } from "../interfaces";
 import {
   componentFocusable,
@@ -237,18 +248,24 @@ export class TableCell
             colSpan={this.colSpan}
             onBlur={this.onContainerBlur}
             onFocus={this.onContainerFocus}
-            role="gridcell"
+            role={this.interactionMode === "interactive" ? "gridcell" : "cell"}
             rowSpan={this.rowSpan}
             tabIndex={staticCell ? -1 : 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={(el) => (this.containerEl = el)}
           >
-            {(this.selectionCell || this.readCellContentsToAT) && this.focused && (
-              <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText}>
-                {this.selectionCell && this.selectionText}
-                {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
-              </span>
-            )}
+            <span
+              aria-hidden={true}
+              aria-live={this.focused ? "polite" : "off"}
+              class={CSS.assistiveText}
+            >
+              {(this.selectionCell || this.readCellContentsToAT) && (
+                <Fragment>
+                  {this.selectionCell && this.selectionText}
+                  {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
+                </Fragment>
+              )}
+            </span>
             <slot onSlotchange={this.updateScreenReaderContentsText} />
           </td>
         </InteractiveContainer>

packages/calcite-components/src/components/table-header/table-header.tsx

@@ -59,9 +59,6 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
   /** @internal */
   @Prop() parentRowIsSelected: boolean;
 
-  /** @internal */
-  @Prop() parentRowPosition: number;
-
   /** @internal */
   @Prop() parentRowType: RowType;
 
@@ -146,6 +143,8 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
 
   @State() defaultMessages: TableHeaderMessages;
 
+  @State() focused = false;
+
   @State() screenReaderText = "";
 
   @State() effectiveLocale = "";
@@ -191,6 +190,14 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
     this.screenReaderText = text;
   }
 
+  private onContainerBlur = (): void => {
+    this.focused = false;
+  };
+
+  private onContainerFocus = (): void => {
+    this.focused = true;
+  };
+
   //--------------------------------------------------------------------------
   //
   //  Render Methods
@@ -212,7 +219,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
     return (
       <Host>
         <th
-          aria-colindex={this.parentRowType !== "body" ? this.positionInRow : ""}
+          aria-colindex={this.parentRowType === "head" ? this.positionInRow : undefined}
           class={{
             [CSS.bodyRow]: this.parentRowType === "body",
             [CSS.footerRow]: this.parentRowType === "foot",
@@ -224,7 +231,9 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
             [CSS.lastCell]: this.lastCell,
           }}
           colSpan={this.colSpan}
-          role="columnheader"
+          onBlur={this.onContainerBlur}
+          onFocus={this.onContainerFocus}
+          role={this.parentRowType === "head" ? "columnheader" : "rowheader"}
           rowSpan={this.rowSpan}
           scope={scope}
           tabIndex={this.selectionCell ? 0 : staticCell ? -1 : 0}
@@ -240,11 +249,13 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
               scale={getIconScale(this.scale)}
             />
           )}
-          {(this.selectionCell || this.numberCell) && (
-            <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText}>
-              {this.screenReaderText}
-            </span>
-          )}
+          <span
+            aria-hidden={true}
+            aria-live={this.focused ? "polite" : "off"}
+            class={CSS.assistiveText}
+          >
+            {(this.selectionCell || this.numberCell) && this.screenReaderText}
+          </span>
         </th>
       </Host>
     );

packages/calcite-components/src/components/table/table.tsx

@@ -528,10 +528,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
             <table
               aria-colcount={this.colCount}
               aria-multiselectable={this.selectionMode === "multiple"}
-              aria-readonly={true}
               aria-rowcount={this.allRows?.length}
               class={{ [CSS.tableFixed]: this.layout === "fixed" }}
-              role="grid"
+              role={this.interactionMode === "interactive" ? "grid" : "table"}
             >
               <caption class={CSS.assistiveText}>{this.caption}</caption>
               {this.renderTHead()}