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

Cloudwatch: Improve accessibility in metrics search and query builders (#43997)

Browse Source 
* Add more aria labels on metrics search and query builders

* Use id for Input
This commit is contained in:
Shirley 2022-01-14 14:56:00 +01:00 committed by GitHub
parent 9fc46b19e3
commit 9f404daf9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx
View File

@ -66,6 +66,7 @@ export const FilterItem: FunctionComponent<Props> = ({
<div data-testid="cloudwatch-dimensions-filter-item">
<InputGroup>
<Select
aria-label="Dimensions filter key"
inputId="cloudwatch-dimensions-filter-item-key"
width="auto"
value={filter.key ? toOption(filter.key) : null}
@ -81,6 +82,7 @@ export const FilterItem: FunctionComponent<Props> = ({
<span className={cx(styles.root)}>=</span>
<Select
aria-label="Dimensions filter value"
inputId="cloudwatch-dimensions-filter-item-value"
onOpenMenu={loadOptions}
width="auto"

1
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
View File

@ -65,6 +65,7 @@ export function SQLBuilderEditor({ query, datasource, onChange, onRunQuery }: Re
<EditorField label="Limit" optional>
<Input
id={`${query.refId}-cloudwatch-sql-builder-editor-limit`}
value={sql.limit}
onChange={(e) => {
const val = e.currentTarget.valueAsNumber;

2
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
View File

@ -96,6 +96,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
<EditorFieldGroup>
<EditorField label="Metric name" width={16}>
<Select
aria-label="Metric name"
value={metricName ? toOption(metricName) : null}
options={metricOptions}
allowCustomValue
@ -106,6 +107,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
<EditorField label="Aggregation" width={16}>
<Select
aria-label="Aggregation"
value={aggregation ? toOption(aggregation) : null}
options={appendTemplateVariables(datasource, AGGREGATIONS)}
onChange={({ value }) => value && onQueryChange(setAggregation(query, value))}

2
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
View File

@ -29,6 +29,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
<EditorField label="Order by" optional width={16}>
<>
<Select
aria-label="Order by"
onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))}
options={appendTemplateVariables(datasource, STATISTICS.map(toOption))}
value={orderBy ? toOption(orderBy) : null}
@ -47,6 +48,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
<EditorField label="Direction" width={16}>
<Select
aria-label="Direction"
inputId="cloudwatch-sql-order-by-direction"
disabled={!orderBy}
value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]}