patternfly: Give empty "Th" elements a aria-label attribute

As requested by this warning: 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. We can't use screenReaderText because of patternfly/patternfly#6643
cockpit-project · May 14, 2024 · 183813d · 183813d
1 parent ab2bca5
commit 183813d
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 7 deletions.
diff --git a/src/components/networks/networkList.jsx b/src/components/networks/networkList.jsx
@@ -69,7 +69,7 @@ export class NetworkList extends React.Component {
                                     { title: _("Connection"), props: { width: 15 } },
                                     { title: _("Forwarding mode"), props: { width: 15 } },
                                     { title: _("State"), props: { width: 20 } },
-                                    { title: "", props: { width: 20 } },
+                                    { title: "", props: { width: 20, "aria-label": _("Actions") } },
                                 ]}
                                 emptyCaption={_("No network is defined on this host")}
                                 rows={networks

diff --git a/src/components/storagePools/storagePoolList.jsx b/src/components/storagePools/storagePoolList.jsx
@@ -69,7 +69,7 @@ export class StoragePoolList extends React.Component {
                                                   { title: _("Size"), props: { width: 40 } },
                                                   { title: _("Connection"), props: { width: 15 } },
                                                   { title: _("State"), props: { width: 15 } },
-                                                  { title: "", props: { width: 15 } },
+                                                  { title: "", props: { width: 15, "aria-label": _("Actions") } },
                                               ]}
                                               emptyCaption={_("No storage pool is defined on this host")}
                                               rows={storagePools

diff --git a/src/components/vm/disks/vmDisksCard.jsx b/src/components/vm/disks/vmDisksCard.jsx
@@ -191,7 +191,7 @@ export const VmDisksCard = ({ vm, vms, disks, renderCapacity, supportedDiskBusTy
         if (renderAdditional)
             columnTitles.push(_("Additional"));
 
-        columnTitles.push('');
+        columnTitles.push({ title: '', props: { "aria-label": _("Actions") } });
     }
 
     const rows = disks.map(disk => {

diff --git a/src/components/vm/hostdevs/hostDevAdd.jsx b/src/components/vm/hostdevs/hostDevAdd.jsx
@@ -125,7 +125,10 @@ const DevRow = ({ idPrefix, type, selectableDevices, setSelectableDevices }) =>
                    className="vm-device-table"
                    aria-label={_("Table of selectable host devices")}>
                 <Thead>
-                    <Tr><Th />{[_("Product"), _("Vendor"), _("Location")].map(col => <Th key={col}>{col}</Th>)}</Tr>
+                    <Tr>
+                        <Th aria-label={_("Row select")} />
+                        {[_("Product"), _("Vendor"), _("Location")].map(col => <Th key={col}>{col}</Th>)}
+                    </Tr>
                 </Thead>
                 <Tbody>
                     {selectableDevices.map((dev, rowIndex) => {

diff --git a/src/components/vm/nics/vmNicsCard.jsx b/src/components/vm/nics/vmNicsCard.jsx
@@ -418,6 +418,7 @@ export class VmNetworkTab extends React.Component {
             },
             {
                 name: "",
+                aria: _("Actions"),
                 value: (network, networkId) => {
                     const isUp = network.state === 'up';
                     const nicPersistent = !!vm.inactiveXML.interfaces.filter(iface => iface.mac == network.mac).length;
@@ -527,7 +528,7 @@ export class VmNetworkTab extends React.Component {
         let networkId = 1;
         detailMap = detailMap.filter(d => !d.hidden);
 
-        const columnTitles = detailMap.map(target => target.name);
+        const columnTitles = detailMap.map(target => ({ title: target.name, props: { "aria-label": target.aria } }));
         const sortIfaces = (a, b) => {
             if (a.type !== b.type)
                 return a.type > b.type ? 1 : -1;

diff --git a/src/components/vm/snapshots/vmSnapshotsCard.jsx b/src/components/vm/snapshots/vmSnapshotsCard.jsx
@@ -159,6 +159,7 @@ export class VmSnapshotsCard extends React.Component {
             },
             {
                 name: "",
+                aria: _("Actions"),
                 value: (snap, snapId) => {
                     const revertSnapshotHelper = () => {
                         const revertDialogProps = {
@@ -210,7 +211,10 @@ export class VmSnapshotsCard extends React.Component {
 
         detailMap = detailMap.filter(d => !d.hidden);
 
-        const columnTitles = detailMap.map(target => ({ title: target.name, props: { width: 15 } }));
+        const columnTitles = detailMap.map(target => ({
+            title: target.name,
+            props: { width: 15, "aria-label": target.aria }
+        }));
         let rows = [];
         if (vm.snapshots) {
             rows = vm.snapshots.sort((a, b) => ((b.creationTime - a.creationTime) || (a.name.localeCompare(b.name)))).map((target, snapId) => {

diff --git a/src/components/vms/hostvmslist.jsx b/src/components/vms/hostvmslist.jsx
@@ -161,7 +161,7 @@ const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddEr
                                 { title: _("Name"), header: true, props: { width: 25 } },
                                 { title: _("Connection"), props: { width: 25 } },
                                 { title: _("State"), props: { width: 25 } },
-                                { title: "", props: { width: 25 } },
+                                { title: "", props: { width: 25, "aria-label": _("Actions") } },
                             ]}
                             emptyCaption={_("No VM is running or defined on this host")}
                             rows={ combinedVmsFiltered