Cloudwatch: Improve accessibility in metrics search and query builders (#43997)

* Add more aria labels on metrics search and query builders

* Use id for Input

public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx

@@ -66,6 +66,7 @@ export const FilterItem: FunctionComponent<Props> = ({
     <div data-testid="cloudwatch-dimensions-filter-item">
       <InputGroup>
         <Select
+          aria-label="Dimensions filter key"
           inputId="cloudwatch-dimensions-filter-item-key"
           width="auto"
           value={filter.key ? toOption(filter.key) : null}
@@ -81,6 +82,7 @@ export const FilterItem: FunctionComponent<Props> = ({
         <span className={cx(styles.root)}>=</span>
 
         <Select
+          aria-label="Dimensions filter value"
           inputId="cloudwatch-dimensions-filter-item-value"
           onOpenMenu={loadOptions}
           width="auto"

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx

@@ -65,6 +65,7 @@ export function SQLBuilderEditor({ query, datasource, onChange, onRunQuery }: Re
 
         <EditorField label="Limit" optional>
           <Input
+            id={`${query.refId}-cloudwatch-sql-builder-editor-limit`}
             value={sql.limit}
             onChange={(e) => {
               const val = e.currentTarget.valueAsNumber;

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx

@@ -96,6 +96,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
       <EditorFieldGroup>
         <EditorField label="Metric name" width={16}>
           <Select
+            aria-label="Metric name"
             value={metricName ? toOption(metricName) : null}
             options={metricOptions}
             allowCustomValue
@@ -106,6 +107,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
 
         <EditorField label="Aggregation" width={16}>
           <Select
+            aria-label="Aggregation"
             value={aggregation ? toOption(aggregation) : null}
             options={appendTemplateVariables(datasource, AGGREGATIONS)}
             onChange={({ value }) => value && onQueryChange(setAggregation(query, value))}

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx

@@ -29,6 +29,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
       <EditorField label="Order by" optional width={16}>
         <>
           <Select
+            aria-label="Order by"
             onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))}
             options={appendTemplateVariables(datasource, STATISTICS.map(toOption))}
             value={orderBy ? toOption(orderBy) : null}
@@ -47,6 +48,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
 
       <EditorField label="Direction" width={16}>
         <Select
+          aria-label="Direction"
           inputId="cloudwatch-sql-order-by-direction"
           disabled={!orderBy}
           value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]}