From febc24522d006e14e1eb5bb57ebf4e71dda0a389 Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Wed, 19 Jan 2022 15:53:54 -0600
Subject: [PATCH] Accessibility Fixes for Several SQL Based Datasource Config
 Pages (#43982)

* Add label elements for select boxes: MSSQL config

* Add Permission level label

* Add aria-label for password field

* Fixes for Postgres a11y page

* Fix whitespace error

* Swap aria-labelby for "for"

* Prefer "for" over aria-labeledby
---
 public/app/angular/angular_wrappers.ts                   | 1 +
 public/app/angular/services/ng_react.ts                  | 6 +++---
 .../app/core/components/AccessControl/AddPermission.tsx  | 1 +
 public/app/plugins/datasource/mssql/partials/config.html | 9 +++++----
 public/app/plugins/datasource/mysql/partials/config.html | 1 +
 .../app/plugins/datasource/postgres/partials/config.html | 9 +++++----
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/public/app/angular/angular_wrappers.ts b/public/app/angular/angular_wrappers.ts
index 4747c83e977..e70b00537cc 100644
--- a/public/app/angular/angular_wrappers.ts
+++ b/public/app/angular/angular_wrappers.ts
@@ -134,6 +134,7 @@ export function registerAngularDirectives() {
     'isConfigured',
     'inputWidth',
     'labelWidth',
+    'aria-label',
     ['onReset', { watchDepth: 'reference', wrapApply: true }],
     ['onChange', { watchDepth: 'reference', wrapApply: true }],
   ]);
diff --git a/public/app/angular/services/ng_react.ts b/public/app/angular/services/ng_react.ts
index 3cf65f48708..3d87d7f0ab4 100644
--- a/public/app/angular/services/ng_react.ts
+++ b/public/app/angular/services/ng_react.ts
@@ -168,9 +168,9 @@ function getPropExpression(prop: any) {
  * @param attrs All attributes of the component.
  * @param propName Name of the prop that react component expects.
  */
-function findAttribute(attrs: string, propName: string): string {
-  const index = Object.keys(attrs).find((attr) => {
-    return attr.toLowerCase() === propName.toLowerCase() || attr.toLowerCase() === kebabCase(propName);
+function findAttribute(attrs: object, propName: string): string {
+  const index = Object.keys(attrs).find((attr: any) => {
+    return attr.toLowerCase() === propName.toLowerCase() || kebabCase(attr) === kebabCase(propName);
   });
   // @ts-ignore
   return attrs[index];
diff --git a/public/app/core/components/AccessControl/AddPermission.tsx b/public/app/core/components/AccessControl/AddPermission.tsx
index ac71e368650..b2da564b1fe 100644
--- a/public/app/core/components/AccessControl/AddPermission.tsx
+++ b/public/app/core/components/AccessControl/AddPermission.tsx
@@ -92,6 +92,7 @@ export const AddPermission = ({
             )}
 
             <Select
+              aria-label="Permission Level"
               width={25}
               menuShouldPortal
               value={permissions.find((p) => p === permission)}
diff --git a/public/app/plugins/datasource/mssql/partials/config.html b/public/app/plugins/datasource/mssql/partials/config.html
index af18c632ae0..e0df505c4d9 100644
--- a/public/app/plugins/datasource/mssql/partials/config.html
+++ b/public/app/plugins/datasource/mssql/partials/config.html
@@ -13,9 +13,9 @@
 	</div>
 
 	<div class="gf-form">
-		<label class="gf-form-label width-7">Authentication</label>
+		<label class="gf-form-label width-7" for="auth-select">Authentication</label>
 		<div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
-			<select class="gf-form-input" ng-model="ctrl.current.jsonData.authenticationType" ng-options="mode for mode in ['Windows Authentication', 'SQL Server Authentication']" ng-init="ctrl.current.jsonData.authenticationType" ng-change="ctrl.onAuthenticationTypeChange()"></select>
+			<select id="auth-select" class="gf-form-input" ng-model="ctrl.current.jsonData.authenticationType" ng-options="mode for mode in ['Windows Authentication', 'SQL Server Authentication']" ng-init="ctrl.current.jsonData.authenticationType" ng-change="ctrl.onAuthenticationTypeChange()"></select>
 			<info-popover mode="right-absolute">
 				<ul>
 					<li><i>SQL Server Authentication</i> This is the default mechanism to connect to MS SQL Server. Enter the SQL Server Authentication login or the Windows Authentication login in the DOMAIN\User format.</li>
@@ -37,14 +37,15 @@
 				on-change="ctrl.onPasswordChange"
 				labelWidth="7"
 				inputWidth="7"
+				aria-label="'Password'"
 			/>
 		</div>
 	</div>
 
 	<div class="gf-form">
-		<label class="gf-form-label width-7">Encrypt</label>
+		<label class="gf-form-label width-7" for="encrypt-select">Encrypt</label>
 		<div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
-			<select class="gf-form-input" ng-model="ctrl.current.jsonData.encrypt" ng-options="mode for mode in ['disable', 'false', 'true']" ng-init="ctrl.current.jsonData.encrypt"></select>
+			<select id="encrypt-select" class="gf-form-input" ng-model="ctrl.current.jsonData.encrypt" ng-options="mode for mode in ['disable', 'false', 'true']" ng-init="ctrl.current.jsonData.encrypt" aria-labelledby="encrypt-label"></select>
 			<info-popover mode="right-absolute">
 				Determines whether or to which extent a secure SSL TCP/IP connection will be negotiated with the server.
 				<ul>
diff --git a/public/app/plugins/datasource/mysql/partials/config.html b/public/app/plugins/datasource/mysql/partials/config.html
index 756819ec35e..c8d8afbc64f 100644
--- a/public/app/plugins/datasource/mysql/partials/config.html
+++ b/public/app/plugins/datasource/mysql/partials/config.html
@@ -23,6 +23,7 @@
         on-reset="ctrl.onPasswordReset"
         on-change="ctrl.onPasswordChange"
         inputWidth="9"
+        aria-label="'Password'"
       />
 		</div>
 	</div>
diff --git a/public/app/plugins/datasource/postgres/partials/config.html b/public/app/plugins/datasource/postgres/partials/config.html
index 9bff000e216..7a84f813098 100644
--- a/public/app/plugins/datasource/postgres/partials/config.html
+++ b/public/app/plugins/datasource/postgres/partials/config.html
@@ -25,14 +25,15 @@
         on-reset="ctrl.onPasswordReset"
         on-change="ctrl.onPasswordChange"
         inputWidth="9"
+        aria-label="'Password'"
       />
     </div>
   </div>
 
   <div class="gf-form">
-    <label class="gf-form-label width-10">TLS/SSL Mode</label>
+    <label class="gf-form-label width-10" for="tls-mode-select">TLS/SSL Mode</label>
     <div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
-      <select class="gf-form-input" ng-model="ctrl.current.jsonData.sslmode"
+      <select id="tls-mode-select" class="gf-form-input" ng-model="ctrl.current.jsonData.sslmode"
         ng-options="mode for mode in ['disable', 'require', 'verify-ca', 'verify-full']"
         ng-init="ctrl.current.jsonData.sslmode" ng-change="ctrl.tlsModeMapping()"></select>
       <info-popover mode="right-absolute">
@@ -133,7 +134,7 @@
 
 <div class="gf-form-group">
   <div class="gf-form">
-    <span class="gf-form-label width-9">
+    <span class="gf-form-label width-9" id="version-label">
       Version
       <info-popover mode="right-normal" position="top center">
         This option controls what functions are available in the PostgreSQL query builder.
@@ -141,7 +142,7 @@
     </span>
     <span class="gf-form-select-wrapper">
       <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.postgresVersion"
-        ng-options="f.value as f.name for f in ctrl.postgresVersions"></select>
+        ng-options="f.value as f.name for f in ctrl.postgresVersions" aria-labelledby="version-label"></select>
     </span>
   </div>
   <div class="gf-form">