fix(table): Prevent duplicate scrollbars in certain browsers (#8962)

**Related Issue:** #8947 ## Summary Fixes an issue in Chrome and Safari where double scrollbars would appear. As mentioned in the issue, it does seem to have to do with the conditional rendering of the assistive technology text. Firefox was unaffected. Honestly kind of a strange bug, I don't think (?) this has come up before with the AT hidden class we use. cc @geospatialem to verify this still works as expected in JAWS / NVDA - the issue was introduced with the recent addition of the new `interactionMode` property, so let's verify this doesn't have a negative effect on AT.
Esri · Mar 19, 2024 · 8434eeb · 8434eeb
1 parent ddf4bd8
commit 8434eeb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 31 deletions.
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx
@@ -1,15 +1,4 @@
-import {
-  Component,
-  Element,
-  Fragment,
-  h,
-  Host,
-  Method,
-  Prop,
-  State,
-  VNode,
-  Watch,
-} from "@stencil/core";
+import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from "@stencil/core";
 import { Alignment, Scale } from "../interfaces";
 import {
   componentFocusable,
@@ -254,18 +243,16 @@ export class TableCell
             // 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)}
           >
-            <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>
+            {(this.selectionCell || this.readCellContentsToAT) && (
+              <span
+                aria-hidden={true}
+                aria-live={this.focused ? "polite" : "off"}
+                class={CSS.assistiveText}
+              >
+                {this.selectionCell && this.selectionText}
+                {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
+              </span>
+            )}
             <slot onSlotchange={this.updateScreenReaderContentsText} />
           </td>
         </InteractiveContainer>

diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx
@@ -249,13 +249,15 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
               scale={getIconScale(this.scale)}
             />
           )}
-          <span
-            aria-hidden={true}
-            aria-live={this.focused ? "polite" : "off"}
-            class={CSS.assistiveText}
-          >
-            {(this.selectionCell || this.numberCell) && this.screenReaderText}
-          </span>
+          {(this.selectionCell || this.numberCell) && (
+            <span
+              aria-hidden={true}
+              aria-live={this.focused ? "polite" : "off"}
+              class={CSS.assistiveText}
+            >
+              {this.screenReaderText}
+            </span>
+          )}
         </th>
       </Host>
     );