From bac9253fdcef789185b6acf17139d6b6f449b9f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Wed, 5 Jan 2022 19:28:28 +0100
Subject: [PATCH] A11y: Fix a11y issues in OpenTSDB (#43714)

* Fix a11y issues in OpenTSDB configuration page

* Fix a11y issues in OpenTSDB editor

* Link labels to inputs where possible

Co-authored-by: kay delaney <kay@grafana.com>
---
 .../opentsdb/components/OpenTsdbDetails.tsx    | 18 +++++++++++++++---
 .../opentsdb/partials/query.editor.html        |  8 +++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
index f14848e20cf..e91ab6eb329 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
@@ -3,6 +3,7 @@ import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Select, Input } = LegacyForms;
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { OpenTsdbOptions } from '../types';
+import { useUniqueId } from '../../influxdb/components/useUniqueId';
 
 const tsdbVersions = [
   { label: '<=2.1', value: 1 },
@@ -23,12 +24,17 @@ interface Props {
 export const OpenTsdbDetails = (props: Props) => {
   const { onChange, value } = props;
 
+  const idSuffix = useUniqueId();
+
   return (
     <>
       <h5>OpenTSDB settings</h5>
       <div className="gf-form">
-        <InlineFormLabel width={7}>Version</InlineFormLabel>
+        <InlineFormLabel width={7} htmlFor={`select-version-${idSuffix}`}>
+          Version
+        </InlineFormLabel>
         <Select
+          inputId={`select-version-${idSuffix}`}
           menuShouldPortal
           options={tsdbVersions}
           value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
@@ -36,8 +42,11 @@ export const OpenTsdbDetails = (props: Props) => {
         />
       </div>
       <div className="gf-form">
-        <InlineFormLabel width={7}>Resolution</InlineFormLabel>
+        <InlineFormLabel width={7} htmlFor={`select-resolution-${idSuffix}`}>
+          Resolution
+        </InlineFormLabel>
         <Select
+          inputId={`select-resolution-${idSuffix}`}
           menuShouldPortal
           options={tsdbResolutions}
           value={
@@ -48,8 +57,11 @@ export const OpenTsdbDetails = (props: Props) => {
         />
       </div>
       <div className="gf-form">
-        <InlineFormLabel width={7}>Lookup limit</InlineFormLabel>
+        <InlineFormLabel width={7} htmlFor={`lookup-input-${idSuffix}`}>
+          Lookup limit
+        </InlineFormLabel>
         <Input
+          id={`lookup-input-${idSuffix}`}
           type="number"
           value={value.jsonData.lookupLimit ?? 1000}
           onChange={onInputChangeHandler('lookupLimit', value, onChange)}
diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
index 635acd3ed13..37421c384e3 100644
--- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -20,7 +20,8 @@
 				</a>
 			</label>
 			<div class="gf-form-select-wrapper max-width-15">
-				<select ng-model="ctrl.target.aggregator" class="gf-form-input"
+				<select aria-label="Metric aggregator"
+								ng-model="ctrl.target.aggregator" class="gf-form-input"
 								ng-options="agg for agg in ctrl.aggregators"
 								ng-change="ctrl.targetBlur()">
 		 	 </select>
@@ -62,9 +63,10 @@
 		<div class="gf-form">
 			<label class="gf-form-label query-keyword">Aggregator</label>
 			<div class="gf-form-select-wrapper">
-				<select ng-model="ctrl.target.downsampleAggregator" class="gf-form-input"
+				<select aria-label="Downsample aggregator"
+								ng-model="ctrl.target.downsampleAggregator" class="gf-form-input"
 								ng-options="agg for agg in ctrl.aggregators"
-				        ng-change="ctrl.targetBlur()">
+								ng-change="ctrl.targetBlur()">
 				</select>
 			</div>
 		</div>