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

A11y: Fix a11y issues in OpenTSDB (#43714)

Browse Source 
* Fix a11y issues in OpenTSDB configuration page

* Fix a11y issues in OpenTSDB editor

* Link labels to inputs where possible

Co-authored-by: kay delaney <kay@grafana.com>
This commit is contained in:
Piotr Jamróz 2022-01-05 19:28:28 +01:00 committed by GitHub
parent 825edddfb6
commit bac9253fdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
View File

@ -3,6 +3,7 @@ import { InlineFormLabel, LegacyForms } from '@grafana/ui';
const { Select, Input } = LegacyForms; const { Select, Input } = LegacyForms;
import { DataSourceSettings, SelectableValue } from '@grafana/data'; import { DataSourceSettings, SelectableValue } from '@grafana/data';
import { OpenTsdbOptions } from '../types'; import { OpenTsdbOptions } from '../types';
import { useUniqueId } from '../../influxdb/components/useUniqueId';
const tsdbVersions = [ const tsdbVersions = [
{ label: '<=2.1', value: 1 }, { label: '<=2.1', value: 1 },
@ -23,12 +24,17 @@ interface Props {
export const OpenTsdbDetails = (props: Props) => { export const OpenTsdbDetails = (props: Props) => {
const { onChange, value } = props; const { onChange, value } = props;
const idSuffix = useUniqueId();
return ( return (
<> <>
<h5>OpenTSDB settings</h5> <h5>OpenTSDB settings</h5>
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={7}>Version</InlineFormLabel> <InlineFormLabel width={7} htmlFor={`select-version-${idSuffix}`}>
Version
</InlineFormLabel>
<Select <Select
inputId={`select-version-${idSuffix}`}
menuShouldPortal menuShouldPortal
options={tsdbVersions} options={tsdbVersions}
value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]} value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
@ -36,8 +42,11 @@ export const OpenTsdbDetails = (props: Props) => {
/> />
</div> </div>
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={7}>Resolution</InlineFormLabel> <InlineFormLabel width={7} htmlFor={`select-resolution-${idSuffix}`}>
Resolution
</InlineFormLabel>
<Select <Select
inputId={`select-resolution-${idSuffix}`}
menuShouldPortal menuShouldPortal
options={tsdbResolutions} options={tsdbResolutions}
value={ value={
@ -48,8 +57,11 @@ export const OpenTsdbDetails = (props: Props) => {
/> />
</div> </div>
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={7}>Lookup limit</InlineFormLabel> <InlineFormLabel width={7} htmlFor={`lookup-input-${idSuffix}`}>
Lookup limit
</InlineFormLabel>
<Input <Input
id={`lookup-input-${idSuffix}`}
type="number" type="number"
value={value.jsonData.lookupLimit ?? 1000} value={value.jsonData.lookupLimit ?? 1000}
onChange={onInputChangeHandler('lookupLimit', value, onChange)} onChange={onInputChangeHandler('lookupLimit', value, onChange)}

6
public/app/plugins/datasource/opentsdb/partials/query.editor.html
View File

@ -20,7 +20,8 @@
</a> </a>
</label> </label>
<div class="gf-form-select-wrapper max-width-15"> <div class="gf-form-select-wrapper max-width-15">
<select ng-model="ctrl.target.aggregator" class="gf-form-input" <select aria-label="Metric aggregator"
ng-model="ctrl.target.aggregator" class="gf-form-input"
ng-options="agg for agg in ctrl.aggregators" ng-options="agg for agg in ctrl.aggregators"
ng-change="ctrl.targetBlur()"> ng-change="ctrl.targetBlur()">
</select> </select>
@ -62,7 +63,8 @@
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword">Aggregator</label> <label class="gf-form-label query-keyword">Aggregator</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select ng-model="ctrl.target.downsampleAggregator" class="gf-form-input" <select aria-label="Downsample aggregator"
ng-model="ctrl.target.downsampleAggregator" class="gf-form-input"
ng-options="agg for agg in ctrl.aggregators" ng-options="agg for agg in ctrl.aggregators"
ng-change="ctrl.targetBlur()"> ng-change="ctrl.targetBlur()">
</select> </select>