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:
parent
7ac505fc89
commit
8a25ec66f3
6 changed files with 14 additions and 11 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue