From e7669226df8514e81afa546274cfd08c64a518aa Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 9 Dec 2021 10:19:53 +0000
Subject: [PATCH] A11y: Fix prometheus issues (#42671) (#42738)

(cherry picked from commit 8722c19cc396e49ab2da8142594d9bdbb8bd10af)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
---
 .../grafana-ui/src/components/Forms/Legacy/Select/Select.tsx   | 2 ++
 .../datasource/prometheus/components/PromQueryEditor.tsx       | 3 +++
 .../datasource/prometheus/configuration/PromSettings.tsx       | 1 +
 3 files changed, 6 insertions(+)

diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx
index 35bc7f3be08..aca931e2bda 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx
@@ -101,6 +101,7 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
       onOpenMenu,
       allowCustomValue,
       formatCreateLabel,
+      'aria-label': ariaLabel,
     } = this.props;
 
     let widthClass = '';
@@ -151,6 +152,7 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
               onMenuOpen={onOpenMenuInternal}
               onMenuClose={onCloseMenuInternal}
               tabSelectsValue={tabSelectsValue}
+              aria-label={ariaLabel}
               {...creatableOptions}
             />
           );
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
index a8fa2f0f6c3..4301778a755 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
@@ -161,6 +161,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
               <input
                 type="text"
                 className="gf-form-input width-8"
+                aria-label="Set lower limit for the step parameter"
                 placeholder={interval}
                 onChange={this.onIntervalChange}
                 onBlur={this.onRunQuery}
@@ -171,6 +172,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
             <div className="gf-form">
               <div className="gf-form-label">Resolution</div>
               <Select
+                aria-label="Select resolution"
                 menuShouldPortal
                 isSearchable={false}
                 options={INTERVAL_FACTOR_OPTIONS}
@@ -189,6 +191,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
                 options={FORMAT_OPTIONS}
                 onChange={this.onFormatChange}
                 value={formatOption}
+                aria-label="Select format"
               />
               <Switch label="Instant" checked={instant} onChange={this.onInstantChange} />
 
diff --git a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
index 648ae92931e..52aa5b72788 100644
--- a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
@@ -75,6 +75,7 @@ export const PromSettings = (props: Props) => {
             HTTP Method
           </InlineFormLabel>
           <Select
+            aria-label="Select HTTP method"
             menuShouldPortal
             options={httpOptions}
             value={httpOptions.find((o) => o.value === options.jsonData.httpMethod)}