From ba58b34219739aada59dd8853d4cb9cf640eae8f Mon Sep 17 00:00:00 2001
From: Shirley <4163034+fridgepoet@users.noreply.github.com>
Date: Wed, 5 Jan 2022 09:46:05 +0100
Subject: [PATCH] CloudWatch: a11y: Add missing aria labels on explore
 metrics/logs editor (#43580)

* CloudWatch: a11y: Add missing aria labels on explore metrics/logs editor
---
 public/app/plugins/datasource/cloudwatch/components/Alias.tsx  | 2 +-
 .../datasource/cloudwatch/components/LogsQueryField.tsx        | 2 ++
 .../components/MetricStatEditor/MetricStatEditor.tsx           | 2 ++
 .../datasource/cloudwatch/components/MetricsQueryEditor.tsx    | 2 ++
 .../plugins/datasource/cloudwatch/components/QueryHeader.tsx   | 3 ++-
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/cloudwatch/components/Alias.tsx b/public/app/plugins/datasource/cloudwatch/components/Alias.tsx
index 009fdafb4a6..3b1ead48981 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Alias.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Alias.tsx
@@ -17,5 +17,5 @@ export const Alias: FunctionComponent<Props> = ({ value = '', onChange }) => {
     propagateOnChange(e.target.value);
   };
 
-  return <Input type="text" value={alias} onChange={onChange} />;
+  return <Input type="text" value={alias} onChange={onChange} aria-label="Optional alias" />;
 };
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
index 8c56d7fcf5f..ecfe5f2da8b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
@@ -331,6 +331,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
             labelWidth={4}
             inputEl={
               <Select
+                aria-label="Region"
                 menuShouldPortal
                 options={regions}
                 value={selectedRegion}
@@ -348,6 +349,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
             className="flex-grow-1"
             inputEl={
               <MultiSelect
+                aria-label="Log Groups"
                 menuShouldPortal
                 allowCustomValue={allowCustomValue}
                 options={unionBy(availableLogGroups, selectedLogGroups, 'value')}
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
index f04f1f3ac66..39742b921d5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
@@ -38,6 +38,7 @@ export function MetricStatEditor({
         <EditorFieldGroup>
           <EditorField label="Namespace" width={26}>
             <Select
+              aria-label="Namespace"
               value={query.namespace}
               allowCustomValue
               options={namespaces}
@@ -50,6 +51,7 @@ export function MetricStatEditor({
           </EditorField>
           <EditorField label="Metric name" width={16}>
             <Select
+              aria-label="Metric name"
               value={query.metricName}
               allowCustomValue
               options={metrics}
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
index 6baddc5ac40..23604021e7b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
@@ -144,6 +144,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
             tooltip="ID can be used to reference other queries in math expressions. The ID can include numbers, letters, and underscore, and must start with a lowercase letter."
           >
             <Input
+              aria-label="Optional ID"
               onBlur={onRunQuery}
               onChange={(event: ChangeEvent<HTMLInputElement>) =>
                 this.onChange({ ...metricsQuery, id: event.target.value })
@@ -156,6 +157,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
 
           <EditorField label="Period" width={26} tooltip="Minimum interval between points in seconds.">
             <Input
+              aria-label="Period"
               value={query.period || ''}
               placeholder="auto"
               onBlur={onRunQuery}
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
index 962d4464e26..9c7a946972b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
@@ -82,9 +82,10 @@ const QueryHeader: React.FC<QueryHeaderProps> = ({ query, sqlCodeEditorIsDirty,
         isLoading={regionIsLoading}
       />
 
-      <InlineSelect value={queryMode} options={apiModes} onChange={onQueryModeChange} />
+      <InlineSelect aria-label="Query mode" value={queryMode} options={apiModes} onChange={onQueryModeChange} />
 
       <InlineSelect
+        aria-label="Metric editor mode"
         value={metricEditorModes.find((m) => m.value === metricQueryType)}
         options={metricEditorModes}
         onChange={({ value }) => {