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
4 changed files with 7 additions and 0 deletions
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"> <div data-testid="cloudwatch-dimensions-filter-item">
<InputGroup> <InputGroup>
<Select <Select
aria-label="Dimensions filter key"
inputId="cloudwatch-dimensions-filter-item-key" inputId="cloudwatch-dimensions-filter-item-key"
width="auto" width="auto"
value={filter.key ? toOption(filter.key) : null} value={filter.key ? toOption(filter.key) : null}
@@ -81,6 +82,7 @@ export const FilterItem: FunctionComponent<Props> = ({
<span className={cx(styles.root)}>=</span> <span className={cx(styles.root)}>=</span>
<Select <Select
aria-label="Dimensions filter value"
inputId="cloudwatch-dimensions-filter-item-value" inputId="cloudwatch-dimensions-filter-item-value"
onOpenMenu={loadOptions} onOpenMenu={loadOptions}
width="auto" 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> <EditorField label="Limit" optional>
<Input <Input
id={`${query.refId}-cloudwatch-sql-builder-editor-limit`}
value={sql.limit} value={sql.limit}
onChange={(e) => { onChange={(e) => {
const val = e.currentTarget.valueAsNumber; 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> <EditorFieldGroup>
<EditorField label="Metric name" width={16}> <EditorField label="Metric name" width={16}>
<Select <Select
aria-label="Metric name"
value={metricName ? toOption(metricName) : null} value={metricName ? toOption(metricName) : null}
options={metricOptions} options={metricOptions}
allowCustomValue allowCustomValue
@@ -106,6 +107,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
<EditorField label="Aggregation" width={16}> <EditorField label="Aggregation" width={16}>
<Select <Select
aria-label="Aggregation"
value={aggregation ? toOption(aggregation) : null} value={aggregation ? toOption(aggregation) : null}
options={appendTemplateVariables(datasource, AGGREGATIONS)} options={appendTemplateVariables(datasource, AGGREGATIONS)}
onChange={({ value }) => value && onQueryChange(setAggregation(query, value))} 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}> <EditorField label="Order by" optional width={16}>
<> <>
<Select <Select
aria-label="Order by"
onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))} onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))}
options={appendTemplateVariables(datasource, STATISTICS.map(toOption))} options={appendTemplateVariables(datasource, STATISTICS.map(toOption))}
value={orderBy ? toOption(orderBy) : null} value={orderBy ? toOption(orderBy) : null}
@@ -47,6 +48,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
<EditorField label="Direction" width={16}> <EditorField label="Direction" width={16}>
<Select <Select
aria-label="Direction"
inputId="cloudwatch-sql-order-by-direction" inputId="cloudwatch-sql-order-by-direction"
disabled={!orderBy} disabled={!orderBy}
value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]} value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]}