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: Improve keyboard accessibility in Collapse (#59022)

Browse Source 
fix keyboard accessibility in Collapse
This commit is contained in:
Ashley Harrison 2022-11-22 11:19:57 +00:00 committed by GitHub
parent 189bf102cf
commit 19e97a1f31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/Collapse/Collapse.tsx
View File

@ -4,6 +4,7 @@ import React, { FunctionComponent, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext';
import { clearButtonStyles } from '../Button';
import { Icon } from '../Icon/Icon';
const getStyles = (theme: GrafanaTheme2) => ({
@ -71,9 +72,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
label: collapse__header;
padding: ${theme.spacing(1, 2, 1, 2)};
display: flex;
cursor: inherit;
transition: all 0.1s linear;
cursor: pointer;
`,
headerCollapsed: css`
label: collapse__header--collapsed;
@ -132,6 +131,7 @@ export const Collapse = ({
className,
children,
}: React.PropsWithChildren<Props>) => {
const buttonStyles = useStyles2(clearButtonStyles);
const style = useStyles2(getStyles);
const onClickToggle = () => {
if (onToggle) {
@ -145,10 +145,10 @@ export const Collapse = ({
return (
<div className={panelClass}>
<div className={headerClass} onClick={onClickToggle}>
<button type="button" className={cx(buttonStyles, headerClass)} onClick={onClickToggle}>
{collapsible && <Icon className={style.icon} name={isOpen ? 'angle-down' : 'angle-right'} />}
<div className={cx([style.headerLabel])}>{label}</div>
</div>
</button>
{isOpen && (
<div className={cx([style.collapseBody])}>
<div className={loaderClass} />