From 565537c6e2c2534e5131173f901c4dcc8fcb9a8c Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 20 Oct 2021 14:54:00 +0100
Subject: [PATCH] A11y/Dashboard: Fix various dashboard settings issues
 (#40641)

See #39429
---
 .../src/components/Select/SingleValue.tsx           |  3 ++-
 .../components/PermissionList/AddPermission.tsx     |  6 ++++--
 .../PermissionList/DisabledPermissionListItem.tsx   |  5 +++--
 .../PermissionList/PermissionListItem.tsx           | 13 ++++++++++---
 public/app/core/components/Select/TeamPicker.tsx    |  1 +
 public/app/core/components/Select/UserPicker.tsx    |  1 +
 .../components/VersionHistory/DiffViewer.tsx        |  6 ++++++
 .../VersionHistory/VersionHistoryTable.tsx          |  1 +
 8 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx
index 9f371c5d960..281153b33c0 100644
--- a/packages/grafana-ui/src/components/Select/SingleValue.tsx
+++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx
@@ -7,6 +7,7 @@ import { SlideOutTransition } from '../transitions/SlideOutTransition';
 import { FadeTransition } from '../transitions/FadeTransition';
 import { Spinner } from '../Spinner/Spinner';
 import { GrafanaTheme2 } from '@grafana/data';
+import tinycolor from 'tinycolor2';
 
 const getStyles = (theme: GrafanaTheme2) => {
   const singleValue = css`
@@ -35,7 +36,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   `;
 
   const disabled = css`
-    color: ${theme.colors.action.disabledText};
+    color: ${tinycolor(theme.colors.text.disabled).setAlpha(0.64).toString()};
   `;
 
   return { singleValue, container, item, disabled };
diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index ac205449093..dcdd9bb6628 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -100,11 +100,12 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
           {() => (
             <HorizontalGroup>
               <Select
-                menuShouldPortal
+                aria-label="Role to add new permission to"
                 isSearchable={false}
                 value={this.state.type}
                 options={dashboardAclTargets}
                 onChange={this.onTypeChanged}
+                menuShouldPortal
               />
 
               {newItem.type === AclTarget.User ? (
@@ -118,12 +119,13 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
               <span className={styles.label}>Can</span>
 
               <Select
-                menuShouldPortal
+                aria-label="Permission level"
                 isSearchable={false}
                 value={this.state.permission}
                 options={dashboardPermissionLevels}
                 onChange={this.onPermissionChanged}
                 width={25}
+                menuShouldPortal
               />
               <Button data-save-permission type="submit" disabled={!isValid}>
                 Save
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index aa231cb6045..a278cc29db0 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -25,16 +25,17 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
         <td>
           <div className="gf-form">
             <Select
-              menuShouldPortal
+              aria-label={`Permission level for "${item.name}"`}
               options={dashboardPermissionLevels}
               onChange={() => {}}
               disabled={true}
               value={currentPermissionLevel}
+              menuShouldPortal
             />
           </div>
         </td>
         <td>
-          <Button size="sm" disabled icon="lock" />
+          <Button aria-label={`Remove permission for "${item.name}"`} size="sm" icon="lock" disabled />
         </td>
       </tr>
     );
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index 2a14c5bfd60..0d7aa6cbc6d 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -75,20 +75,27 @@ export default class PermissionsListItem extends PureComponent<Props> {
         <td className="query-keyword">Can</td>
         <td>
           <Select
-            menuShouldPortal
+            aria-label={`Permission level for "${item.name}"`}
             isSearchable={false}
             options={dashboardPermissionLevels}
             onChange={this.onPermissionChanged}
             disabled={item.inherited}
             value={currentPermissionLevel}
             width={25}
+            menuShouldPortal
           />
         </td>
         <td>
           {!item.inherited ? (
-            <Button size="sm" variant="destructive" icon="times" onClick={this.onRemoveItem} />
+            <Button
+              aria-label={`Remove permission for "${item.name}"`}
+              size="sm"
+              variant="destructive"
+              icon="times"
+              onClick={this.onRemoveItem}
+            />
           ) : (
-            <Button size="sm" disabled icon="times" />
+            <Button aria-label={`Remove permission for "${item.name}" (Disabled)`} size="sm" disabled icon="times" />
           )}
         </td>
       </tr>
diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx
index 55a6b18e0ea..db17af605d4 100644
--- a/public/app/core/components/Select/TeamPicker.tsx
+++ b/public/app/core/components/Select/TeamPicker.tsx
@@ -65,6 +65,7 @@ export class TeamPicker extends Component<Props, State> {
           className={className}
           placeholder="Select a team"
           noOptionsMessage="No teams found"
+          aria-label="Team picker"
         />
       </div>
     );
diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx
index 8c87c51acde..4b28cb6eadf 100644
--- a/public/app/core/components/Select/UserPicker.tsx
+++ b/public/app/core/components/Select/UserPicker.tsx
@@ -76,6 +76,7 @@ export class UserPicker extends Component<Props, State> {
           onChange={onSelected}
           placeholder="Start typing to search for user"
           noOptionsMessage="No users found"
+          aria-label="User picker"
         />
       </div>
     );
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
index 0cf5be1a9a9..fcf0cfc7ca4 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
@@ -41,6 +41,12 @@ export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue
     codeFold: {
       fontSize: theme.typography.size.sm,
     },
+    gutter: `
+      pre {
+        color: ${tinycolor(theme.colors.textFaint).setAlpha(1).toString()};
+        opacity: 0.61;
+      }
+    `,
   };
 
   return (
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
index 876e164f7d2..c0b12528f3c 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
@@ -25,6 +25,7 @@ export const VersionHistoryTable: React.FC<VersionsTableProps> = ({ versions, on
         <tr key={version.id}>
           <td>
             <Checkbox
+              aria-label={`Toggle selection of version ${version.version}`}
               className={css`
                 display: inline;
               `}