chore: fix app wide accessibility issues

- disable link in logo for small screen (reason: same adjacent link URL) - removed or changed title attribute so it's not identical to text content - TablePagination aria-label - remove uneccessary label for browse images button (InstanceCreateDetailsForm) - add text to hidden inputs - Resolve multiple label for the same form control - Remove uneccessary element titles or adjust for better meaning - Adjusted heading elements to not skip heirarchical order - Added aria-label for Select components that's missing labels - Added aria-label for Button components that's missing text (e.g. icon buttons) Signed-off-by: Mason Hu <[email protected]>
canonical · Feb 14, 2024 · 6e067b3 · 6e067b3
1 parent 2496a2b
commit 6e067b3
Show file tree

Hide file tree

Showing 40 changed files with 97 additions and 79 deletions.
diff --git a/src/components/RenameHeader.tsx b/src/components/RenameHeader.tsx
@@ -97,7 +97,7 @@ const RenameHeader: FC<Props> = ({
                 <li
                   className="p-breadcrumbs__item name u-truncate"
                   onClick={enableRename}
-                  title={name}
+                  title={`Rename ${name}`}
                 >
                   <Tooltip
                     message={!canRename && renameDisabledReason}

diff --git a/src/components/SnapshotScheduleInput.tsx b/src/components/SnapshotScheduleInput.tsx
@@ -3,27 +3,27 @@ import { Input, RadioInput, Select } from "@canonical/react-components";
 
 const snapshotOptions = [
   {
-    label: "minute",
+    label: "Every minute",
     value: "* * * * *",
   },
   {
-    label: "hour",
+    label: "Hourly",
     value: "@hourly",
   },
   {
-    label: "day",
+    label: "Daily",
     value: "@daily",
   },
   {
-    label: "week",
+    label: "Weekly",
     value: "@weekly",
   },
   {
-    label: "month",
+    label: "Monthly",
     value: "@monthly",
   },
   {
-    label: "year",
+    label: "Yearly",
     value: "@yearly",
   },
 ];
@@ -60,7 +60,6 @@ const SnapshotScheduleInput: FC<Props> = ({ value, setValue }) => {
         <Input
           id="snapshots_schedule"
           name="snapshots_schedule"
-          label="Cron expression"
           placeholder="Enter cron expression"
           help="<minute> <hour> <dom> <month> <dow>, a comma-separated list of schedule aliases (@hourly, @daily, @midnight, @weekly, @monthly, @annually, @yearly), or empty to disable automatic snapshots (the default)"
           type="text"
@@ -71,7 +70,6 @@ const SnapshotScheduleInput: FC<Props> = ({ value, setValue }) => {
         <Select
           id="snapshots_schedule"
           name="snapshots_schedule"
-          label="Every"
           value={value}
           onChange={(e) => setValue(e.target.value)}
           options={snapshotOptions}

diff --git a/src/components/forms/DiskDeviceForm.tsx b/src/components/forms/DiskDeviceForm.tsx
@@ -61,7 +61,7 @@ const DiskDeviceForm: FC<Props> = ({ formik, project }) => {
     >
       <ScrollableForm>
         {/* hidden submit to enable enter key in inputs */}
-        <Input type="submit" hidden />
+        <Input type="submit" hidden value="Hidden input" />
         <DiskDeviceFormRoot
           formik={formik}
           project={project}

diff --git a/src/components/forms/DiskDeviceRow.tsx b/src/components/forms/DiskDeviceRow.tsx
@@ -34,14 +34,27 @@ export const getDiskDeviceRow = ({
   return getConfigurationRowBase({
     className: classnames("no-border-top", className),
     configuration: id ? (
-      <Label
-        forId={id}
-        className={classnames({
-          "u-text--muted": isDeactivated,
-        })}
-      >
-        {label}
-      </Label>
+      !readOnly && overrideValue ? (
+        <Label
+          forId={id}
+          className={classnames({
+            "u-text--muted": isDeactivated,
+          })}
+        >
+          {label}
+        </Label>
+      ) : (
+        <p
+          className={classnames(
+            "p-form__label u-no-margin--bottom u-no-padding--top",
+            {
+              "u-text--muted": isDeactivated,
+            },
+          )}
+        >
+          {label}
+        </p>
+      )
     ) : (
       <div
         className={classnames({

diff --git a/src/components/forms/YamlForm.tsx b/src/components/forms/YamlForm.tsx
@@ -50,7 +50,7 @@ const YamlForm: FC<Props> = ({
         <Editor
           defaultValue={yaml}
           language="yaml"
-          theme="vs-dark"
+          theme="hc-black"
           onChange={(value) => value && setYaml && setYaml(value)}
           options={{
             fontSize: 18,

diff --git a/src/pages/cluster/ClusterList.tsx b/src/pages/cluster/ClusterList.tsx
@@ -95,6 +95,7 @@ const ClusterList: FC = () => {
                 id="pagination"
                 itemName="cluster member"
                 className="u-no-margin--top"
+                aria-label="Table pagination control"
               >
                 <MainTable
                   id="cluster-table"

diff --git a/src/pages/images/ImageList.tsx b/src/pages/images/ImageList.tsx
@@ -249,6 +249,7 @@ const ImageList: FC = () => {
               id="pagination"
               itemName="image"
               className="u-no-margin--top"
+              aria-label="Table pagination control"
               description={
                 selectedNames.length > 0 && (
                   <SelectedTableNotification

diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
@@ -423,6 +423,7 @@ const CreateInstance: FC = () => {
                 <Notification
                   severity="caution"
                   title="Before you edit the YAML"
+                  titleElement="h2"
                 >
                   Changes will be discarded, when switching back to the guided
                   forms.

diff --git a/src/pages/instances/InstanceIps.tsx b/src/pages/instances/InstanceIps.tsx
@@ -16,7 +16,7 @@ const InstanceIps: FC<Props> = ({ instance, family }) => {
         <div
           key={item.address}
           className="ip u-truncate"
-          title={`${item.address} (${item.iface})`}
+          title={`IP ${item.address} (${item.iface})`}
         >
           {item.address} ({item.iface})
         </div>

diff --git a/src/pages/instances/InstanceList.tsx b/src/pages/instances/InstanceList.tsx
@@ -330,7 +330,7 @@ const InstanceList: FC = () => {
         columns: [
           {
             content: (
-              <div className="u-truncate" title={instance.name}>
+              <div className="u-truncate" title={`Instance ${instance.name}`}>
                 <InstanceLink instance={instance} />
               </div>
             ),
@@ -555,6 +555,7 @@ const InstanceList: FC = () => {
                   id="pagination"
                   itemName="instance"
                   className="u-no-margin--top"
+                  aria-label="Table pagination control"
                   description={
                     selectedNames.length > 0 && (
                       <SelectedTableNotification

diff --git a/src/pages/instances/InstanceOverviewNetworks.tsx b/src/pages/instances/InstanceOverviewNetworks.tsx
@@ -64,7 +64,7 @@ const InstanceOverviewNetworks: FC<Props> = ({ instance, onFailure }) => {
             content: (
               <Link
                 to={`/ui/project/${instance.project}/networks/detail/${network.name}`}
-                title={network.name}
+                title={`Network ${network.name}`}
               >
                 {network.name}
               </Link>

diff --git a/src/pages/instances/InstanceOverviewProfiles.tsx b/src/pages/instances/InstanceOverviewProfiles.tsx
@@ -49,7 +49,7 @@ const InstanceOverviewProfiles: FC<Props> = ({ instance, onFailure }) => {
           content: (
             <Link
               to={`/ui/project/${instance.project}/profiles/detail/${profile}`}
-              title={profile}
+              title={`Profile ${profile}`}
             >
               {profile}
             </Link>
@@ -60,7 +60,7 @@ const InstanceOverviewProfiles: FC<Props> = ({ instance, onFailure }) => {
         {
           content: description,
           role: "rowheader",
-          title: description,
+          title: `Description ${description}`,
           "aria-label": "Description",
         },
       ],

diff --git a/src/pages/instances/InstanceSnapshots.tsx b/src/pages/instances/InstanceSnapshots.tsx
@@ -128,7 +128,7 @@ const InstanceSnapshots = (props: Props) => {
         {
           content: (
             <>
-              <div className="u-truncate" title={snapshot.name}>
+              <div className="u-truncate" title={`Snapshot ${snapshot.name}`}>
                 <ItemName item={snapshot} />
               </div>
               {isSmallScreen && (
@@ -253,6 +253,7 @@ const InstanceSnapshots = (props: Props) => {
               id="pagination"
               itemName="snapshot"
               className="u-no-margin--top"
+              aria-label="Table pagination control"
               description={
                 selectedNames.length > 0 && (
                   <SelectedTableNotification

diff --git a/src/pages/instances/TerminalPayloadForm.tsx b/src/pages/instances/TerminalPayloadForm.tsx
@@ -95,7 +95,7 @@ const TerminalPayloadForm: FC<Props> = ({ payload, close, reconnect }) => {
     >
       <Form onSubmit={formik.handleSubmit}>
         {/* hidden submit to enable enter key in inputs */}
-        <Input type="submit" hidden />
+        <Input type="submit" hidden value="Hidden input" />
         <div className="content-wrapper">
           <Input
             id="command"

diff --git a/src/pages/instances/forms/InstanceCreateDetailsForm.tsx b/src/pages/instances/forms/InstanceCreateDetailsForm.tsx
@@ -103,11 +103,9 @@ const InstanceCreateDetailsForm: FC<Props> = ({
       </Row>
       <Row>
         <Col size={12}>
-          <label className="p-form__label" htmlFor="base-image">
-            Base Image*
-          </label>
+          <p className="p-form__label">Base Image*</p>
           <div className="p-form__control u-clearfix base-image">
-            {formik.values.image && (
+            {formik.values.image ? (
               <>
                 <span className="u-text--muted u-truncate u-sv3 image-name">
                   {figureBaseImageName()}
@@ -122,8 +120,7 @@ const InstanceCreateDetailsForm: FC<Props> = ({
                   <Icon name="close" />
                 </Button>
               </>
-            )}
-            {!formik.values.image && (
+            ) : (
               <>
                 <SelectImageBtn onSelect={onSelectImage} />
                 <UseCustomIsoBtn onSelect={onSelectImage} />

diff --git a/src/pages/networks/actions/DeleteNetworkBtn.tsx b/src/pages/networks/actions/DeleteNetworkBtn.tsx
@@ -49,7 +49,7 @@ const DeleteNetworkBtn: FC<Props> = ({ network, project }) => {
           ? "Can not delete, network is not managed"
           : isUsed
             ? "Can not delete, network is currently in use"
-            : "Delete network"
+            : ""
       }
       confirmationModalProps={{
         title: "Confirm delete",

diff --git a/src/pages/networks/forms/NetworkForm.tsx b/src/pages/networks/forms/NetworkForm.tsx
@@ -126,7 +126,7 @@ const NetworkForm: FC<Props> = ({
   return (
     <Form className="form network-form" onSubmit={formik.handleSubmit}>
       {/* hidden submit to enable enter key in inputs */}
-      <Input type="submit" hidden />
+      <Input type="submit" hidden value="Hidden input" />
       <NetworkFormMenu
         active={section}
         setActive={setSection}
@@ -147,7 +147,11 @@ const NetworkForm: FC<Props> = ({
               setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
               readOnly={formik.values.readOnly}
             >
-              <Notification severity="caution" title="Before you edit the YAML">
+              <Notification
+                severity="caution"
+                title="Before you edit the YAML"
+                titleElement="h2"
+              >
                 Changes will be discarded, when switching back to the guided
                 forms.
               </Notification>

diff --git a/src/pages/networks/forms/NetworkForwardForm.tsx b/src/pages/networks/forms/NetworkForwardForm.tsx
@@ -113,10 +113,14 @@ const NetworkForwardForm: FC<Props> = ({
         <Col size={12}>
           <ScrollableForm>
             {/* hidden submit to enable enter key in inputs */}
-            <Input type="submit" hidden />
+            <Input type="submit" hidden value="Hidden input" />
             <Row className="p-form__group p-form-validation">
               <NotificationRow />
-              <Notification severity="information" title="Network information">
+              <Notification
+                severity="information"
+                title="Network information"
+                titleElement="h2"
+              >
                 Name: {network?.name}
                 <br />
                 {network?.config["ipv4.address"] && (

diff --git a/src/pages/networks/forms/NetworkForwardFormPorts.tsx b/src/pages/networks/forms/NetworkForwardFormPorts.tsx
@@ -59,7 +59,7 @@ const NetworkForwardFormPorts: FC<Props> = ({ formik, network }) => {
               Target port
             </Label>
           </th>
-          <th />
+          <th className="u-off-screen">Actions</th>
         </tr>
       </thead>
       <tbody>
@@ -75,8 +75,7 @@ const NetworkForwardFormPorts: FC<Props> = ({ formik, network }) => {
                   {...formik.getFieldProps(`ports.${index}.listenPort`)}
                   id={`ports.${index}.listenPort`}
                   type="text"
-                  label="Listen port"
-                  labelClassName="u-off-screen"
+                  aria-label={`Port ${index} listen port`}
                   placeholder="Port number(s)"
                   help={
                     index === formik.values.ports.length - 1 && (
@@ -98,17 +97,15 @@ const NetworkForwardFormPorts: FC<Props> = ({ formik, network }) => {
                     { label: "TCP", value: "tcp" },
                     { label: "UDP", value: "udp" },
                   ]}
-                  label="Protocol"
-                  labelClassName="u-off-screen"
+                  aria-label={`Port ${index} protocol`}
                 />
               </td>
               <td className="target-address">
                 <Input
                   {...formik.getFieldProps(`ports.${index}.targetAddress`)}
                   id={`ports.${index}.targetAddress`}
                   type="text"
-                  label="Target address"
-                  labelClassName="u-off-screen"
+                  aria-label={`Port ${index} target address`}
                   placeholder="Enter IP address"
                   help={
                     index === formik.values.ports.length - 1 && (
@@ -129,8 +126,7 @@ const NetworkForwardFormPorts: FC<Props> = ({ formik, network }) => {
                   {...formik.getFieldProps(`ports.${index}.targetPort`)}
                   id={`ports.${index}.targetPort`}
                   type="text"
-                  label="Target port"
-                  labelClassName="u-off-screen"
+                  aria-label={`Port ${index} target port`}
                   placeholder="Port number(s)"
                   help={
                     index === formik.values.ports.length - 1 &&
@@ -154,6 +150,7 @@ const NetworkForwardFormPorts: FC<Props> = ({ formik, network }) => {
                   hasIcon
                   className="u-no-margin--bottom"
                   type="button"
+                  aria-label={`Delete port ${index}`}
                 >
                   <Icon name="delete" />
                 </Button>

diff --git a/src/pages/profiles/CreateProfile.tsx b/src/pages/profiles/CreateProfile.tsx
@@ -203,6 +203,7 @@ const CreateProfile: FC = () => {
                 <Notification
                   severity="caution"
                   title="Before you edit the YAML"
+                  titleElement="h2"
                 >
                   Changes will be discarded, when switching back to the guided
                   forms.

diff --git a/src/pages/profiles/EditProfile.tsx b/src/pages/profiles/EditProfile.tsx
@@ -232,6 +232,7 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
                   <Notification
                     severity="caution"
                     title="Before you edit the YAML"
+                    titleElement="h2"
                   >
                     Changes will be discarded, when switching back to the guided
                     forms.

diff --git a/src/pages/profiles/ProfileList.tsx b/src/pages/profiles/ProfileList.tsx
@@ -114,7 +114,7 @@ const ProfileList: FC = () => {
       columns: [
         {
           content: (
-            <div className="u-truncate" title={profile.name}>
+            <div className="u-truncate" title={`Profile ${profile.name}`}>
               <ProfileLink
                 profile={{ name: profile.name, project: projectName }}
               />
@@ -126,7 +126,10 @@ const ProfileList: FC = () => {
         },
         {
           content: (
-            <div className="profile-description" title={profile.description}>
+            <div
+              className="profile-description"
+              title={`Description ${profile.description}`}
+            >
               {profile.description}
             </div>
           ),
@@ -227,6 +230,7 @@ const ProfileList: FC = () => {
               data={sortedRows}
               itemName="profile"
               className="u-no-margin--top"
+              aria-label="Table pagination control"
             >
               <MainTable
                 id="profile-table"

diff --git a/src/pages/profiles/ProfileNetworkList.tsx b/src/pages/profiles/ProfileNetworkList.tsx
@@ -18,7 +18,7 @@ const ProfileNetworkList: FC<Props> = ({ profile }) => {
               <div
                 key={device.network}
                 className="u-truncate list-item"
-                title={device.network}
+                title={`Network ${device.network}`}
               >
                 {device.network}
               </div>