mirror of https://github.com/apache/superset.git
chore(Dashboard): Improve Table accessibility (#28059)
This commit is contained in:
parent
0e096e8001
commit
69a7bfc88d
|
@ -274,7 +274,7 @@ export default typedMemo(function DataTable<D extends object>({
|
|||
prepareRow(row);
|
||||
const { key: rowKey, ...rowProps } = row.getRowProps();
|
||||
return (
|
||||
<tr key={rowKey || row.id} {...rowProps}>
|
||||
<tr key={rowKey || row.id} {...rowProps} role="row">
|
||||
{row.cells.map(cell =>
|
||||
cell.render('Cell', { key: cell.column.id }),
|
||||
)}
|
||||
|
@ -295,7 +295,11 @@ export default typedMemo(function DataTable<D extends object>({
|
|||
const { key: footerGroupKey, ...footerGroupProps } =
|
||||
footerGroup.getHeaderGroupProps();
|
||||
return (
|
||||
<tr key={footerGroupKey || footerGroup.id} {...footerGroupProps}>
|
||||
<tr
|
||||
key={footerGroupKey || footerGroup.id}
|
||||
{...footerGroupProps}
|
||||
role="row"
|
||||
>
|
||||
{footerGroup.headers.map(column =>
|
||||
column.render('Footer', { key: column.id }),
|
||||
)}
|
||||
|
|
|
@ -216,6 +216,7 @@ function StickyWrap({
|
|||
let headerTable: ReactElement | undefined;
|
||||
let footerTable: ReactElement | undefined;
|
||||
let bodyTable: ReactElement | undefined;
|
||||
|
||||
if (needSizer) {
|
||||
const theadWithRef = React.cloneElement(thead, { ref: theadRef });
|
||||
const tfootWithRef = tfoot && React.cloneElement(tfoot, { ref: tfootRef });
|
||||
|
@ -228,8 +229,15 @@ function StickyWrap({
|
|||
visibility: 'hidden',
|
||||
scrollbarGutter: 'stable',
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
{React.cloneElement(table, {}, theadWithRef, tbody, tfootWithRef)}
|
||||
{React.cloneElement(
|
||||
table,
|
||||
{ role: 'presentation' },
|
||||
theadWithRef,
|
||||
tbody,
|
||||
tfootWithRef,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -255,9 +263,10 @@ function StickyWrap({
|
|||
overflow: 'hidden',
|
||||
scrollbarGutter: 'stable',
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
{React.cloneElement(
|
||||
table,
|
||||
React.cloneElement(table, { role: 'presentation' }),
|
||||
mergeStyleProp(table, fixedTableLayout),
|
||||
colgroup,
|
||||
thead,
|
||||
|
@ -274,9 +283,10 @@ function StickyWrap({
|
|||
overflow: 'hidden',
|
||||
scrollbarGutter: 'stable',
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
{React.cloneElement(
|
||||
table,
|
||||
React.cloneElement(table, { role: 'presentation' }),
|
||||
mergeStyleProp(table, fixedTableLayout),
|
||||
colgroup,
|
||||
tfoot,
|
||||
|
@ -303,9 +313,10 @@ function StickyWrap({
|
|||
scrollbarGutter: 'stable',
|
||||
}}
|
||||
onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}
|
||||
role="presentation"
|
||||
>
|
||||
{React.cloneElement(
|
||||
table,
|
||||
React.cloneElement(table, { role: 'presentation' }),
|
||||
mergeStyleProp(table, fixedTableLayout),
|
||||
colgroup,
|
||||
tbody,
|
||||
|
@ -321,6 +332,7 @@ function StickyWrap({
|
|||
height: sticky.realHeight || maxHeight,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
role="table"
|
||||
>
|
||||
{headerTable}
|
||||
{bodyTable}
|
||||
|
|
|
@ -519,6 +519,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
|||
`;
|
||||
|
||||
const cellProps = {
|
||||
'aria-labelledby': `header-${column.key}`,
|
||||
role: 'cell',
|
||||
// show raw number in title in case of numeric values
|
||||
title: typeof value === 'number' ? String(value) : undefined,
|
||||
onClick:
|
||||
|
@ -547,6 +549,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
|||
value == null ? 'dt-is-null' : '',
|
||||
isActiveFilterValue(key, value) ? ' dt-is-active-filter' : '',
|
||||
].join(' '),
|
||||
tabIndex: 0,
|
||||
};
|
||||
if (html) {
|
||||
if (truncateLongCells) {
|
||||
|
@ -576,6 +579,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
|||
value && value < 0 ? 'negative' : 'positive',
|
||||
)}
|
||||
css={cellBarStyles}
|
||||
role="presentation"
|
||||
/>
|
||||
)}
|
||||
{truncateLongCells ? (
|
||||
|
@ -593,13 +597,13 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
|||
},
|
||||
Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
|
||||
<th
|
||||
id={`header-${column.key}`}
|
||||
title={t('Shift + Click to sort by multiple columns')}
|
||||
className={[className, col.isSorted ? 'is-sorted' : ''].join(' ')}
|
||||
style={{
|
||||
...sharedStyle,
|
||||
...style,
|
||||
}}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
|
||||
// programatically sort column on keypress
|
||||
if (Object.values(ACTION_KEYS).includes(e.key)) {
|
||||
|
@ -615,6 +619,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
|||
onDragEnter: e => e.preventDefault(),
|
||||
onDrop,
|
||||
})}
|
||||
tabIndex={0}
|
||||
>
|
||||
{/* can't use `columnWidth &&` because it may also be zero */}
|
||||
{config.columnWidth ? (
|
||||
|
|
Loading…
Reference in New Issue