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: Added aria-label to ColorPicker component (#72666)

Browse Source 
* A11y: Added aria-label to ColorPicker component

* Updated the code with changes suggested
This commit is contained in:
RoxanaAnamariaTurc
2023-08-03 12:26:04 +03:00
committed by GitHub
parent a44e0f2cfd
commit 2a2207db00
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,13 +35,12 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
pickerTriggerRef = createRef<any>();
render() {
const { theme, children, onChange } = this.props;
const { theme, children, onChange, color } = this.props;
const styles = getStyles(theme);
const popoverElement = React.createElement(popover, {
...{ ...this.props, children: null },
onChange,
});
return (
<PopoverController content={popoverElement} hideAfter={300}>
{(showPopper, hidePopper, popperProps) => {
@@ -72,7 +71,8 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
ref={this.pickerTriggerRef}
onClick={showPopper}
onMouseLeave={hidePopper}
color={theme.visualization.getColorByName(this.props.color || '#000000')}
color={theme.visualization.getColorByName(color || '#000000')}
aria-label={color}
/>
)}
</>

11
packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
View File

@@ -28,13 +28,18 @@ export const ColorSwatch = React.forwardRef<HTMLDivElement, Props>(
const theme = useTheme2();
const { isFocusVisible, focusProps } = useFocusRing();
const styles = getStyles(theme, variant, color, isFocusVisible, isSelected);
const hasLabel = !!label;
const colorLabel = `${ariaLabel || label} color`;
const hasLabel = !label;
const colorLabel = ariaLabel || label;
return (
<div ref={ref} className={styles.wrapper} data-testid={selectors.components.ColorSwatch.name} {...otherProps}>
{hasLabel && <span className={styles.label}>{label}</span>}
<button className={styles.swatch} {...focusProps} aria-label={colorLabel} type="button" />
<button
className={styles.swatch}
{...focusProps}
aria-label={hasLabel ? `${colorLabel} color` : 'Pick a color'}
type="button"
/>
</div>
);
}