From 00dad0f4e816f488bf4ac1c3773c57bb448551d9 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 22 Sep 2021 21:23:54 +0100
Subject: [PATCH] A11y: Fix fastpass issues for /admin/* pages (#39435)

* A11y: Fix fastpass issues for /admin/* pages
See #39429
---
 public/app/features/admin/AdminEditOrgPage.tsx |  2 +-
 public/app/features/admin/AdminOrgsTable.tsx   |  8 +++++++-
 public/app/features/admin/OrgRolePicker.tsx    |  4 +++-
 public/app/features/admin/UpgradePage.tsx      |  2 +-
 public/app/features/users/UsersTable.tsx       | 11 +++++++++--
 .../__snapshots__/UsersTable.test.tsx.snap     | 18 ++++++++++++++++++
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/public/app/features/admin/AdminEditOrgPage.tsx b/public/app/features/admin/AdminEditOrgPage.tsx
index 87b3dd13e59..8853af76cc2 100644
--- a/public/app/features/admin/AdminEditOrgPage.tsx
+++ b/public/app/features/admin/AdminEditOrgPage.tsx
@@ -66,7 +66,7 @@ export const AdminEditOrgPage: FC<Props> = ({ match }) => {
               {({ register, errors }) => (
                 <>
                   <Field label="Name" invalid={!!errors.orgName} error="Name is required">
-                    <Input {...register('orgName', { required: true })} />
+                    <Input {...register('orgName', { required: true })} id="org-name-input" />
                   </Field>
                   <Button>Update</Button>
                 </>
diff --git a/public/app/features/admin/AdminOrgsTable.tsx b/public/app/features/admin/AdminOrgsTable.tsx
index e1deb92ac1e..c2a92e5f0e9 100644
--- a/public/app/features/admin/AdminOrgsTable.tsx
+++ b/public/app/features/admin/AdminOrgsTable.tsx
@@ -28,7 +28,13 @@ export const AdminOrgsTable: FC<Props> = ({ orgs, onDelete }) => {
               <a href={`admin/orgs/edit/${org.id}`}>{org.name}</a>
             </td>
             <td className="text-right">
-              <Button variant="destructive" size="sm" icon="times" onClick={() => setDeleteOrg(org)} />
+              <Button
+                variant="destructive"
+                size="sm"
+                icon="times"
+                onClick={() => setDeleteOrg(org)}
+                aria-label="Delete org"
+              />
             </td>
           </tr>
         ))}
diff --git a/public/app/features/admin/OrgRolePicker.tsx b/public/app/features/admin/OrgRolePicker.tsx
index 9157ac23f13..2e75fd0adf5 100644
--- a/public/app/features/admin/OrgRolePicker.tsx
+++ b/public/app/features/admin/OrgRolePicker.tsx
@@ -5,18 +5,20 @@ import { Select } from '@grafana/ui';
 interface Props {
   value: OrgRole;
   disabled?: boolean;
+  'aria-label'?: string;
   onChange: (role: OrgRole) => void;
 }
 
 const options = Object.keys(OrgRole).map((key) => ({ label: key, value: key }));
 
-export const OrgRolePicker: FC<Props> = ({ value, onChange, ...restProps }) => (
+export const OrgRolePicker: FC<Props> = ({ value, onChange, 'aria-label': ariaLabel, ...restProps }) => (
   <Select
     menuShouldPortal
     value={value}
     options={options}
     onChange={(val) => onChange(val.value as OrgRole)}
     placeholder="Choose role..."
+    aria-label={ariaLabel}
     {...restProps}
   />
 );
diff --git a/public/app/features/admin/UpgradePage.tsx b/public/app/features/admin/UpgradePage.tsx
index ca01698eb3c..3eb861780f0 100644
--- a/public/app/features/admin/UpgradePage.tsx
+++ b/public/app/features/admin/UpgradePage.tsx
@@ -217,7 +217,7 @@ const Item: React.FC<ItemProps> = ({ children, title, image }) => {
 
   return (
     <div className={itemStyle}>
-      <img src={imageUrl} />
+      <img src={imageUrl} alt="" />
       <div>
         <div className={titleStyle}>{title}</div>
         {children}
diff --git a/public/app/features/users/UsersTable.tsx b/public/app/features/users/UsersTable.tsx
index 85e3cd18c1f..cac71231311 100644
--- a/public/app/features/users/UsersTable.tsx
+++ b/public/app/features/users/UsersTable.tsx
@@ -35,7 +35,7 @@ const UsersTable: FC<Props> = (props) => {
           return (
             <tr key={`${user.userId}-${index}`}>
               <td className="width-2 text-center">
-                <img className="filter-table__avatar" src={user.avatarUrl} />
+                <img className="filter-table__avatar" src={user.avatarUrl} alt="User avatar" />
               </td>
               <td className="max-width-6">
                 <span className="ellipsis" title={user.login}>
@@ -57,6 +57,7 @@ const UsersTable: FC<Props> = (props) => {
 
               <td className="width-8">
                 <OrgRolePicker
+                  aria-label="Role"
                   value={user.role}
                   disabled={!canUpdateRole}
                   onChange={(newRole) => onRoleChange(newRole, user)}
@@ -65,7 +66,13 @@ const UsersTable: FC<Props> = (props) => {
 
               {canRemoveFromOrg && (
                 <td>
-                  <Button size="sm" variant="destructive" onClick={() => setShowRemoveModal(user.login)} icon="times" />
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => setShowRemoveModal(user.login)}
+                    icon="times"
+                    aria-label="Delete user"
+                  />
                   <ConfirmModal
                     body={`Are you sure you want to delete user ${user.login}?`}
                     confirmText="Delete"
diff --git a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
index 3e1495e9228..6a28b416ace 100644
--- a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
@@ -74,6 +74,7 @@ exports[`Render should render users table 1`] = `
         className="width-2 text-center"
       >
         <img
+          alt="User avatar"
           className="filter-table__avatar"
           src="url/to/avatar"
         />
@@ -115,6 +116,7 @@ exports[`Render should render users table 1`] = `
         className="width-8"
       >
         <OrgRolePicker
+          aria-label="Role"
           disabled={false}
           onChange={[Function]}
           value="Admin"
@@ -122,6 +124,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <Button
+          aria-label="Delete user"
           icon="times"
           onClick={[Function]}
           size="sm"
@@ -144,6 +147,7 @@ exports[`Render should render users table 1`] = `
         className="width-2 text-center"
       >
         <img
+          alt="User avatar"
           className="filter-table__avatar"
           src="url/to/avatar"
         />
@@ -185,6 +189,7 @@ exports[`Render should render users table 1`] = `
         className="width-8"
       >
         <OrgRolePicker
+          aria-label="Role"
           disabled={false}
           onChange={[Function]}
           value="Admin"
@@ -192,6 +197,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <Button
+          aria-label="Delete user"
           icon="times"
           onClick={[Function]}
           size="sm"
@@ -214,6 +220,7 @@ exports[`Render should render users table 1`] = `
         className="width-2 text-center"
       >
         <img
+          alt="User avatar"
           className="filter-table__avatar"
           src="url/to/avatar"
         />
@@ -255,6 +262,7 @@ exports[`Render should render users table 1`] = `
         className="width-8"
       >
         <OrgRolePicker
+          aria-label="Role"
           disabled={false}
           onChange={[Function]}
           value="Admin"
@@ -262,6 +270,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <Button
+          aria-label="Delete user"
           icon="times"
           onClick={[Function]}
           size="sm"
@@ -284,6 +293,7 @@ exports[`Render should render users table 1`] = `
         className="width-2 text-center"
       >
         <img
+          alt="User avatar"
           className="filter-table__avatar"
           src="url/to/avatar"
         />
@@ -325,6 +335,7 @@ exports[`Render should render users table 1`] = `
         className="width-8"
       >
         <OrgRolePicker
+          aria-label="Role"
           disabled={false}
           onChange={[Function]}
           value="Admin"
@@ -332,6 +343,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <Button
+          aria-label="Delete user"
           icon="times"
           onClick={[Function]}
           size="sm"
@@ -354,6 +366,7 @@ exports[`Render should render users table 1`] = `
         className="width-2 text-center"
       >
         <img
+          alt="User avatar"
           className="filter-table__avatar"
           src="url/to/avatar"
         />
@@ -395,6 +408,7 @@ exports[`Render should render users table 1`] = `
         className="width-8"
       >
         <OrgRolePicker
+          aria-label="Role"
           disabled={false}
           onChange={[Function]}
           value="Admin"
@@ -402,6 +416,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <Button
+          aria-label="Delete user"
           icon="times"
           onClick={[Function]}
           size="sm"
@@ -424,6 +439,7 @@ exports[`Render should render users table 1`] = `
         className="width-2 text-center"
       >
         <img
+          alt="User avatar"
           className="filter-table__avatar"
           src="url/to/avatar"
         />
@@ -465,6 +481,7 @@ exports[`Render should render users table 1`] = `
         className="width-8"
       >
         <OrgRolePicker
+          aria-label="Role"
           disabled={false}
           onChange={[Function]}
           value="Admin"
@@ -472,6 +489,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <Button
+          aria-label="Delete user"
           icon="times"
           onClick={[Function]}
           size="sm"