From e170073affef1f1465ea61c192552d420def4b64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Wed, 1 Dec 2021 13:32:46 +0100
Subject: [PATCH] A11y: Add aria-label and placeholder to Timeout & Access
 fields in HTTP Settings (#42559)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add aria label and placeholder to timeout input

* datasource settings: improved a11y

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
---
 .../DataSourceSettings/DataSourceHttpSettings.tsx          | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 73c78e5d172..5303c738adc 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -5,7 +5,7 @@ import { BasicAuthSettings } from './BasicAuthSettings';
 import { HttpProxySettings } from './HttpProxySettings';
 import { TLSAuthSettings } from './TLSAuthSettings';
 import { CustomHeadersSettings } from './CustomHeadersSettings';
-import { Select } from '../Forms/Legacy/Select/Select';
+import { Select } from '../Select/Select';
 import { Input } from '../Forms/Legacy/Input/Input';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
 import { Icon } from '../Icon/Icon';
@@ -101,8 +101,9 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
 
   const accessSelect = (
     <Select
+      aria-label="Access"
       menuShouldPortal
-      width={20}
+      className="width-20 gf-form-input"
       options={ACCESS_OPTIONS}
       value={ACCESS_OPTIONS.filter((o) => o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION}
       onChange={(selectedValue) => onSettingsChange({ access: selectedValue.value })}
@@ -180,6 +181,8 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
                   labelWidth={13}
                   inputWidth={20}
                   tooltip="HTTP request timeout in seconds"
+                  placeholder="Timeout in seconds"
+                  aria-label="Timeout in seconds"
                   value={dataSourceConfig.jsonData.timeout}
                   onChange={(event) => {
                     onSettingsChange({