feat(a11y): add labels and roles [EE-6717] (#11209)

app/react/docker/networks/ListView/NestedNetwordsTable.tsx

@@ -16,5 +16,11 @@ export function NestedNetworksDatatable({
   const isSwarm = useIsSwarm(environmentId);
 
   const columns = useColumns(isSwarm);
-  return <NestedDatatable columns={columns} dataset={dataset} />;
+  return (
+    <NestedDatatable
+      columns={columns}
+      dataset={dataset}
+      aria-label="Networks table"
+    />
+  );
 }

app/react/docker/networks/ListView/columns/name.tsx

@@ -1,6 +1,7 @@
 import { truncate } from '@/portainer/filters/filters';
 
 import { Link } from '@@/Link';
+import { Badge } from '@@/Badge';
 
 import { columnHelper } from './helper';
 
@@ -18,12 +19,9 @@ export const name = columnHelper.accessor('Name', {
           {truncate(item.Name, 40)}
         </Link>
         {item.ResourceControl?.System && (
-          <span
-            style={{ marginLeft: '10px' }}
-            className="label label-info image-tag space-left"
-          >
+          <Badge type="info" className="ml-2">
             System
-          </span>
+          </Badge>
         )}
       </>
     );

app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx

@@ -24,6 +24,7 @@ export function TasksDatatable({
       dataset={dataset}
       search={search}
       emptyContentLabel="No task matching filter."
+      aria-label="Tasks table"
     />
   );
 }

app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx

@@ -108,7 +108,9 @@ function Cell({
         </Authorized>
       )}
       {item.dangling && (
-        <span className="label label-warning image-tag ml-2">Unused</span>
+        <span className="label label-warning image-tag ml-2" role="status">
+          Unused
+        </span>
       )}
     </>
   );