src: Fix "Table headers must have an accessible name" warning

The tests output contained following warning:

```
console.warn
    Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.
```

This fixes the warning by adding an `aria-label` to every empty table heading cell.
This commit is contained in:
regexowl 2024-05-07 14:38:53 +02:00 committed by Lucas Garfield
parent 7ac505fc89
commit 8a25ec66f3
6 changed files with 14 additions and 11 deletions

View file

@ -379,7 +379,7 @@ const FileSystemConfiguration = ({ ...props }) => {
>
<Thead>
<Tr>
<Th />
<Th aria-label="Drag mount point" />
<Th>Mount point</Th>
<Th>Type</Th>
<Th>
@ -405,7 +405,7 @@ const FileSystemConfiguration = ({ ...props }) => {
</Button>
</Popover>
</Th>
<Th />
<Th aria-label="Remove mount point" />
</Tr>
</Thead>
<Tbody

View file

@ -440,7 +440,7 @@ const Repositories = (props) => {
<Table variant="compact" data-testid="repositories-table">
<Thead>
<Tr>
<Th />
<Th aria-label="Selected" />
<Th width={45}>Name</Th>
<Th width={15}>Architecture</Th>
<Th>Version</Th>

View file

@ -190,15 +190,15 @@ const FileSystemTable = () => {
>
<Thead>
<Tr>
<Th />
<Th aria-label="Drag mount point" />
<Th>Mount point</Th>
<Th></Th>
<Th aria-label="Suffix"></Th>
<Th>Type</Th>
<Th>
Minimum size <MinimumSizePopover />
</Th>
<Th />
<Th />
<Th aria-label="Unit" />
<Th aria-label="Remove mount point" />
</Tr>
</Thead>

View file

@ -960,7 +960,7 @@ const Packages = () => {
<Table variant="compact" data-testid="packages-table">
<Thead>
<Tr>
<Th />
<Th aria-label="Selected" />
<Th width={20}>Package name</Th>
<Th width={35}>
Description

View file

@ -535,7 +535,7 @@ const Repositories = () => {
<Table variant="compact" data-testid="repositories-table">
<Thead>
<Tr>
<Th />
<Th aria-label="Selected" />
<Th width={45}>Name</Th>
<Th width={15}>Architecture</Th>
<Th>Version</Th>

View file

@ -190,7 +190,10 @@ const ImagesTable = () => {
<Table variant="compact" data-testid="images-table">
<Thead>
<Tr>
<Th style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }} />
<Th
style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }}
aria-label="Details expandable"
/>
<Th>Name</Th>
<Th>Updated</Th>
<Th>OS</Th>
@ -198,7 +201,7 @@ const ImagesTable = () => {
{experimentalFlag && <Th>Version</Th>}
<Th>Status</Th>
<Th>Instance</Th>
<Th />
<Th aria-label="Actions menu" />
</Tr>
</Thead>
{itemCount === 0 && (