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
This commit is contained in:
Kyle Cunningham
2022-01-19 15:56:33 -06:00
committed by GitHub
parent febc24522d
commit 6958de846c
4 changed files with 12 additions and 9 deletions

View File

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