diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx index 6c5123806f94d..67202d5a0e08f 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx @@ -274,7 +274,7 @@ export default typedMemo(function DataTable({ prepareRow(row); const { key: rowKey, ...rowProps } = row.getRowProps(); return ( - + {row.cells.map(cell => cell.render('Cell', { key: cell.column.id }), )} @@ -295,7 +295,11 @@ export default typedMemo(function DataTable({ const { key: footerGroupKey, ...footerGroupProps } = footerGroup.getHeaderGroupProps(); return ( - + {footerGroup.headers.map(column => column.render('Footer', { key: column.id }), )} diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx index ba3466bb407fa..1b533c25decce 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx @@ -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, + )} ); } @@ -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} diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx index 8b361c614d628..d51a9dd10bea8 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx @@ -519,6 +519,8 @@ export default function TableChart( `; 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( 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( value && value < 0 ? 'negative' : 'positive', )} css={cellBarStyles} + role="presentation" /> )} {truncateLongCells ? ( @@ -593,13 +597,13 @@ export default function TableChart( }, Header: ({ column: col, onClick, style, onDragStart, onDrop }) => ( ) => { // programatically sort column on keypress if (Object.values(ACTION_KEYS).includes(e.key)) { @@ -615,6 +619,7 @@ export default function TableChart( onDragEnter: e => e.preventDefault(), onDrop, })} + tabIndex={0} > {/* can't use `columnWidth &&` because it may also be zero */} {config.columnWidth ? (