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

Accessibility: Make QueryOptions in Phlare and Parca accessible (#68515)

Browse Source 
Fix accessibility issues for QueryOptions in Phlare and Parca
This commit is contained in:
Joey 2023-05-18 09:39:18 +01:00 committed by GitHub
parent 633b7875e7
commit fb3437586e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/plugins/datasource/parca/QueryEditor/QueryOptions.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import { css, cx } from '@emotion/css';
import React from 'react';
import { useToggle } from 'react-use';
import { CoreApp, GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2, RadioButtonGroup, Field } from '@grafana/ui';
import { Icon, useStyles2, RadioButtonGroup, Field, clearButtonStyles, Button } from '@grafana/ui';
import { Query } from '../types';
@ -35,10 +35,11 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
const [isOpen, toggleOpen] = useToggle(false);
const styles = useStyles2(getStyles);
const options = getOptions(app);
const buttonStyles = useStyles2(clearButtonStyles);
return (
<Stack gap={0} direction="column">
<div className={styles.header} onClick={toggleOpen} title="Click to edit options">
<Button className={cx(styles.header, buttonStyles)} onClick={toggleOpen} title="Click to edit options">
<div className={styles.toggle}>
<Icon name={isOpen ? 'angle-down' : 'angle-right'} />
</div>
@ -48,7 +49,7 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
<span>Type: {query.queryType}</span>
</div>
)}
</div>
</Button>
{isOpen && (
<div className={styles.body}>
<Field label={'Query Type'}>

9
public/app/plugins/datasource/phlare/QueryEditor/QueryOptions.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import { css, cx } from '@emotion/css';
import React from 'react';
import { useToggle } from 'react-use';
import { CoreApp, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Icon, useStyles2, RadioButtonGroup, MultiSelect, Input } from '@grafana/ui';
import { Icon, useStyles2, RadioButtonGroup, MultiSelect, Input, clearButtonStyles, Button } from '@grafana/ui';
import { Query } from '../types';
@ -43,10 +43,11 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
value: l,
}))
: [];
const buttonStyles = useStyles2(clearButtonStyles);
return (
<Stack gap={0} direction="column">
<div className={styles.header} onClick={toggleOpen} title="Click to edit options">
<Button className={cx(styles.header, buttonStyles)} onClick={toggleOpen} title="Click to edit options">
<div className={styles.toggle}>
<Icon name={isOpen ? 'angle-down' : 'angle-right'} />
</div>
@ -60,7 +61,7 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
))}
</div>
)}
</div>
</Button>
{isOpen && (
<div className={styles.body}>
<EditorField label={'Query Type'}>