public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility Fixes for Several SQL Based Query Editors (#43981)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
public/app/angular/components/code_editor/code_editor.ts
+3
View File
@@ -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
+3 -3
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">
public/app/plugins/datasource/mysql/partials/query.editor.html
+3 -3
View File
@@ -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 -3
View File
@@ -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">