Improve accessibility (#1956)

Fixes several accessibility issues:

- Provide a style for empty table column headers
- Add aria references and aria-labels
- Remove aria references if the referenced element is not rendered
This commit is contained in:
Matthias Thieroff
2022-02-17 14:00:16 +01:00
committed by GitHub
parent 9fa0396167
commit 1fe7b0a01e
12 changed files with 61 additions and 33 deletions

View File

@@ -37,6 +37,7 @@ type Props = {
label?: string;
testId?: string;
searchPlaceholder?: string;
groupAriaLabelledby?: string;
};
const createAbsoluteLink = (url: string) => {
@@ -52,7 +53,8 @@ const OverviewPageActions: FC<Props> = ({
groupSelected,
label,
testId,
searchPlaceholder
searchPlaceholder,
groupAriaLabelledby
}) => {
const history = useHistory();
const location = useLocation();
@@ -62,6 +64,7 @@ const OverviewPageActions: FC<Props> = ({
const groupSelector = groups && (
<div className="column is-flex">
<Select
ariaLabelledby={groupAriaLabelledby}
className="is-fullwidth"
options={groups.map(g => ({ value: g, label: g }))}
value={currentGroup}