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

@@ -134,6 +134,7 @@ export function registerAngularDirectives() {
     'isConfigured',
     'inputWidth',
     'labelWidth',
+    'aria-label',
     ['onReset', { watchDepth: 'reference', wrapApply: true }],
     ['onChange', { watchDepth: 'reference', wrapApply: true }],
   ]);

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 {
+function findAttribute(attrs: object, propName: string): string {
-  const index = Object.keys(attrs).find((attr) => {
+  const index = Object.keys(attrs).find((attr: any) => {
-    return attr.toLowerCase() === propName.toLowerCase() || attr.toLowerCase() === kebabCase(propName);
+    return attr.toLowerCase() === propName.toLowerCase() || kebabCase(attr) === kebabCase(propName);
   });
   // @ts-ignore
   return attrs[index];

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)}

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>

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>

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">