fix(a11y) improve several a11y issues

Signed-off-by: David Edler <david.edler@canonical.com>

.github/workflows/pr.yaml

@@ -134,6 +134,7 @@ jobs:
         run: npx playwright test
 
       - name: Save additional test information
+        if: always()
         run: |
           touch playwright-report/info.txt
           echo "HTML_REPORT_URL_PATH:$HTML_REPORT_URL_PATH" >> playwright-report/info.txt
@@ -147,6 +148,7 @@ jobs:
           retention-days: 30
 
       - name: Output Report URL as Worfklow Annotation
+        if: always()
         run: |
           FULL_HTML_REPORT_URL=https://canonical.github.io/lxd-ui/$HTML_REPORT_URL_PATH
           echo "::notice title=Published Playwright Test Report::$FULL_HTML_REPORT_URL"

src/components/forms/DiskDeviceFormCustom.tsx

@@ -126,6 +126,7 @@ const DiskDeviceFormCustom: FC<Props> = ({
                   id: `devices.${index}.pool`,
                   appearance: "base",
                   className: "u-no-margin--bottom",
+                  "aria-label": `Select storage volume`,
                 }}
               >
                 <Icon name="edit" />

src/components/forms/DiskSizeSelector.tsx

@@ -52,6 +52,8 @@ const DiskSizeSelector: FC<Props> = ({
         <Select
           id="memUnitSelect"
           name="memUnitSelect"
+          label="Select disk size unit"
+          labelClassName="u-off-screen"
           options={getMemUnitOptions()}
           onChange={(e) =>
             setMemoryLimit(`${limit.value ?? 0}${e.target.value}`)

src/components/forms/MemoryLimitSelector.tsx

@@ -157,6 +157,8 @@ const MemoryLimitSelector: FC<Props> = ({ memoryLimit, setMemoryLimit }) => {
           <Select
             id="memUnitSelect"
             name="memUnitSelect"
+            label="Select memory size unit"
+            labelClassName="u-off-screen"
             options={getMemUnitOptions()}
             onChange={(e) =>
               setMemoryLimit({

src/components/forms/RenameDiskDeviceInput.tsx

@@ -46,6 +46,7 @@ const RenameDiskDeviceInput: FC<Props> = ({
             onClick={() => setEditing(true)}
             appearance="base"
             className="u-no-margin--bottom"
+            aria-label={`Rename disk device`}
           >
             <Icon name="edit" />
           </Button>

src/pages/instances/FileRow.tsx

@@ -51,7 +51,7 @@ const FileRow: FC<FileRowProps> = ({ instance, path }) => {
           onClick={toggleVisibility}
         >
           <Icon name={isOpen ? "chevron-up" : "chevron-down"} />
-          <h3 className="p-code-snippet__title file-row-title">{fileName}</h3>
+          <h2 className="p-code-snippet__title file-row-title">{fileName}</h2>
         </Button>
         <a
           href={fileUrl}

src/pages/instances/InstanceSearchFilter.tsx

@@ -68,6 +68,7 @@ const InstanceSearchFilter: FC<Props> = ({ instances }) => {
 
   return (
     <div className="search-wrapper margin-right u-no-margin--bottom">
+      <h2 className="u-off-screen">Search and filter</h2>
       <SearchAndFilter
         existingSearchData={searchParamsToChips(searchParams, QUERY_PARAMS)}
         filterPanelData={searchAndFilterData}

src/pages/networks/forms/IpAddressSelector.tsx

@@ -27,6 +27,7 @@ const IpAddressSelector: FC<Props> = ({ id, address, setAddress }) => {
       <div className="ip-address-selector ip-address-custom">
         <RadioInput
           label=""
+          aria-label="custom"
           checked={isCustom}
           onChange={() => setAddress("")}
         />

src/pages/profiles/ProfileSelector.tsx

@@ -61,7 +61,7 @@ const ProfileSelector: FC<Props> = ({
 
   return (
     <>
-      <Label forId="profile-1">Profiles</Label>
+      <Label forId="profile-0">Profiles</Label>
       {selected.map((value, index) => (
         <div className="profile-select" key={value}>
           <div>

src/pages/settings/SettingFormCheckbox.tsx

@@ -29,21 +29,19 @@ const SettingFormCheckbox: FC<Props> = ({
     setChecked(String(configField.default) === "true");
   };
 
+  const label =
+    configField.key.split(".")?.pop()?.replaceAll("_", " ") ?? configField.key;
+
   return (
     <>
       <Input
-        aria-label={configField.key}
+        label={label}
         id={getConfigId(configField.key)}
         wrapperClassName="input-wrapper"
         type="checkbox"
         checked={checked}
         onChange={(e) => setChecked(e.target.checked)}
-        help={
-          <ConfigFieldDescription
-            description={configField.longdesc}
-            className="p-form-help-text"
-          />
-        }
+        help={<ConfigFieldDescription description={configField.longdesc} />}
       />
       <Button appearance="base" onClick={onCancel}>
         Cancel

src/pages/storage/StorageVolumesFilter.tsx

@@ -76,6 +76,7 @@ const StorageVolumesFilter: FC<Props> = ({ volumes }) => {
 
   return (
     <div className="search-wrapper margin-right u-sv3">
+      <h2 className="u-off-screen">Search and filter</h2>
       <SearchAndFilter
         existingSearchData={searchParamsToChips(searchParams, QUERY_PARAMS)}
         filterPanelData={searchAndFilterData}

tests/helpers/devices.ts

@@ -15,7 +15,7 @@ export const attachVolume = async (
 
 export const detachVolume = async (page: Page, volumeDevice: string) => {
   await page
-    .getByRole("row", { name: `${volumeDevice} Detach` })
+    .getByRole("row", { name: volumeDevice })
     .getByTitle("Detach")
     .click();
   await page