A11y: Fix fastpass issues for /admin/* pages (#39435)

* A11y: Fix fastpass issues for /admin/* pages
See #39429

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>
                 </>

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>
         ))}

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}
   />
 );

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}

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"

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"