Skip to content

Commit 3d32205

Browse files
authored
fix(AnalyticalTable): improve a11y for expand-group button (#7834)
1 parent a03dd29 commit 3d32205

File tree

4 files changed

+30
-13
lines changed

4 files changed

+30
-13
lines changed

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,19 @@
208208
}
209209
}
210210

211+
.expandGroupButton {
212+
all: unset;
213+
display: inline;
214+
}
215+
216+
.expandGroupIcon {
217+
color: var(--sapContent_IconColor);
218+
height: 0.75rem;
219+
width: 0.75rem;
220+
padding: 0.625rem;
221+
display: block;
222+
}
223+
211224
.tableText {
212225
display: inline-block;
213226
font-size: var(--sapFontSize);

packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@ export const Cell = (props: CellInstance) => {
2121
</span>
2222
);
2323
};
24+
25+
Cell.displayName = 'CellContent';
Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
22
import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
3+
import { clsx } from 'clsx';
34
import type { CSSProperties } from 'react';
45
import { TextAlign } from '../../../../enums/TextAlign.js';
56
import { Icon } from '../../../../webComponents/Icon/index.js';
67
import { RenderColumnTypes } from '../../types/index.js';
78

8-
const tableGroupExpandCollapseIcon = {
9-
color: 'var(--sapContent_IconColor)',
10-
height: '0.75rem',
11-
width: '0.75rem',
12-
padding: '0.625rem',
13-
display: 'block',
14-
};
15-
169
export const Grouped = (props) => {
1710
const { cell, row, webComponentsReactProperties } = props;
18-
const { translatableTexts } = webComponentsReactProperties;
11+
const { translatableTexts, classes } = webComponentsReactProperties;
1912

2013
const style: CSSProperties = {};
2114
if (cell.column.hAlign && (cell.column.hAlign !== TextAlign.Left || cell.column.hAlign !== TextAlign.Begin)) {
2215
style.marginRight = 'auto';
2316
}
2417

18+
const { column: _0, ...attr } = row.getToggleRowExpandedProps({ style, column: cell.column });
19+
2520
return (
2621
<>
27-
<span
28-
{...row.getToggleRowExpandedProps({ style, column: cell.column })}
22+
<button
23+
{...attr}
24+
className={clsx(attr.className, classes.expandGroupButton)}
2925
title={row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText}
26+
aria-label={row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText}
27+
tabIndex={-1}
3028
>
31-
<Icon name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow} style={tableGroupExpandCollapseIcon} />
32-
</span>
29+
<Icon name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow} className={classes.expandGroupIcon} />
30+
</button>
3331
{cell.render(RenderColumnTypes.Cell)}
3432
</>
3533
);
3634
};
35+
36+
Grouped.displayName = 'GroupedCellContent';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export const RepeatedValue = () => null;
2+
3+
RepeatedValue.displayName = 'RepeatedValueCellContent';

0 commit comments

Comments
 (0)