From 8f6dd8079f0d1a5c4317d89a827f6ebce5dcf0db Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Thu, 9 Dec 2021 10:09:14 +0000
Subject: [PATCH] Elasticsearch: Fix fastpass A11y issues (#42657) (#42787)

* Add labels to Date Histogram settings fields

* Add labels to Terms settings fields

* Add labels to Filters settings fields

* Add labels to Geo Hash Grid settings fields

* Add labels to Histogram settings fields

* Add labels to Percentiles settings fields

* Add labels to Moving Avg settings fields

* Add labels to Bucket Script settings fields

(cherry picked from commit 7c3565379aa263fef413436b3b6af6ce0eac07cd)
---
 .../SettingsEditor/DateHistogramSettingsEditor.tsx    |  6 +++++-
 .../SettingsEditor/FiltersSettingsEditor/index.tsx    |  6 +++++-
 .../SettingsEditor/TermsSettingsEditor.tsx            |  9 +++++++--
 .../BucketAggregationsEditor/SettingsEditor/index.tsx |  8 +++++++-
 .../BucketScriptSettingsEditor/index.tsx              |  1 +
 .../SettingsEditor/MovingAverageSettingsEditor.tsx    | 11 ++++++++++-
 .../MetricAggregationsEditor/SettingsEditor/index.tsx |  5 ++++-
 7 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
index 1eef6876005..f6fbf6cd2a6 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { InlineField, Input, Select, TimeZonePicker } from '@grafana/ui';
 import { DateHistogram } from '../aggregations';
 import { bucketAggregationConfig } from '../utils';
@@ -43,6 +43,7 @@ interface Props {
 
 export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
   const dispatch = useDispatch();
+  const { current: baseId } = useRef(uniqueId('es-date_histogram-'));
 
   const handleIntervalChange = ({ value }: SelectableValue<string>) =>
     dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'interval', newValue: value }));
@@ -65,6 +66,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Min Doc Count" {...inlineFieldProps}>
         <Input
+          id={`${baseId}-min_doc_count`}
           onBlur={(e) =>
             dispatch(
               changeBucketAggregationSetting({ bucketAgg, settingName: 'min_doc_count', newValue: e.target.value })
@@ -78,6 +80,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Trim Edges" {...inlineFieldProps} tooltip="Trim the edges on the timeseries datapoints">
         <Input
+          id={`${baseId}-trime_edges`}
           onBlur={(e) =>
             dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'trimEdges', newValue: e.target.value }))
           }
@@ -93,6 +96,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
         tooltip="Change the start value of each bucket by the specified positive (+) or negative offset (-) duration, such as 1h for an hour, or 1d for a day"
       >
         <Input
+          id={`${baseId}-offset`}
           onBlur={(e) =>
             dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'offset', newValue: e.target.value }))
           }
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index baa3d3ef692..ccf8357d24a 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
@@ -1,18 +1,21 @@
 import { InlineField, Input, QueryField } from '@grafana/ui';
 import { css } from '@emotion/css';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { AddRemove } from '../../../../AddRemove';
 import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';
 import { Filters } from '../../aggregations';
 import { changeBucketAggregationSetting } from '../../state/actions';
 import { addFilter, changeFilter, removeFilter } from './state/actions';
 import { reducer as filtersReducer } from './state/reducer';
+import { uniqueId } from 'lodash';
 
 interface Props {
   bucketAgg: Filters;
 }
 
 export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
+  const { current: baseId } = useRef(uniqueId('es-filters-'));
+
   const upperStateDispatch = useDispatch();
 
   const dispatch = useStatelessReducer(
@@ -61,6 +64,7 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
             </div>
             <InlineField label="Label" labelWidth={10}>
               <Input
+                id={`${baseId}-label-${index}`}
                 placeholder="Label"
                 onBlur={(e) => dispatch(changeFilter({ index, filter: { ...filter, label: e.target.value } }))}
                 defaultValue={filter.label}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
index 558c819ed8c..fba98d56409 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { InlineField, Select, Input } from '@grafana/ui';
 import { Terms } from '../aggregations';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
@@ -25,6 +25,7 @@ interface Props {
 export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
   const { metrics } = useQuery();
   const orderBy = createOrderByOptions(metrics);
+  const { current: baseId } = useRef(uniqueId('es-terms-'));
 
   const dispatch = useDispatch();
 
@@ -32,6 +33,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
     <>
       <InlineField label="Order" {...inlineFieldProps}>
         <Select
+          inputId={`${baseId}-order`}
           menuShouldPortal
           onChange={(e) =>
             dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'order', newValue: e.value }))
@@ -43,6 +45,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Size" {...inlineFieldProps}>
         <Select
+          inputId={`${baseId}-size`}
           menuShouldPortal
           // TODO: isValidNewOption should only allow numbers & template variables
           {...useCreatableSelectPersistedBehaviour({
@@ -57,6 +60,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Min Doc Count" {...inlineFieldProps}>
         <Input
+          id={`${baseId}-min_doc_count`}
           onBlur={(e) =>
             dispatch(
               changeBucketAggregationSetting({ bucketAgg, settingName: 'min_doc_count', newValue: e.target.value })
@@ -70,7 +74,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Order By" {...inlineFieldProps}>
         <Select
-          inputId={uniqueId('es-terms-')}
+          inputId={`${baseId}-order_by`}
           menuShouldPortal
           onChange={(e) =>
             dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'orderBy', newValue: e.value }))
@@ -82,6 +86,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Missing" {...inlineFieldProps}>
         <Input
+          id={`${baseId}-missing`}
           onBlur={(e) =>
             dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'missing', newValue: e.target.value }))
           }
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
index 1ee6f5399ed..a4b8051f93b 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
@@ -1,5 +1,5 @@
 import { InlineField, Input } from '@grafana/ui';
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, useRef } from 'react';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { SettingsEditorContainer } from '../../SettingsEditorContainer';
 import { changeBucketAggregationSetting } from '../state/actions';
@@ -9,6 +9,7 @@ import { FiltersSettingsEditor } from './FiltersSettingsEditor';
 import { useDescription } from './useDescription';
 import { DateHistogramSettingsEditor } from './DateHistogramSettingsEditor';
 import { TermsSettingsEditor } from './TermsSettingsEditor';
+import { uniqueId } from 'lodash';
 
 export const inlineFieldProps: Partial<ComponentProps<typeof InlineField>> = {
   labelWidth: 16,
@@ -19,6 +20,8 @@ interface Props {
 }
 
 export const SettingsEditor = ({ bucketAgg }: Props) => {
+  const { current: baseId } = useRef(uniqueId('es-setting-'));
+
   const dispatch = useDispatch();
 
   const settingsDescription = useDescription(bucketAgg);
@@ -32,6 +35,7 @@ export const SettingsEditor = ({ bucketAgg }: Props) => {
       {bucketAgg.type === 'geohash_grid' && (
         <InlineField label="Precision" {...inlineFieldProps}>
           <Input
+            id={`${baseId}-geohash_grid-precision`}
             onBlur={(e) =>
               dispatch(
                 changeBucketAggregationSetting({ bucketAgg, settingName: 'precision', newValue: e.target.value })
@@ -48,6 +52,7 @@ export const SettingsEditor = ({ bucketAgg }: Props) => {
         <>
           <InlineField label="Interval" {...inlineFieldProps}>
             <Input
+              id={`${baseId}-histogram-interval`}
               onBlur={(e) =>
                 dispatch(
                   changeBucketAggregationSetting({ bucketAgg, settingName: 'interval', newValue: e.target.value })
@@ -61,6 +66,7 @@ export const SettingsEditor = ({ bucketAgg }: Props) => {
 
           <InlineField label="Min Doc Count" {...inlineFieldProps}>
             <Input
+              id={`${baseId}-histogram-min_doc_count`}
               onBlur={(e) =>
                 dispatch(
                   changeBucketAggregationSetting({ bucketAgg, settingName: 'min_doc_count', newValue: e.target.value })
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
index 78a9715a7c5..a0780c6b15f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
@@ -72,6 +72,7 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
                 `}
               >
                 <Input
+                  aria-label="Variable name"
                   defaultValue={pipelineVar.name}
                   placeholder="Variable Name"
                   onBlur={(e) => dispatch(renamePipelineVariable({ newName: e.target.value, index }))}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
index d47bf7b837e..98e208042a1 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
@@ -1,5 +1,6 @@
 import { Input, InlineField, Select, InlineSwitch } from '@grafana/ui';
-import React from 'react';
+import { uniqueId } from 'lodash';
+import React, { useRef } from 'react';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { movingAvgModelOptions } from '../../../../query_def';
 import { isEWMAMovingAverage, isHoltMovingAverage, isHoltWintersMovingAverage, MovingAverage } from '../aggregations';
@@ -15,11 +16,13 @@ interface Props {
 // as they might be incompatible. We should clear all other options on model change.
 export const MovingAverageSettingsEditor = ({ metric }: Props) => {
   const dispatch = useDispatch();
+  const { current: baseId } = useRef(uniqueId('es-moving-avg-'));
 
   return (
     <>
       <InlineField label="Model" labelWidth={16}>
         <Select
+          inputId={`${baseId}-model`}
           menuShouldPortal
           onChange={(value) => dispatch(changeMetricSetting({ metric, settingName: 'model', newValue: value.value }))}
           options={movingAvgModelOptions}
@@ -34,6 +37,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
       {(isEWMAMovingAverage(metric) || isHoltMovingAverage(metric) || isHoltWintersMovingAverage(metric)) && (
         <InlineField label="Alpha" labelWidth={16}>
           <Input
+            id={`${baseId}-alpha`}
             onBlur={(e) =>
               dispatch(
                 changeMetricSetting({
@@ -54,6 +58,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
       {(isHoltMovingAverage(metric) || isHoltWintersMovingAverage(metric)) && (
         <InlineField label="Beta" labelWidth={16}>
           <Input
+            id={`${baseId}-beta`}
             onBlur={(e) =>
               dispatch(
                 changeMetricSetting({
@@ -75,6 +80,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
         <>
           <InlineField label="Gamma" labelWidth={16}>
             <Input
+              id={`${baseId}-gamma`}
               onBlur={(e) =>
                 dispatch(
                   changeMetricSetting({
@@ -92,6 +98,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
           </InlineField>
           <InlineField label="Period" labelWidth={16}>
             <Input
+              id={`${baseId}-period`}
               onBlur={(e) =>
                 dispatch(
                   changeMetricSetting({
@@ -110,6 +117,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
 
           <InlineField label="Pad" labelWidth={16}>
             <InlineSwitch
+              id={`${baseId}-pad`}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 dispatch(
                   changeMetricSetting({
@@ -128,6 +136,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
       {(isEWMAMovingAverage(metric) || isHoltMovingAverage(metric) || isHoltWintersMovingAverage(metric)) && (
         <InlineField label="Minimize" labelWidth={16}>
           <InlineSwitch
+            id={`${baseId}-minimize`}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               dispatch(changeMetricSetting({ metric, settingName: 'minimize', newValue: e.target.checked }))
             }
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index a1704046d8c..af31e49b830 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
@@ -1,5 +1,5 @@
 import { InlineField, Input, InlineSwitch, Select } from '@grafana/ui';
-import React, { ComponentProps, useState } from 'react';
+import React, { ComponentProps, useRef, useState } from 'react';
 import { extendedStats } from '../../../../query_def';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { changeMetricMeta, changeMetricSetting } from '../state/actions';
@@ -30,6 +30,8 @@ interface Props {
 }
 
 export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
+  const { current: baseId } = useRef(uniqueId('es-setting-'));
+
   const dispatch = useDispatch();
   const description = useDescription(metric);
   const query = useQuery();
@@ -112,6 +114,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
       {metric.type === 'percentiles' && (
         <InlineField label="Percentiles" {...inlineFieldProps}>
           <Input
+            id={`${baseId}-percentiles-percents`}
             onBlur={(e) =>
               dispatch(
                 changeMetricSetting({