Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-color-picker): a11y labels and behaviors #33543

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+85 −12
Open

feat(react-color-picker): a11y labels and behaviors #33543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0432d3
feat(react-color-picker): a11y labels and behaviors
ValentinaKozlova Jan 2, 2025
3350689
Change files
ValentinaKozlova Jan 7, 2025
de4f061
Merge branch 'master' into feat/a11y-color-picker
ValentinaKozlova Jan 7, 2025
820c5d5
updated snapshots
ValentinaKozlova Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-color-picker-preview-cf2c2f44-2d77-4ead-b123-c81b1da98292.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "feat: added aria-attributes to the ColorPicker",
"packageName": "@fluentui/react-color-picker-preview",
"email": "[email protected]",
"dependentChangeType": "patch"
}
3 changes: 3 additions & 0 deletions ...onents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@ describe('ColorSlider', () => {
<div>
<div
class="fui-ColorSlider"
role="group"
style="--fui-Slider--direction: -90deg; --fui-Slider--progress: 0%; --fui-Slider__thumb--color: hsl(0, 100%, 50%);"
>
<input
aria-orientation="horizontal"
class="fui-ColorSlider__input"
id="slider-9"
max="360"
min="0"
tabindex="0"
type="range"
value="0"
/>
Expand Down
7 changes: 6 additions & 1 deletion ...omponents/react-color-picker-preview/library/src/components/ColorSlider/useColorSlider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,10 @@ export const useColorSlider_unstable = (
thumb: 'div',
Copy link
Collaborator

@fabricteam fabricteam Jan 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 4 Changed

},
root: slot.always(root, {
defaultProps: nativeProps.root,
defaultProps: {
role: 'group',
...nativeProps.root,
},
elementType: 'div',
}),
input: slot.always(input, {
Expand All @@ -96,6 +99,8 @@ export const useColorSlider_unstable = (
ref,
min: MIN,
max: MAX,
tabIndex: 0,
['aria-orientation']: vertical ? 'vertical' : 'horizontal',
...nativeProps.primary,
type: 'range',
},
Expand Down
18 changes: 15 additions & 3 deletions ...ponents/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,25 @@ export const AlphaSliderExample = (props: Partial<AlphaSliderProps>) => {
const styles = useStyles();

const [color, setColor] = React.useState(COLOR);
const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => setColor({ ...data.color, a: data.color.a ?? 1 });
const [value, setValue] = React.useState(COLOR.a * 100);
const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => {
const alpha = data.color.a ?? 1;
setColor({ ...data.color, a: alpha });
setValue(alpha * 100);
};
const resetSlider = () => setColor(COLOR);

return (
<div className={styles.example}>
<AlphaSlider color={color} onChange={onSliderChange} {...props} />
<AlphaSlider color={color} onChange={onSliderChange} vertical {...props} />
<AlphaSlider color={color} onChange={onSliderChange} aria-valuetext={`${value}%`} aria-label="Alpha" {...props} />
<AlphaSlider
color={color}
onChange={onSliderChange}
aria-valuetext={`${value}%`}
aria-label="Vertical alpha"
vertical
{...props}
/>
<div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
<Button onClick={resetSlider}>Reset</Button>
</div>
Expand Down
17 changes: 15 additions & 2 deletions ...omponents/react-color-picker-preview/stories/src/ColorPicker/ColorAreaDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,25 @@ export const ColorAreaExample = () => {
const styles = useStyles();

const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
const onChange: ColorAreaProps['onChange'] = (_, data) => setColor({ ...data.color, a: data.color.a ?? 1 });
const [namedColor, setNamedColor] = React.useState('');

const onChange: ColorAreaProps['onChange'] = (_, data) => {
setColor({ ...data.color, a: data.color.a ?? 1 });
const _namedColor = tinycolor(`hsl(${data.color.h},100%,50%)`).toName();
if (_namedColor) {
setNamedColor(_namedColor);
}
};
const resetSlider = () => setColor(DEFAULT_COLOR_HSV);
const ariaAttributes = {
'aria-label': 'ColorPicker',
'aria-roledescription': '2D slider',
'aria-valuetext': `Saturation ${color.s * 100}, Brightness: ${color.v * 100}, ${namedColor}`,
};

return (
<div className={styles.example}>
<ColorArea color={color} onChange={onChange} />
<ColorArea color={color} onChange={onChange} inputX={ariaAttributes} inputY={ariaAttributes} />
<div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toHexString() }} />
<Button onClick={resetSlider}>Reset</Button>
</div>
Expand Down
17 changes: 14 additions & 3 deletions ...ponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,16 @@ export const Default = () => {
const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
const [hex, setHex] = React.useState(tinycolor(color).toHexString());
const [rgb, setRgb] = React.useState(tinycolor(color).toRgb());
const [namedColor, setNamedColor] = React.useState('');

const handleChange: ColorPickerProps['onColorChange'] = (_, data) => {
setColor({ ...data.color, a: data.color.a ?? 1 });
setHex(tinycolor(data.color).toHexString());
setRgb(tinycolor(data.color).toRgb());
const _namedColor = tinycolor(`hsl(${data.color.h},100%,50%)`).toName();
if (_namedColor) {
setNamedColor(_namedColor);
}
};

const onRgbChange = (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {
Expand All @@ -91,12 +96,18 @@ export const Default = () => {
}
};

const colorAriaAttributes = {
'aria-label': 'ColorPicker',
'aria-roledescription': '2D slider',
'aria-valuetext': `Saturation ${color.s * 100}, Brightness: ${color.v * 100}, ${namedColor}`,
};

return (
<div className={styles.example}>
<ColorPicker color={color} onColorChange={handleChange}>
<ColorArea />
<ColorSlider />
<AlphaSlider />
<ColorArea inputX={colorAriaAttributes} inputY={colorAriaAttributes} />
<ColorSlider aria-label="Hue" aria-valuetext={`${color.h}°, ${namedColor}`} />
<AlphaSlider aria-label="Alpha" aria-valuetext={`${color.a * 100}%`} />
</ColorPicker>
<div className={styles.inputFields}>
<div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
Expand Down
28 changes: 25 additions & 3 deletions ...ponents/react-color-picker-preview/stories/src/ColorPicker/ColorSliderDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,35 @@ const DEFAULT_COLOR_HSV = tinycolor('#2be700').toHsv();
export const ColorSliderExample = (props: Partial<ColorSliderProps>) => {
const styles = useStyles();
const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
const onSliderChange: ColorSliderProps['onChange'] = (_, data) => setColor({ ...data.color, a: data.color.a ?? 1 });
const [hue, setHue] = React.useState(DEFAULT_COLOR_HSV.h);
const [namedColor, setNamedColor] = React.useState('');
const onSliderChange: ColorSliderProps['onChange'] = (_, data) => {
setColor({ ...data.color, a: data.color.a ?? 1 });
setHue(data.color.h);
const _namedColor = tinycolor(`hsl(${data.color.h},100%,50%)`).toName();
if (_namedColor) {
setNamedColor(_namedColor);
}
};
const resetSlider = () => setColor(DEFAULT_COLOR_HSV);

return (
<div className={styles.example}>
<ColorSlider color={color} onChange={onSliderChange} {...props} />
<ColorSlider color={color} onChange={onSliderChange} vertical {...props} />
<ColorSlider
color={color}
onChange={onSliderChange}
aria-label="Hue"
aria-valuetext={`${hue}°, ${namedColor}`}
{...props}
/>
<ColorSlider
color={color}
onChange={onSliderChange}
vertical
aria-label="Vertical Hue"
aria-valuetext={`${hue}°, ${namedColor}`}
{...props}
/>
<div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toHexString() }} />
<Button onClick={resetSlider}>Reset</Button>
</div>
Expand Down
Loading