A11y/Dashboard: Fix various dashboard settings issues (#40641)

See #39429

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

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

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

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>

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

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

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 (

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;
               `}