diff --git a/packages/volto-slate/news/6358.feature b/packages/volto-slate/news/6358.feature new file mode 100644 index 0000000000..7000be17cd --- /dev/null +++ b/packages/volto-slate/news/6358.feature @@ -0,0 +1 @@ +Improve accessibility for sortable table headers in table block. @kreafox \ No newline at end of file diff --git a/packages/volto-slate/src/blocks/Table/TableBlockView.jsx b/packages/volto-slate/src/blocks/Table/TableBlockView.jsx index 4e10c84dcc..efdacef89e 100644 --- a/packages/volto-slate/src/blocks/Table/TableBlockView.jsx +++ b/packages/volto-slate/src/blocks/Table/TableBlockView.jsx @@ -71,6 +71,19 @@ const View = ({ data }) => { }); }, [state, rows]); + const handleSort = (index) => { + if (!data.table.sortable) return; + setState({ + column: index, + direction: + state.column !== index + ? 'ascending' + : state.direction === 'ascending' + ? 'descending' + : 'ascending', + }); + }; + return ( <> {data && data.table && ( @@ -92,19 +105,20 @@ const View = ({ data }) => { key={cell.key} textAlign="left" verticalAlign="middle" + tabIndex={data.table.sortable ? '0' : '-1'} sorted={state.column === index ? state.direction : null} onClick={() => { - if (!data.table.sortable) return; - setState({ - column: index, - direction: - state.column !== index - ? 'ascending' - : state.direction === 'ascending' - ? 'descending' - : 'ascending', - }); + handleSort(index); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSort(index); + } }} + aria-sort={ + state.column === index ? state.direction : 'none' + } > {cell.value && Node.string({ children: cell.value }).length > 0