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

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

@ -20,7 +20,8 @@
</a>
</label>
<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-change="ctrl.targetBlur()">
</select>
@ -62,9 +63,10 @@
<div class="gf-form">
<label class="gf-form-label query-keyword">Aggregator</label>
<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-change="ctrl.targetBlur()">
ng-change="ctrl.targetBlur()">
</select>
</div>
</div>