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

@@ -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" />;
 };

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')}

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}

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}

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 }) => {