Chore: Reduce pa11y-ci errors (#41787)

* Chore: moves alert to test-id

* Chore: moves Dashboard navigation to test-id

* Chore: moves Bar gauge value to data-testid

* Chore move Folder picker select container to data-testid

* Chore: moves Time zone picker select container to data-testid

* Chore: moves Choose starting day of the week to data-testid

* Chore: change tabIndex on search input

* Chore: moves various search related aria-lables to data-testid

* Chore: connects label to select input on alerting page

* Chore: connects TimeZonePicker and WeekStartPicker with labels

* Chore: moves CallToActionButton to data-testid

* Chore: move user home preferences select to data-testid

* Chore: lower all thresholds

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -47,7 +47,7 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
       <div
         ref={ref}
         className={cx(styles.alert, className)}
-        aria-label={selectors.components.Alert.alert(severity)}
+        data-testid={selectors.components.Alert.alertV2(severity)}
         {...restProps}
       >
         <div className={styles.icon}>

packages/grafana-ui/src/components/BarGauge/BarGauge.tsx

@@ -1,26 +1,26 @@
 // Library
-import React, { PureComponent, CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
 import {
-  TimeSeriesValue,
+  DisplayProcessor,
   DisplayValue,
-  formattedValueToString,
+  DisplayValueAlignmentFactors,
+  FALLBACK_COLOR,
+  FieldColorModeId,
+  FieldConfig,
   FormattedValue,
+  formattedValueToString,
   GAUGE_DEFAULT_MAXIMUM,
   GAUGE_DEFAULT_MINIMUM,
-  DisplayValueAlignmentFactors,
-  ThresholdsMode,
-  DisplayProcessor,
-  FieldConfig,
-  FieldColorModeId,
   getFieldColorMode,
-  FALLBACK_COLOR,
   TextDisplayOptions,
+  ThresholdsMode,
+  TimeSeriesValue,
   VizOrientation,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
-import { measureText, calculateFontSize } from '../../utils/measureText';
+import { calculateFontSize, measureText } from '../../utils/measureText';
 import { Themeable2 } from '../../types';
 
 const MIN_VALUE_HEIGHT = 18;
@@ -114,7 +114,7 @@ export class BarGauge extends PureComponent<Props> {
     return (
       <div style={styles.wrapper}>
         <FormattedValueDisplay
-          aria-label={selectors.components.Panels.Visualization.BarGauge.value}
+          data-testid={selectors.components.Panels.Visualization.BarGauge.valueV2}
           value={value}
           style={styles.value}
         />
@@ -195,7 +195,7 @@ export class BarGauge extends PureComponent<Props> {
       <div style={containerStyles}>
         {cells}
         <FormattedValueDisplay
-          aria-label={selectors.components.Panels.Visualization.BarGauge.value}
+          data-testid={selectors.components.Panels.Visualization.BarGauge.valueV2}
           value={value}
           style={valueStyles}
         />

packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
     }
   >
     <FormattedDisplayValue
-      aria-label="Bar gauge value"
+      data-testid="data-testid Bar gauge value"
       style={
         Object {
           "alignItems": "center",

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 import { css, cx } from '@emotion/css';
-import { TimeZone, GrafanaTheme2, getTimeZoneInfo } from '@grafana/data';
+import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { TimeZoneTitle } from '../TimeZonePicker/TimeZoneTitle';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
@@ -84,7 +84,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
           </div>
           {editMode === 'tz' ? (
             <section
-              aria-label={selectors.components.TimeZonePicker.container}
+              data-testid={selectors.components.TimeZonePicker.containerV2}
               className={cx(style.timeZoneContainer, style.timeSettingContainer)}
             >
               <TimeZonePicker
@@ -101,7 +101,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
             </section>
           ) : (
             <section
-              aria-label={selectors.components.TimeZonePicker.container}
+              aria-label={selectors.components.TimeZonePicker.containerV2}
               className={cx(style.timeZoneContainer, style.timeSettingContainer)}
             >
               <Field className={style.fiscalYearField} label={'Fiscal year start month'}>

packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx

@@ -37,7 +37,7 @@ export const WeekStartPicker: React.FC<Props> = (props) => {
     <Select
       inputId={inputId}
       value={weekStarts.find((item) => item.value === value)?.value}
-      placeholder="Choose starting day of the week"
+      placeholder={selectors.components.WeekStartPicker.placeholder}
       autoFocus={autoFocus}
       openMenuOnFocus={true}
       width={width}
@@ -45,7 +45,6 @@ export const WeekStartPicker: React.FC<Props> = (props) => {
       onChange={onChangeWeekStart}
       onBlur={onBlur}
       disabled={disabled}
-      aria-label={selectors.components.WeekStartPicker.container}
       menuShouldPortal={true}
     />
   );