From 9f404daf9f9f52da6bca7af19921ff445dc0b0ca Mon Sep 17 00:00:00 2001
From: Shirley <4163034+fridgepoet@users.noreply.github.com>
Date: Fri, 14 Jan 2022 14:56:00 +0100
Subject: [PATCH] Cloudwatch: Improve accessibility in metrics search and query
 builders (#43997)

* Add more aria labels on metrics search and query builders

* Use id for Input
---
 .../cloudwatch/components/MetricStatEditor/FilterItem.tsx       | 2 ++
 .../cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx | 1 +
 .../components/SQLBuilderEditor/SQLBuilderSelectRow.tsx         | 2 ++
 .../cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx  | 2 ++
 4 files changed, 7 insertions(+)

diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx
index b4727ce33c4..0c7e736ddb1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx
+++ b/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"
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
index 0135646a5fa..9b7aaf204e5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
+++ b/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;
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
index 7d94a3d53d3..4603329c145 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/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))}
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
index 70cdfc91da1..d516d68d59e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/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]}