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

Accessibility: Use button instead of div in ColorPicker story (#59581)

Browse Source 
use button instead of div in colorpicker story
This commit is contained in:
Ashley Harrison 2022-12-01 09:26:58 +00:00 committed by GitHub
parent 51d7231595
commit a958b0be44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react'; import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react'; import React from 'react';
import { SeriesColorPicker, ColorPicker } from '@grafana/ui'; import { SeriesColorPicker, ColorPicker, clearButtonStyles, useStyles2 } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
@ -44,6 +44,7 @@ export const Basic: ComponentStory<typeof ColorPicker> = ({ color, enableNamedCo
export const SeriesPicker: ComponentStory<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => { export const SeriesPicker: ComponentStory<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => {
const [, updateArgs] = useArgs(); const [, updateArgs] = useArgs();
const clearButton = useStyles2(clearButtonStyles);
return ( return (
<SeriesColorPicker <SeriesColorPicker
enableNamedColors={enableNamedColors} enableNamedColors={enableNamedColors}
@ -56,9 +57,16 @@ export const SeriesPicker: ComponentStory<typeof SeriesColorPicker> = ({ color,
}} }}
> >
{({ ref, showColorPicker, hideColorPicker }) => ( {({ ref, showColorPicker, hideColorPicker }) => (
<div ref={ref} onMouseLeave={hideColorPicker} onClick={showColorPicker} style={{ color, cursor: 'pointer' }}> <button
type="button"
ref={ref}
onMouseLeave={hideColorPicker}
onClick={showColorPicker}
style={{ color }}
className={clearButton}
>
Open color picker Open color picker
</div> </button>
)} )}
</SeriesColorPicker> </SeriesColorPicker>
); );