From dc363a05ac51d0853f795ffb4e2fcf8077edeb1e Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 30 Sep 2021 03:24:26 -0400
Subject: [PATCH] A11y: Fixes some fastpass errors for /datasources/* routes
 (#39577) (#39797)

* A11y: Fixes some fastpass errors for /datasources/* routes
See #39429

(cherry picked from commit 75a55379f1ea05d3e77f7c31f43138a18c44d02c)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 e2e/suite1/specs/exemplars.spec.ts                         | 4 ++--
 e2e/suite1/specs/query-editor.spec.ts                      | 2 +-
 .../specs/templating-dashboard-links-and-variables.ts      | 7 +++++--
 e2e/suite1/specs/trace-view-scrolling.spec.ts              | 2 +-
 e2e/suite1/specs/variables/new-query-variable.ts           | 4 ++--
 packages/grafana-data/src/themes/createColors.ts           | 2 +-
 packages/grafana-e2e-selectors/src/selectors/components.ts | 1 +
 .../grafana-runtime/src/components/DataSourcePicker.tsx    | 1 +
 packages/grafana-ui/src/components/Card/Card.tsx           | 5 ++---
 packages/grafana-ui/src/components/Forms/InlineField.tsx   | 4 +++-
 .../datasource/cloudwatch/components/XrayLinkConfig.tsx    | 7 ++++++-
 11 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/e2e/suite1/specs/exemplars.spec.ts b/e2e/suite1/specs/exemplars.spec.ts
index 89165047f9c..29ad989294c 100644
--- a/e2e/suite1/specs/exemplars.spec.ts
+++ b/e2e/suite1/specs/exemplars.spec.ts
@@ -12,7 +12,7 @@ const addDataSource = () => {
       e2e.components.DataSourcePicker.container()
         .should('be.visible')
         .within(() => {
-          e2e.components.Select.input().should('be.visible').click({ force: true });
+          e2e.components.DataSourcePicker.input().should('be.visible').click({ force: true });
         });
 
       e2e().contains('gdev-tempo').scrollIntoView().should('be.visible').click();
@@ -53,7 +53,7 @@ describe('Exemplars', () => {
     e2e.components.DataSourcePicker.container()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').click();
+        e2e.components.DataSourcePicker.input().should('be.visible').click();
       });
     e2e().contains(dataSourceName).scrollIntoView().should('be.visible').click();
     e2e.components.TimePicker.openButton().click();
diff --git a/e2e/suite1/specs/query-editor.spec.ts b/e2e/suite1/specs/query-editor.spec.ts
index 3b5518e2362..ccb66ba5fa6 100644
--- a/e2e/suite1/specs/query-editor.spec.ts
+++ b/e2e/suite1/specs/query-editor.spec.ts
@@ -11,7 +11,7 @@ e2e.scenario({
     e2e.components.DataSourcePicker.container()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').click();
+        e2e.components.DataSourcePicker.input().should('be.visible').click();
       });
 
     cy.contains('gdev-prometheus').scrollIntoView().should('be.visible').click();
diff --git a/e2e/suite1/specs/templating-dashboard-links-and-variables.ts b/e2e/suite1/specs/templating-dashboard-links-and-variables.ts
index 62c1c86ab39..bf6782e2d64 100644
--- a/e2e/suite1/specs/templating-dashboard-links-and-variables.ts
+++ b/e2e/suite1/specs/templating-dashboard-links-and-variables.ts
@@ -50,8 +50,11 @@ e2e.scenario({
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('p2').should('be.visible').click();
 
     e2e.components.PageToolbar.container().click();
-
-    e2e.components.DashboardLinks.dropDown().should('be.visible').click().wait('@tagsTemplatingSearch');
+    e2e.components.DashboardLinks.dropDown()
+      .scrollIntoView()
+      .should('be.visible')
+      .click()
+      .wait('@tagsTemplatingSearch');
 
     // verify all links, should have p2 value
     verifyLinks('p2');
diff --git a/e2e/suite1/specs/trace-view-scrolling.spec.ts b/e2e/suite1/specs/trace-view-scrolling.spec.ts
index c55444c2bfe..b8c1c3ac0f1 100644
--- a/e2e/suite1/specs/trace-view-scrolling.spec.ts
+++ b/e2e/suite1/specs/trace-view-scrolling.spec.ts
@@ -14,7 +14,7 @@ describe('Trace view', () => {
     e2e.components.DataSourcePicker.container()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').click();
+        e2e.components.DataSourcePicker.input().should('be.visible').click();
       });
 
     e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
diff --git a/e2e/suite1/specs/variables/new-query-variable.ts b/e2e/suite1/specs/variables/new-query-variable.ts
index d214b224c81..3ff190a1fe9 100644
--- a/e2e/suite1/specs/variables/new-query-variable.ts
+++ b/e2e/suite1/specs/variables/new-query-variable.ts
@@ -85,7 +85,7 @@ describe('Variables - Add variable', () => {
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').type('gdev-testdata').type('{enter}');
+        e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
       });
 
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
@@ -139,7 +139,7 @@ describe('Variables - Add variable', () => {
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').type('gdev-testdata').type('{enter}');
+        e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
       });
 
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index d0f34a46a81..aaee1dc9a71 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -96,7 +96,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   text = {
     primary: `rgb(${this.whiteBase})`,
     secondary: `rgba(${this.whiteBase}, 0.65)`,
-    disabled: `rgba(${this.whiteBase}, 0.40)`,
+    disabled: `rgba(${this.whiteBase}, 0.57)`,
     link: palette.blueDarkText,
     maxContrast: palette.white,
   };
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 0b4e9c20a37..99d3016c585 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -202,6 +202,7 @@ export const Components = {
   },
   DataSourcePicker: {
     container: 'Data source picker select container',
+    input: () => 'input[id="data-source-picker"]',
   },
   TimeZonePicker: {
     container: 'Time zone picker select container',
diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
index a95c9bf8a56..4dd5bac238b 100644
--- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx
+++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
@@ -145,6 +145,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     return (
       <div aria-label={selectors.components.DataSourcePicker.container}>
         <Select
+          inputId="data-source-picker"
           menuShouldPortal
           className={styles.select}
           isMulti={false}
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 50b7800474d..da238cb752e 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -69,9 +69,7 @@ export const Card: CardInterface = ({ heading, description, disabled, href, onCl
       <div className={styles.inner}>
         <div className={styles.info}>
           <div>
-            <div className={styles.heading} role="heading">
-              {heading}
-            </div>
+            <h2 className={styles.heading}>{heading}</h2>
             {meta}
             {description && <p className={styles.description}>{description}</p>}
           </div>
@@ -115,6 +113,7 @@ export const getCardStyles = stylesFactory((theme: GrafanaTheme2) => {
       width: 100%;
       margin-bottom: 0;
       font-size: ${theme.typography.size.md};
+      letter-spacing: inherit;
       line-height: ${theme.typography.body.lineHeight};
       color: ${theme.colors.text.primary};
       font-weight: ${theme.typography.fontWeightMedium};
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx
index 094270ec4d6..583af8b9b80 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx
@@ -16,6 +16,7 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
   grow?: boolean;
   /** Make field's background transparent */
   transparent?: boolean;
+  htmlFor?: string;
 }
 
 export const InlineField: FC<Props> = ({
@@ -27,13 +28,14 @@ export const InlineField: FC<Props> = ({
   loading,
   disabled,
   className,
+  htmlFor,
   grow,
   transparent,
   ...htmlProps
 }) => {
   const theme = useTheme();
   const styles = getStyles(theme, grow);
-  const inputId = getChildId(children);
+  const inputId = htmlFor ?? getChildId(children);
 
   const labelElement =
     typeof label === 'string' ? (
diff --git a/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx b/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx
index 1dad9384cb0..16789f12cb5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx
@@ -43,7 +43,12 @@ export function XrayLinkConfig({ datasourceUid, onChange }: Props) {
       )}
 
       <div className="gf-form-group">
-        <InlineField label="Data source" labelWidth={28} tooltip="X-ray data source containing traces">
+        <InlineField
+          htmlFor="data-source-picker"
+          label="Data source"
+          labelWidth={28}
+          tooltip="X-ray data source containing traces"
+        >
           <DataSourcePicker
             pluginId={xRayDsId}
             onChange={(ds) => onChange(ds.uid)}