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
2 changed files with 10 additions and 8 deletions
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 React from 'react';
import { useToggle } from 'react-use'; import { useToggle } from 'react-use';
import { CoreApp, GrafanaTheme2 } from '@grafana/data'; 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'; import { Query } from '../types';
@@ -35,10 +35,11 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
const [isOpen, toggleOpen] = useToggle(false); const [isOpen, toggleOpen] = useToggle(false);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const options = getOptions(app); const options = getOptions(app);
const buttonStyles = useStyles2(clearButtonStyles);
return ( return (
<Stack gap={0} direction="column"> <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}> <div className={styles.toggle}>
<Icon name={isOpen ? 'angle-down' : 'angle-right'} /> <Icon name={isOpen ? 'angle-down' : 'angle-right'} />
</div> </div>
@@ -48,7 +49,7 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
<span>Type: {query.queryType}</span> <span>Type: {query.queryType}</span>
</div> </div>
)} )}
</div> </Button>
{isOpen && ( {isOpen && (
<div className={styles.body}> <div className={styles.body}>
<Field label={'Query Type'}> <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 React from 'react';
import { useToggle } from 'react-use'; import { useToggle } from 'react-use';
import { CoreApp, GrafanaTheme2, SelectableValue } from '@grafana/data'; 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'; import { Query } from '../types';
@@ -43,10 +43,11 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
value: l, value: l,
})) }))
: []; : [];
const buttonStyles = useStyles2(clearButtonStyles);
return ( return (
<Stack gap={0} direction="column"> <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}> <div className={styles.toggle}>
<Icon name={isOpen ? 'angle-down' : 'angle-right'} /> <Icon name={isOpen ? 'angle-down' : 'angle-right'} />
</div> </div>
@@ -60,7 +61,7 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
))} ))}
</div> </div>
)} )}
</div> </Button>
{isOpen && ( {isOpen && (
<div className={styles.body}> <div className={styles.body}>
<EditorField label={'Query Type'}> <EditorField label={'Query Type'}>