A11y: Fixes some fastpass errors for /datasources/* routes (#39577)

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

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

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

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()
-    e2e.components.DashboardLinks.dropDown().should('be.visible').click().wait('@tagsTemplatingSearch');
+      .scrollIntoView()
+      .should('be.visible')
+      .click()
+      .wait('@tagsTemplatingSearch');
 
     // verify all links, should have p2 value
     verifyLinks('p2');

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

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

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

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',

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}

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">
+            <h2 className={styles.heading}>{heading}</h2>
-              {heading}
-            </div>
             {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};

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' ? (

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