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

A11y : Fix a11y in CollapsibleSection (#46455)

Browse Source 
* Fix a11y in CollapsibleSection

* Added type to button to avoid form submit on enter
This commit is contained in:
Yaelle Chaudy 2022-04-01 14:00:09 +02:00 committed by GitHub
parent 656ade9884
commit d217d2aa40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/alerting/unified/components/CollapseToggle.tsx
View File

@ -26,6 +26,7 @@ export const CollapseToggle: FC<Props> = ({
return ( return (
<Button <Button
type="button"
fill="text" fill="text"
aria-expanded={!isCollapsed} aria-expanded={!isCollapsed}
aria-controls={idControlled} aria-controls={idControlled}

8
public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
View File

@ -1,15 +1,17 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui'; import { IconSize, useStyles2 } from '@grafana/ui';
import React, { FC, useState } from 'react'; import React, { FC, useState } from 'react';
import { CollapseToggle } from '../../CollapseToggle';
interface Props { interface Props {
label: string; label: string;
description?: string; description?: string;
className?: string; className?: string;
size?: IconSize;
} }
export const CollapsibleSection: FC<Props> = ({ label, description, children, className }) => { export const CollapsibleSection: FC<Props> = ({ label, description, children, className, size = 'xl' }) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const [isCollapsed, setIsCollapsed] = useState(true); const [isCollapsed, setIsCollapsed] = useState(true);
@ -18,7 +20,7 @@ export const CollapsibleSection: FC<Props> = ({ label, description, children, cl
return ( return (
<div className={cx(styles.wrapper, className)}> <div className={cx(styles.wrapper, className)}>
<div className={styles.heading} onClick={toggleCollapse}> <div className={styles.heading} onClick={toggleCollapse}>
<Icon className={styles.caret} size="xl" name={isCollapsed ? 'angle-right' : 'angle-down'} /> <CollapseToggle className={styles.caret} size={size} onToggle={toggleCollapse} isCollapsed={isCollapsed} />
<h6>{label}</h6> <h6>{label}</h6>
</div> </div>
{description && <p className={styles.description}>{description}</p>} {description && <p className={styles.description}>{description}</p>}