Skip to content

[EuiDataGrid] Fix/improve screen reader accessibility for column headers #6034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 8 commits into from
Jul 19, 2022
Merged

[EuiDataGrid] Fix/improve screen reader accessibility for column headers #6034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ee6f20f
Improve 'Header actions' button label
cee-chen Jul 6, 2022
8dfb15c
[Setup] Move all sorting-related logic to a separate util
cee-chen Jul 6, 2022
11ac2b9
Move sorting text to `aria-describedby` as well
cee-chen Jul 7, 2022
f913b0e
Simplify `aria-sort` prop
cee-chen Jul 7, 2022
2eb051c
Improve sorting screen reader text
cee-chen Jul 7, 2022
5e89fa9
Unit tests
cee-chen Jul 7, 2022
43d6ad0
Changelog
cee-chen Jul 7, 2022
a5d2efc
Fix data_grid.spec.tsx failure
cee-chen Jul 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 96 additions & 24 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1070,6 +1070,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -1083,12 +1084,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
<div
class="euiDataGridHeaderCell"
Expand All @@ -1113,6 +1122,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -1126,12 +1136,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
</div>
<div
Expand Down Expand Up @@ -1509,6 +1527,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -1522,12 +1541,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
<div
class="euiDataGridHeaderCell"
Expand All @@ -1552,6 +1579,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -1565,12 +1593,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
<div
class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
Expand Down Expand Up @@ -2245,6 +2281,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -2258,12 +2295,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
<div
class="euiDataGridHeaderCell"
Expand All @@ -2288,6 +2333,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -2303,12 +2349,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
</div>
<div
Expand Down Expand Up @@ -2664,6 +2718,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -2677,12 +2732,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
<div
class="euiDataGridHeaderCell"
Expand All @@ -2707,6 +2770,7 @@ Array [
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -2720,12 +2784,20 @@ Array [
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
</div>
<div
Expand Down
30 changes: 24 additions & 6 deletions src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ exports[`EuiDataGridBody renders 1`] = `
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -49,12 +50,20 @@ exports[`EuiDataGridBody renders 1`] = `
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnA"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
<div
class="euiDataGridHeaderCell euiDataGridHeaderCell--string"
Expand All @@ -79,6 +88,7 @@ exports[`EuiDataGridBody renders 1`] = `
class="euiPopover__anchor eui-fullWidth"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
>
<div
Expand All @@ -92,12 +102,20 @@ exports[`EuiDataGridBody renders 1`] = `
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnB"
>
Header actions
</span>
/>
</button>
</div>
</div>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_actions"
>
Click to view column header actions
</p>
</div>
</div>
<div
Expand Down
15 changes: 14 additions & 1 deletion src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
anchorPosition="downCenter"
button={
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
className="euiDataGridHeaderCell__button"
onClick={[Function]}
>
Expand All @@ -28,7 +29,6 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
someColumn
</div>
<EuiIcon
aria-label="Header actions"
className="euiDataGridHeaderCell__icon"
color="text"
data-test-subj="dataGridHeaderCellActionButton-someColumn"
Expand Down Expand Up @@ -99,5 +99,18 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
}
/>
</EuiPopover>
<p
hidden={true}
id="euiDataGridCellHeader_generated-id_sorting"
/>
<p
hidden={true}
id="euiDataGridCellHeader_generated-id_actions"
>
<EuiI18n
default="Click to view column header actions"
token="euiDataGridHeaderCell.headerActions"
/>
</p>
</EuiDataGridHeaderCellWrapper>
`;
Loading