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

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

(cherry picked from commit 75a55379f1)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

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

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