QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-09 19:35:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(Dashboard): Improve Table accessibility (#28059)

Browse Source
This commit is contained in:
Geido
2024-04-17 18:24:07 +02:00
committed by GitHub
parent 0e096e8001
commit 69a7bfc88d
3 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
View File

@@ -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 }),
)}

20
superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
View File

@@ -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}