IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility Fixes for Several SQL Based Datasource Config Pages (#43982)

Browse Source 
* 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
This commit is contained in:
Kyle Cunningham 2022-01-19 15:53:54 -06:00 committed by GitHub
parent 61974383d7
commit febc24522d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/angular/angular_wrappers.ts
View File

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

6
public/app/angular/services/ng_react.ts
View File

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

1
public/app/core/components/AccessControl/AddPermission.tsx
View File

@ -92,6 +92,7 @@ export const AddPermission = ({
)}
<Select
aria-label="Permission Level"
width={25}
menuShouldPortal
value={permissions.find((p) => p === permission)}

9
public/app/plugins/datasource/mssql/partials/config.html
View File

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

1
public/app/plugins/datasource/mysql/partials/config.html
View File

@ -23,6 +23,7 @@
on-reset="ctrl.onPasswordReset"
on-change="ctrl.onPasswordChange"
inputWidth="9"
aria-label="'Password'"
/>
</div>
</div>

9
public/app/plugins/datasource/postgres/partials/config.html
View File

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