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: a11y: Add missing aria labels on explore metrics/logs editor (#43580)

Browse Source 
* CloudWatch: a11y: Add missing aria labels on explore metrics/logs editor
This commit is contained in:
Shirley 2022-01-05 09:46:05 +01:00 committed by GitHub
parent a9ad7d3c03
commit ba58b34219
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,5 +17,5 @@ export const Alias: FunctionComponent<Props> = ({ value = '', onChange }) => {
propagateOnChange(e.target.value);
};
return <Input type="text" value={alias} onChange={onChange} />;
return <Input type="text" value={alias} onChange={onChange} aria-label="Optional alias" />;
};

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

@ -331,6 +331,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
labelWidth={4}
inputEl={
<Select
aria-label="Region"
menuShouldPortal
options={regions}
value={selectedRegion}
@ -348,6 +349,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
className="flex-grow-1"
inputEl={
<MultiSelect
aria-label="Log Groups"
menuShouldPortal
allowCustomValue={allowCustomValue}
options={unionBy(availableLogGroups, selectedLogGroups, 'value')}

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

@ -38,6 +38,7 @@ export function MetricStatEditor({
<EditorFieldGroup>
<EditorField label="Namespace" width={26}>
<Select
aria-label="Namespace"
value={query.namespace}
allowCustomValue
options={namespaces}
@ -50,6 +51,7 @@ export function MetricStatEditor({
</EditorField>
<EditorField label="Metric name" width={16}>
<Select
aria-label="Metric name"
value={query.metricName}
allowCustomValue
options={metrics}

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

@ -144,6 +144,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
tooltip="ID can be used to reference other queries in math expressions. The ID can include numbers, letters, and underscore, and must start with a lowercase letter."
>
<Input
aria-label="Optional ID"
onBlur={onRunQuery}
onChange={(event: ChangeEvent<HTMLInputElement>) =>
this.onChange({ ...metricsQuery, id: event.target.value })
@ -156,6 +157,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
<EditorField label="Period" width={26} tooltip="Minimum interval between points in seconds.">
<Input
aria-label="Period"
value={query.period || ''}
placeholder="auto"
onBlur={onRunQuery}

3
public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
View File

@ -82,9 +82,10 @@ const QueryHeader: React.FC<QueryHeaderProps> = ({ query, sqlCodeEditorIsDirty,
isLoading={regionIsLoading}
/>
<InlineSelect value={queryMode} options={apiModes} onChange={onQueryModeChange} />
<InlineSelect aria-label="Query mode" value={queryMode} options={apiModes} onChange={onQueryModeChange} />
<InlineSelect
aria-label="Metric editor mode"
value={metricEditorModes.find((m) => m.value === metricQueryType)}
options={metricEditorModes}
onChange={({ value }) => {