[EuiDataGrid] Reduce hidden SR text when copying text from multiple c…

…ells (elastic#6817) * Hide cell position SR text if cell is not focused * changelog
cee-chen · May 26, 2023 · 48c957b · 48c957b
1 parent a1ee487
commit 48c957b
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 1 deletion.
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -735,6 +735,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 1
                   </p>
@@ -767,6 +768,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 1
                   </p>
@@ -799,6 +801,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 2
                   </p>
@@ -831,6 +834,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 2
                   </p>
@@ -863,6 +867,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 3
                   </p>
@@ -895,6 +900,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 3
                   </p>
@@ -1247,6 +1253,7 @@ Array [
                     </div>
                     <p
                       class="emotion-euiScreenReaderOnly"
+                      hidden=""
                     >
                       - leading, column 1, row 1
                     </p>
@@ -1285,6 +1292,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 2, row 1
                   </p>
@@ -1317,6 +1325,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 3, row 1
                   </p>
@@ -1357,6 +1366,7 @@ Array [
                     </div>
                     <p
                       class="emotion-euiScreenReaderOnly"
+                      hidden=""
                     >
                       - trailing, column 4, row 1
                     </p>
@@ -1403,6 +1413,7 @@ Array [
                     </div>
                     <p
                       class="emotion-euiScreenReaderOnly"
+                      hidden=""
                     >
                       - leading, column 1, row 2
                     </p>
@@ -1441,6 +1452,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 2, row 2
                   </p>
@@ -1473,6 +1485,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 3, row 2
                   </p>
@@ -1513,6 +1526,7 @@ Array [
                     </div>
                     <p
                       class="emotion-euiScreenReaderOnly"
+                      hidden=""
                     >
                       - trailing, column 4, row 2
                     </p>
@@ -1559,6 +1573,7 @@ Array [
                     </div>
                     <p
                       class="emotion-euiScreenReaderOnly"
+                      hidden=""
                     >
                       - leading, column 1, row 3
                     </p>
@@ -1597,6 +1612,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 2, row 3
                   </p>
@@ -1629,6 +1645,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 3, row 3
                   </p>
@@ -1669,6 +1686,7 @@ Array [
                     </div>
                     <p
                       class="emotion-euiScreenReaderOnly"
+                      hidden=""
                     >
                       - trailing, column 4, row 3
                     </p>
@@ -1980,6 +1998,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 1
                   </p>
@@ -2012,6 +2031,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 1
                   </p>
@@ -2044,6 +2064,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 2
                   </p>
@@ -2076,6 +2097,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 2
                   </p>
@@ -2108,6 +2130,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 3
                   </p>
@@ -2140,6 +2163,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 3
                   </p>
@@ -2443,6 +2467,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 1
                   </p>
@@ -2475,6 +2500,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 1
                   </p>
@@ -2507,6 +2533,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 2
                   </p>
@@ -2539,6 +2566,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 2
                   </p>
@@ -2571,6 +2599,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - A, column 1, row 3
                   </p>
@@ -2603,6 +2632,7 @@ Array [
                   </div>
                   <p
                     class="emotion-euiScreenReaderOnly"
+                    hidden=""
                   >
                     - B, column 2, row 3
                   </p>

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -147,6 +147,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - 
             columnA, column 1, row 1
@@ -180,6 +181,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - 
             columnB, column 2, row 1
@@ -217,6 +219,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - 
             columnA, column 1, row 2
@@ -250,6 +253,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - 
             columnB, column 2, row 2

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -146,6 +146,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - columnA, column 1, row 1
           </p>
@@ -180,6 +181,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - columnB, column 2, row 1
           </p>

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`EuiDataGridCell renders 1`] = `
       </div>
       <p
         class="emotion-euiScreenReaderOnly"
+        hidden=""
       >
         - someColumn, column 1, row 1
       </p>

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -47,6 +47,7 @@ const EuiDataGridCellContent: FunctionComponent<
     setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
     isExpanded: boolean;
     isDefinedHeight: boolean;
+    isFocused: boolean;
     ariaRowIndex: number;
   }
 > = memo(
@@ -60,6 +61,7 @@ const EuiDataGridCellContent: FunctionComponent<
     ariaRowIndex,
     rowHeightUtils,
     isDefinedHeight,
+    isFocused,
     ...rest
   }) => {
     // React is more permissible than the TS types indicate
@@ -92,7 +94,7 @@ const EuiDataGridCellContent: FunctionComponent<
           />
         </div>
         <EuiScreenReaderOnly>
-          <p>
+          <p hidden={!isFocused}>
             {'- '}
             <EuiI18n
               token="euiDataGridCell.position"
@@ -660,6 +662,7 @@ export class EuiDataGridCell extends Component<
       isExpandable,
       isExpanded: popoverIsOpen,
       isDetails: false,
+      isFocused: this.state.isFocused,
       setCellContentsRef: this.setCellContentsRef,
       rowHeightsOptions,
       rowHeightUtils,

diff --git a/upcoming_changelogs/6817.md b/upcoming_changelogs/6817.md
@@ -0,0 +1 @@
+- Updated `EuiDataGrid` to only render screen reader text announcing cell position if the cell is currently focused. This should improve the ability to copy and paste multiple cells without SR text.
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,7 @@ exports[`EuiDataGridCell renders 1`] = ` @@
           </div>
           <p
             class="emotion-euiScreenReaderOnly"
+            hidden=""
           >
             - someColumn, column 1, row 1
           </p>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiDataGrid` to only render screen reader text announcing cell position if the cell is currently focused. This should improve the ability to copy and paste multiple cells without SR text.