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

Segment: Individual segments are now keyboard accessible (#60555)

Browse Source 
use <button> for keyboard accessibility
This commit is contained in:
Ashley Harrison 2022-12-21 17:26:18 +00:00 committed by GitHub
parent 0367036108
commit a16ca209fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
View File

@ -1,5 +1,8 @@
import React, { useState, useRef, ReactElement } from 'react'; import React, { useState, useRef, ReactElement } from 'react';
import { useStyles2 } from '../../themes';
import { clearButtonStyles } from '../Button';
interface LabelProps { interface LabelProps {
Component: ReactElement; Component: ReactElement;
onClick?: () => void; onClick?: () => void;
@ -10,7 +13,8 @@ export const useExpandableLabel = (
initialExpanded: boolean, initialExpanded: boolean,
onExpandedChange?: (expanded: boolean) => void onExpandedChange?: (expanded: boolean) => void
): [React.ComponentType<LabelProps>, number, boolean, (expanded: boolean) => void] => { ): [React.ComponentType<LabelProps>, number, boolean, (expanded: boolean) => void] => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLButtonElement>(null);
const buttonStyles = useStyles2(clearButtonStyles);
const [expanded, setExpanded] = useState<boolean>(initialExpanded); const [expanded, setExpanded] = useState<boolean>(initialExpanded);
const [width, setWidth] = useState(0); const [width, setWidth] = useState(0);
@ -22,24 +26,21 @@ export const useExpandableLabel = (
}; };
const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => ( const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => (
<div <button
type="button"
className={buttonStyles}
ref={ref} ref={ref}
onClick={ disabled={disabled}
disabled onClick={() => {
? undefined
: () => {
setExpandedWrapper(true); setExpandedWrapper(true);
if (ref && ref.current) { if (ref && ref.current) {
setWidth(ref.current.clientWidth * 1.25); setWidth(ref.current.clientWidth * 1.25);
} }
if (onClick) { onClick?.();
onClick(); }}
}
}
}
> >
{Component} {Component}
</div> </button>
); );
return [Label, width, expanded, setExpandedWrapper]; return [Label, width, expanded, setExpandedWrapper];