Skip to content

Commit 48c957b

Browse files
cee-chencee-chen
authored
[EuiDataGrid] Reduce hidden SR text when copying text from multiple cells (elastic#6817)
* Hide cell position SR text if cell is not focused * changelog
1 parent a1ee487 commit 48c957b

6 files changed

Lines changed: 42 additions & 1 deletion

File tree

‎src/components/datagrid/__snapshots__/data_grid.test.tsx.snap‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -735,6 +735,7 @@ Array [
735735
</div>
736736
<p
737737
class="emotion-euiScreenReaderOnly"
738+
hidden=""
738739
>
739740
- A, column 1, row 1
740741
</p>
@@ -767,6 +768,7 @@ Array [
767768
</div>
768769
<p
769770
class="emotion-euiScreenReaderOnly"
771+
hidden=""
770772
>
771773
- B, column 2, row 1
772774
</p>
@@ -799,6 +801,7 @@ Array [
799801
</div>
800802
<p
801803
class="emotion-euiScreenReaderOnly"
804+
hidden=""
802805
>
803806
- A, column 1, row 2
804807
</p>
@@ -831,6 +834,7 @@ Array [
831834
</div>
832835
<p
833836
class="emotion-euiScreenReaderOnly"
837+
hidden=""
834838
>
835839
- B, column 2, row 2
836840
</p>
@@ -863,6 +867,7 @@ Array [
863867
</div>
864868
<p
865869
class="emotion-euiScreenReaderOnly"
870+
hidden=""
866871
>
867872
- A, column 1, row 3
868873
</p>
@@ -895,6 +900,7 @@ Array [
895900
</div>
896901
<p
897902
class="emotion-euiScreenReaderOnly"
903+
hidden=""
898904
>
899905
- B, column 2, row 3
900906
</p>
@@ -1247,6 +1253,7 @@ Array [
12471253
</div>
12481254
<p
12491255
class="emotion-euiScreenReaderOnly"
1256+
hidden=""
12501257
>
12511258
- leading, column 1, row 1
12521259
</p>
@@ -1285,6 +1292,7 @@ Array [
12851292
</div>
12861293
<p
12871294
class="emotion-euiScreenReaderOnly"
1295+
hidden=""
12881296
>
12891297
- A, column 2, row 1
12901298
</p>
@@ -1317,6 +1325,7 @@ Array [
13171325
</div>
13181326
<p
13191327
class="emotion-euiScreenReaderOnly"
1328+
hidden=""
13201329
>
13211330
- B, column 3, row 1
13221331
</p>
@@ -1357,6 +1366,7 @@ Array [
13571366
</div>
13581367
<p
13591368
class="emotion-euiScreenReaderOnly"
1369+
hidden=""
13601370
>
13611371
- trailing, column 4, row 1
13621372
</p>
@@ -1403,6 +1413,7 @@ Array [
14031413
</div>
14041414
<p
14051415
class="emotion-euiScreenReaderOnly"
1416+
hidden=""
14061417
>
14071418
- leading, column 1, row 2
14081419
</p>
@@ -1441,6 +1452,7 @@ Array [
14411452
</div>
14421453
<p
14431454
class="emotion-euiScreenReaderOnly"
1455+
hidden=""
14441456
>
14451457
- A, column 2, row 2
14461458
</p>
@@ -1473,6 +1485,7 @@ Array [
14731485
</div>
14741486
<p
14751487
class="emotion-euiScreenReaderOnly"
1488+
hidden=""
14761489
>
14771490
- B, column 3, row 2
14781491
</p>
@@ -1513,6 +1526,7 @@ Array [
15131526
</div>
15141527
<p
15151528
class="emotion-euiScreenReaderOnly"
1529+
hidden=""
15161530
>
15171531
- trailing, column 4, row 2
15181532
</p>
@@ -1559,6 +1573,7 @@ Array [
15591573
</div>
15601574
<p
15611575
class="emotion-euiScreenReaderOnly"
1576+
hidden=""
15621577
>
15631578
- leading, column 1, row 3
15641579
</p>
@@ -1597,6 +1612,7 @@ Array [
15971612
</div>
15981613
<p
15991614
class="emotion-euiScreenReaderOnly"
1615+
hidden=""
16001616
>
16011617
- A, column 2, row 3
16021618
</p>
@@ -1629,6 +1645,7 @@ Array [
16291645
</div>
16301646
<p
16311647
class="emotion-euiScreenReaderOnly"
1648+
hidden=""
16321649
>
16331650
- B, column 3, row 3
16341651
</p>
@@ -1669,6 +1686,7 @@ Array [
16691686
</div>
16701687
<p
16711688
class="emotion-euiScreenReaderOnly"
1689+
hidden=""
16721690
>
16731691
- trailing, column 4, row 3
16741692
</p>
@@ -1980,6 +1998,7 @@ Array [
19801998
</div>
19811999
<p
19822000
class="emotion-euiScreenReaderOnly"
2001+
hidden=""
19832002
>
19842003
- A, column 1, row 1
19852004
</p>
@@ -2012,6 +2031,7 @@ Array [
20122031
</div>
20132032
<p
20142033
class="emotion-euiScreenReaderOnly"
2034+
hidden=""
20152035
>
20162036
- B, column 2, row 1
20172037
</p>
@@ -2044,6 +2064,7 @@ Array [
20442064
</div>
20452065
<p
20462066
class="emotion-euiScreenReaderOnly"
2067+
hidden=""
20472068
>
20482069
- A, column 1, row 2
20492070
</p>
@@ -2076,6 +2097,7 @@ Array [
20762097
</div>
20772098
<p
20782099
class="emotion-euiScreenReaderOnly"
2100+
hidden=""
20792101
>
20802102
- B, column 2, row 2
20812103
</p>
@@ -2108,6 +2130,7 @@ Array [
21082130
</div>
21092131
<p
21102132
class="emotion-euiScreenReaderOnly"
2133+
hidden=""
21112134
>
21122135
- A, column 1, row 3
21132136
</p>
@@ -2140,6 +2163,7 @@ Array [
21402163
</div>
21412164
<p
21422165
class="emotion-euiScreenReaderOnly"
2166+
hidden=""
21432167
>
21442168
- B, column 2, row 3
21452169
</p>
@@ -2443,6 +2467,7 @@ Array [
24432467
</div>
24442468
<p
24452469
class="emotion-euiScreenReaderOnly"
2470+
hidden=""
24462471
>
24472472
- A, column 1, row 1
24482473
</p>
@@ -2475,6 +2500,7 @@ Array [
24752500
</div>
24762501
<p
24772502
class="emotion-euiScreenReaderOnly"
2503+
hidden=""
24782504
>
24792505
- B, column 2, row 1
24802506
</p>
@@ -2507,6 +2533,7 @@ Array [
25072533
</div>
25082534
<p
25092535
class="emotion-euiScreenReaderOnly"
2536+
hidden=""
25102537
>
25112538
- A, column 1, row 2
25122539
</p>
@@ -2539,6 +2566,7 @@ Array [
25392566
</div>
25402567
<p
25412568
class="emotion-euiScreenReaderOnly"
2569+
hidden=""
25422570
>
25432571
- B, column 2, row 2
25442572
</p>
@@ -2571,6 +2599,7 @@ Array [
25712599
</div>
25722600
<p
25732601
class="emotion-euiScreenReaderOnly"
2602+
hidden=""
25742603
>
25752604
- A, column 1, row 3
25762605
</p>
@@ -2603,6 +2632,7 @@ Array [
26032632
</div>
26042633
<p
26052634
class="emotion-euiScreenReaderOnly"
2635+
hidden=""
26062636
>
26072637
- B, column 2, row 3
26082638
</p>

‎src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
147147
</div>
148148
<p
149149
class="emotion-euiScreenReaderOnly"
150+
hidden=""
150151
>
151152
-
152153
columnA, column 1, row 1
@@ -180,6 +181,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
180181
</div>
181182
<p
182183
class="emotion-euiScreenReaderOnly"
184+
hidden=""
183185
>
184186
-
185187
columnB, column 2, row 1
@@ -217,6 +219,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
217219
</div>
218220
<p
219221
class="emotion-euiScreenReaderOnly"
222+
hidden=""
220223
>
221224
-
222225
columnA, column 1, row 2
@@ -250,6 +253,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
250253
</div>
251254
<p
252255
class="emotion-euiScreenReaderOnly"
256+
hidden=""
253257
>
254258
-
255259
columnB, column 2, row 2

‎src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
146146
</div>
147147
<p
148148
class="emotion-euiScreenReaderOnly"
149+
hidden=""
149150
>
150151
- columnA, column 1, row 1
151152
</p>
@@ -180,6 +181,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
180181
</div>
181182
<p
182183
class="emotion-euiScreenReaderOnly"
184+
hidden=""
183185
>
184186
- columnB, column 2, row 1
185187
</p>

‎src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ exports[`EuiDataGridCell renders 1`] = `
7373
</div>
7474
<p
7575
class="emotion-euiScreenReaderOnly"
76+
hidden=""
7677
>
7778
- someColumn, column 1, row 1
7879
</p>

‎src/components/datagrid/body/data_grid_cell.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const EuiDataGridCellContent: FunctionComponent<
4747
setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
4848
isExpanded: boolean;
4949
isDefinedHeight: boolean;
50+
isFocused: boolean;
5051
ariaRowIndex: number;
5152
}
5253
> = memo(
@@ -60,6 +61,7 @@ const EuiDataGridCellContent: FunctionComponent<
6061
ariaRowIndex,
6162
rowHeightUtils,
6263
isDefinedHeight,
64+
isFocused,
6365
...rest
6466
}) => {
6567
// React is more permissible than the TS types indicate
@@ -92,7 +94,7 @@ const EuiDataGridCellContent: FunctionComponent<
9294
/>
9395
</div>
9496
<EuiScreenReaderOnly>
95-
<p>
97+
<p hidden={!isFocused}>
9698
{'- '}
9799
<EuiI18n
98100
token="euiDataGridCell.position"
@@ -660,6 +662,7 @@ export class EuiDataGridCell extends Component<
660662
isExpandable,
661663
isExpanded: popoverIsOpen,
662664
isDetails: false,
665+
isFocused: this.state.isFocused,
663666
setCellContentsRef: this.setCellContentsRef,
664667
rowHeightsOptions,
665668
rowHeightUtils,

‎upcoming_changelogs/6817.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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.

0 commit comments

Comments
 (0)