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: Improve accessibility of ColorPickerInput (#60923)

Browse Source
This commit is contained in:
Joao Silva 2023-01-04 13:19:41 +01:00 committed by GitHub
parent c68603a573
commit 220175cab9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
View File

@ -12,10 +12,11 @@ import { ColorPickerProps } from './ColorPickerPopover';
interface ColorInputProps extends ColorPickerProps, Omit<InputProps, 'color' | 'onChange'> { interface ColorInputProps extends ColorPickerProps, Omit<InputProps, 'color' | 'onChange'> {
isClearable?: boolean; isClearable?: boolean;
buttonAriaLabel?: string;
} }
const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>( const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
({ color, onChange, isClearable = false, ...inputProps }, ref) => { ({ color, onChange, isClearable = false, onClick, onBlur, disabled, buttonAriaLabel, ...inputProps }, ref) => {
const [value, setValue] = useState(color); const [value, setValue] = useState(color);
const [previousColor, setPreviousColor] = useState(color); const [previousColor, setPreviousColor] = useState(color);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -44,12 +45,14 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
} }
}; };
const onBlur = () => { const onBlurInput = (event: React.FocusEvent<HTMLInputElement>) => {
const newColor = tinycolor(value); const newColor = tinycolor(value);
if (!newColor.isValid()) { if (!newColor.isValid()) {
setValue(color); setValue(color);
} }
onBlur?.(event);
}; };
return ( return (
@ -57,8 +60,10 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
{...inputProps} {...inputProps}
value={value} value={value}
onChange={onChangeColor} onChange={onChangeColor}
onBlur={onBlur} disabled={disabled}
addonBefore={<ColorPreview color={color} />} onClick={onClick}
onBlur={onBlurInput}
addonBefore={<ColorPreview onClick={onClick} ariaLabel={buttonAriaLabel} disabled={disabled} color={color} />}
ref={ref} ref={ref}
/> />
); );
@ -71,13 +76,20 @@ export default ColorInput;
interface ColorPreviewProps { interface ColorPreviewProps {
color: string; color: string;
onClick?: React.MouseEventHandler<HTMLElement>;
disabled?: boolean;
ariaLabel?: string;
} }
const ColorPreview = ({ color }: ColorPreviewProps) => { const ColorPreview = ({ color, onClick, disabled, ariaLabel }: ColorPreviewProps) => {
const styles = useStyles2(getColorPreviewStyles); const styles = useStyles2(getColorPreviewStyles);
return ( return (
<div <button
type="button"
onClick={onClick}
aria-label={ariaLabel}
disabled={disabled || !onClick}
className={cx( className={cx(
styles, styles,
css` css`

14
packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx
View File

@ -59,9 +59,17 @@ export const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputPro
className={cx(paletteStyles.root, styles.picker)} className={cx(paletteStyles.root, styles.picker)}
/> />
)} )}
<div onClick={() => setIsOpen(true)}> <ColorInput
<ColorInput {...inputProps} theme={theme} color={currentColor} onChange={setColor} ref={ref} isClearable /> {...inputProps}
</div> theme={theme}
color={currentColor}
onChange={setColor}
buttonAriaLabel="Open color picker"
onClick={() => setIsOpen(true)}
onBlur={() => setIsOpen(false)}
ref={ref}
isClearable
/>
</div> </div>
</ClickOutsideWrapper> </ClickOutsideWrapper>
); );