IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 01:41:24 -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

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

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