Skip to content

Commit 82d1069

Browse files
MarcusNotheisMarcusNotheis
authored
chore(AnalyticalTable): Add aria attributes (#217)
1 parent 4b1891f commit 82d1069

File tree

5 files changed

+66
-5
lines changed

5 files changed

+66
-5
lines changed

‎packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
124124
if (!column) return null;
125125

126126
return (
127-
<div className={className} style={style}>
127+
<div className={className} style={style} role="columnheader">
128128
{groupable || sortable || filterable ? (
129129
<ColumnHeaderModal
130130
openBy={openBy}

‎packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,18 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
1616
class="AnalyticalTable--tableContainer-"
1717
>
1818
<div
19+
aria-rowcount="2"
1920
class="AnalyticalTable--table-"
21+
role="table"
2022
>
2123
<header
2224
class="AnalyticalTable--tableHeaderRow-"
25+
role="rowgroup"
2326
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
2427
>
2528
<div
2629
class="AnalyticalTable--th-"
30+
role="columnheader"
2731
>
2832
<div
2933
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -84,6 +88,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
8488
</div>
8589
<div
8690
class="AnalyticalTable--th-"
91+
role="columnheader"
8792
>
8893
<div
8994
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -144,6 +149,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
144149
</div>
145150
<div
146151
class="AnalyticalTable--th-"
152+
role="columnheader"
147153
>
148154
<div
149155
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -204,6 +210,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
204210
</div>
205211
<div
206212
class="AnalyticalTable--th-"
213+
role="columnheader"
207214
>
208215
<div
209216
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -269,7 +276,9 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
269276
style="height: 220px; width: 100%;"
270277
>
271278
<div
279+
aria-rowindex="0"
272280
class="AnalyticalTable--tr-"
281+
role="row"
273282
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
274283
>
275284
<div
@@ -314,7 +323,9 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
314323
</div>
315324
</div>
316325
<div
326+
aria-rowindex="1"
317327
class="AnalyticalTable--tr- AnalyticalTable--alternateRowColor-"
328+
role="row"
318329
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
319330
>
320331
<div
@@ -432,14 +443,18 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
432443
class="AnalyticalTable--tableContainer-"
433444
>
434445
<div
446+
aria-rowcount="2"
435447
class="AnalyticalTable--table-"
448+
role="table"
436449
>
437450
<header
438451
class="AnalyticalTable--tableHeaderRow-"
452+
role="rowgroup"
439453
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
440454
>
441455
<div
442456
class="AnalyticalTable--th-"
457+
role="columnheader"
443458
>
444459
<div
445460
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -500,6 +515,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
500515
</div>
501516
<div
502517
class="AnalyticalTable--th-"
518+
role="columnheader"
503519
>
504520
<div
505521
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -560,6 +576,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
560576
</div>
561577
<div
562578
class="AnalyticalTable--th-"
579+
role="columnheader"
563580
>
564581
<div
565582
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -620,6 +637,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
620637
</div>
621638
<div
622639
class="AnalyticalTable--th-"
640+
role="columnheader"
623641
>
624642
<div
625643
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -685,7 +703,9 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
685703
style="height: 220px; width: 100%;"
686704
>
687705
<div
706+
aria-rowindex="0"
688707
class="AnalyticalTable--tr-"
708+
role="row"
689709
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
690710
>
691711
<div
@@ -730,7 +750,9 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
730750
</div>
731751
</div>
732752
<div
753+
aria-rowindex="1"
733754
class="AnalyticalTable--tr-"
755+
role="row"
734756
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
735757
>
736758
<div
@@ -848,14 +870,18 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
848870
class="AnalyticalTable--tableContainer-"
849871
>
850872
<div
873+
aria-rowcount="0"
851874
class="AnalyticalTable--table-"
875+
role="table"
852876
>
853877
<header
854878
class="AnalyticalTable--tableHeaderRow-"
879+
role="rowgroup"
855880
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
856881
>
857882
<div
858883
class="AnalyticalTable--th-"
884+
role="columnheader"
859885
>
860886
<div
861887
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -916,6 +942,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
916942
</div>
917943
<div
918944
class="AnalyticalTable--th-"
945+
role="columnheader"
919946
>
920947
<div
921948
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -976,6 +1003,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
9761003
</div>
9771004
<div
9781005
class="AnalyticalTable--th-"
1006+
role="columnheader"
9791007
>
9801008
<div
9811009
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1036,6 +1064,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
10361064
</div>
10371065
<div
10381066
class="AnalyticalTable--th-"
1067+
role="columnheader"
10391068
>
10401069
<div
10411070
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -1342,14 +1371,18 @@ exports[`AnalyticalTable Tree Table 1`] = `
13421371
class="AnalyticalTable--tableContainer-"
13431372
>
13441373
<div
1374+
aria-rowcount="2"
13451375
class="AnalyticalTable--table-"
1376+
role="table"
13461377
>
13471378
<header
13481379
class="AnalyticalTable--tableHeaderRow-"
1380+
role="rowgroup"
13491381
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
13501382
>
13511383
<div
13521384
class="AnalyticalTable--th-"
1385+
role="columnheader"
13531386
>
13541387
<div
13551388
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1431,6 +1464,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
14311464
</div>
14321465
<div
14331466
class="AnalyticalTable--th-"
1467+
role="columnheader"
14341468
>
14351469
<div
14361470
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1512,6 +1546,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
15121546
</div>
15131547
<div
15141548
class="AnalyticalTable--th-"
1549+
role="columnheader"
15151550
>
15161551
<div
15171552
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1593,6 +1628,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
15931628
</div>
15941629
<div
15951630
class="AnalyticalTable--th-"
1631+
role="columnheader"
15961632
>
15971633
<div
15981634
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -1679,7 +1715,9 @@ exports[`AnalyticalTable Tree Table 1`] = `
16791715
style="height: 220px; width: 100%;"
16801716
>
16811717
<div
1718+
aria-rowindex="0"
16821719
class="AnalyticalTable--tr-"
1720+
role="row"
16831721
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
16841722
>
16851723
<div
@@ -1700,7 +1738,9 @@ exports[`AnalyticalTable Tree Table 1`] = `
17001738
/>
17011739
</div>
17021740
<div
1741+
aria-rowindex="1"
17031742
class="AnalyticalTable--tr-"
1743+
role="row"
17041744
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
17051745
>
17061746
<div
@@ -1818,14 +1858,18 @@ exports[`AnalyticalTable custom row height 1`] = `
18181858
class="AnalyticalTable--tableContainer- AnalyticalTable--modifiedRowHeight- AnalyticalTable--modifiedRowHeight-0-"
18191859
>
18201860
<div
1861+
aria-rowcount="2"
18211862
class="AnalyticalTable--table-"
1863+
role="table"
18221864
>
18231865
<header
18241866
class="AnalyticalTable--tableHeaderRow-"
1867+
role="rowgroup"
18251868
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
18261869
>
18271870
<div
18281871
class="AnalyticalTable--th-"
1872+
role="columnheader"
18291873
>
18301874
<div
18311875
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1886,6 +1930,7 @@ exports[`AnalyticalTable custom row height 1`] = `
18861930
</div>
18871931
<div
18881932
class="AnalyticalTable--th-"
1933+
role="columnheader"
18891934
>
18901935
<div
18911936
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1946,6 +1991,7 @@ exports[`AnalyticalTable custom row height 1`] = `
19461991
</div>
19471992
<div
19481993
class="AnalyticalTable--th-"
1994+
role="columnheader"
19491995
>
19501996
<div
19511997
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2006,6 +2052,7 @@ exports[`AnalyticalTable custom row height 1`] = `
20062052
</div>
20072053
<div
20082054
class="AnalyticalTable--th-"
2055+
role="columnheader"
20092056
>
20102057
<div
20112058
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -2071,7 +2118,9 @@ exports[`AnalyticalTable custom row height 1`] = `
20712118
style="height: 300px; width: 100%;"
20722119
>
20732120
<div
2121+
aria-rowindex="0"
20742122
class="AnalyticalTable--tr-"
2123+
role="row"
20752124
style="position: absolute; left: 0px; top: 0px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
20762125
>
20772126
<div
@@ -2116,7 +2165,9 @@ exports[`AnalyticalTable custom row height 1`] = `
21162165
</div>
21172166
</div>
21182167
<div
2168+
aria-rowindex="1"
21192169
class="AnalyticalTable--tr-"
2170+
role="row"
21202171
style="position: absolute; left: 0px; top: 60px; height: 60px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
21212172
>
21222173
<div
@@ -2234,14 +2285,18 @@ exports[`AnalyticalTable test Asc desc 1`] = `
22342285
class="AnalyticalTable--tableContainer-"
22352286
>
22362287
<div
2288+
aria-rowcount="2"
22372289
class="AnalyticalTable--table-"
2290+
role="table"
22382291
>
22392292
<header
22402293
class="AnalyticalTable--tableHeaderRow-"
2294+
role="rowgroup"
22412295
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
22422296
>
22432297
<div
22442298
class="AnalyticalTable--th-"
2299+
role="columnheader"
22452300
>
22462301
<div
22472302
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2302,6 +2357,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
23022357
</div>
23032358
<div
23042359
class="AnalyticalTable--th-"
2360+
role="columnheader"
23052361
>
23062362
<div
23072363
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2362,6 +2418,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
23622418
</div>
23632419
<div
23642420
class="AnalyticalTable--th-"
2421+
role="columnheader"
23652422
>
23662423
<div
23672424
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2422,6 +2479,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
24222479
</div>
24232480
<div
24242481
class="AnalyticalTable--th-"
2482+
role="columnheader"
24252483
>
24262484
<div
24272485
style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -2487,7 +2545,9 @@ exports[`AnalyticalTable test Asc desc 1`] = `
24872545
style="height: 220px; width: 100%;"
24882546
>
24892547
<div
2548+
aria-rowindex="0"
24902549
class="AnalyticalTable--tr-"
2550+
role="row"
24912551
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
24922552
>
24932553
<div
@@ -2532,7 +2592,9 @@ exports[`AnalyticalTable test Asc desc 1`] = `
25322592
</div>
25332593
</div>
25342594
<div
2595+
aria-rowindex="1"
25352596
class="AnalyticalTable--tr-"
2597+
role="row"
25362598
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
25372599
>
25382600
<div

‎packages/main/src/components/AnalyticalTable/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,14 +253,14 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
253253
{title && <TitleBar>{title}</TitleBar>}
254254
{typeof renderExtension === 'function' && <div>{renderExtension()}</div>}
255255
<div className={tableContainerClasses.valueOf()}>
256-
<div {...getTableProps()} ref={headerRef}>
256+
<div {...getTableProps()} ref={headerRef} role="table" aria-rowcount={rows.length}>
257257
{headerGroups.map((headerGroup) => {
258258
let headerProps = {};
259259
if (headerGroup.getHeaderGroupProps) {
260260
headerProps = headerGroup.getHeaderGroupProps();
261261
}
262262
return (
263-
<header {...headerProps}>
263+
<header {...headerProps} role="rowgroup">
264264
{headerGroup.headers.map((column, index) => (
265265
<ColumnHeader
266266
{...column.getHeaderProps()}

‎packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import '@ui5/webcomponents/dist/icons/navigation-right-arrow';
33
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
44
import { FixedSizeList } from 'react-window';
55
import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column';
6-
import { Cell } from './Cell';
76
import { VirtualTableRow } from './VirtualTableRow';
87

98
export const VirtualTableBody = (props) => {

0 commit comments

Comments
 (0)