From 6958de846cc922308ab351e964c3172c05c86c13 Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Wed, 19 Jan 2022 15:56:33 -0600
Subject: [PATCH] Accessibility Fixes for Several SQL Based Query Editors
 (#43981)

* Fix postgres QE a11y label issue

* Add aria-label to query-editor

* Remove unecessary element ID.

* Use aria-labeledby instead of aria-label

* Prefer aria-labelby with dynamic ids

* Prefer "for" over aria-labeledby

* Prefer "for" over aria-labeledby for MSSQL QE
---
 public/app/angular/components/code_editor/code_editor.ts    | 3 +++
 .../app/plugins/datasource/mssql/partials/query.editor.html | 6 +++---
 .../app/plugins/datasource/mysql/partials/query.editor.html | 6 +++---
 .../plugins/datasource/postgres/partials/query.editor.html  | 6 +++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/public/app/angular/components/code_editor/code_editor.ts b/public/app/angular/components/code_editor/code_editor.ts
index c6e144249d6..64723b24b64 100644
--- a/public/app/angular/components/code_editor/code_editor.ts
+++ b/public/app/angular/components/code_editor/code_editor.ts
@@ -99,6 +99,9 @@ async function link(scope: any, elem: any, attrs: any) {
   const textarea = elem.find('textarea');
   textarea.addClass('gf-form-input');
 
+  // All aria-label to be set for accessibility
+  textarea.attr('aria-label', attrs.textareaLabel);
+
   if (scope.codeEditorFocus) {
     setTimeout(() => {
       textarea.focus();
diff --git a/public/app/plugins/datasource/mssql/partials/query.editor.html b/public/app/plugins/datasource/mssql/partials/query.editor.html
index a1c71e0ccc8..6919c5ed2c4 100644
--- a/public/app/plugins/datasource/mssql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mssql/partials/query.editor.html
@@ -1,16 +1,16 @@
 <query-editor-row query-ctrl="ctrl" can-collapse="false">
 	<div class="gf-form-inline">
 		<div class="gf-form gf-form--grow">
-			<code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sqlserver">
+			<code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sqlserver" textarea-label="Query Editor">
 			</code-editor>
 		</div>
 	</div>
 
   <div class="gf-form-inline">
     <div class="gf-form">
-			<label class="gf-form-label query-keyword">Format as</label>
+			<label class="gf-form-label query-keyword" for="format-select-{{ ctrl.target.refId }}">Format as</label>
 			<div class="gf-form-select-wrapper">
-				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
+				<select id="format-select-{{ ctrl.target.refId }}" class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
 			</div>
 		</div>
 		<div class="gf-form">
diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html
index a04ea7891c2..014135413b6 100644
--- a/public/app/plugins/datasource/mysql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -3,7 +3,7 @@
   <div ng-if="ctrl.target.rawQuery">
     <div class="gf-form-inline">
       <div class="gf-form gf-form--grow">
-        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
+        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql" textarea-label="Query Editor">
         </code-editor>
       </div>
     </div>
@@ -102,9 +102,9 @@
 
   <div class="gf-form-inline">
     <div class="gf-form">
-      <label class="gf-form-label query-keyword">Format as</label>
+      <label class="gf-form-label query-keyword" for="format-select-{{ ctrl.target.refId }}">Format As</label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
+        <select id="format-select-{{ ctrl.target.refId }}" class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
       </div>
     </div>
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/postgres/partials/query.editor.html b/public/app/plugins/datasource/postgres/partials/query.editor.html
index 13bba6a04d9..ebf670cc4aa 100644
--- a/public/app/plugins/datasource/postgres/partials/query.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/query.editor.html
@@ -3,7 +3,7 @@
   <div ng-if="ctrl.target.rawQuery">
     <div class="gf-form-inline">
       <div class="gf-form gf-form--grow">
-        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
+        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql" textarea-label="Query Editor">
         </code-editor>
       </div>
     </div>
@@ -102,9 +102,9 @@
 
   <div class="gf-form-inline">
     <div class="gf-form">
-      <label class="gf-form-label query-keyword">Format as</label>
+      <label class="gf-form-label query-keyword" for="format-select-{{ ctrl.target.refId }}">Format as</label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
+        <select id="format-select-{{ ctrl.target.refId }}" class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
       </div>
     </div>
     <div class="gf-form">