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

Explore: Improve a11y of query row collapse button (#53827)

Browse Source 
* refactor: convert to IconButton

* refactor: adjust attributes
This commit is contained in:
Laura Benz 2022-08-24 15:38:16 +02:00 committed by GitHub
parent 50d0581000
commit 95ec6f6c0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -3,7 +3,7 @@ import React, { MouseEventHandler } from 'react';
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
import { Icon, IconButton, useStyles2 } from '@grafana/ui';
interface QueryOperationRowHeaderProps {
actionsElement?: React.ReactNode;
@ -33,10 +33,13 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
return (
<div className={styles.header}>
<div className={styles.column}>
<Icon
<IconButton
name={isContentVisible ? 'angle-down' : 'angle-right'}
title="toggle collapse and expand"
aria-label="toggle collapse and expand query row"
className={styles.collapseIcon}
onClick={onRowToggle}
type="button"
/>
{titleElement && (
<div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">
@ -94,10 +97,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
}
`,
collapseIcon: css`
margin-left: ${theme.spacing(0.5)};
color: ${theme.colors.text.disabled};
cursor: pointer;
&:hover {
color: ${theme.colors.text};
}
`,
titleWrapper: css`