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

@@ -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();

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

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

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