docs(react-color-picker): Added aria attributes to the stories.

microsoft · Jan 10, 2025 · 147a695 · 147a695
1 parent cd3334a
commit 147a695
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/...nents/react-color-picker-preview/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx b/...nents/react-color-picker-preview/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx
@@ -94,14 +94,19 @@ export const ColorAndSwatchPickerExample = () => {
     }
   }, [colorFocusTarget]);
 
+  const ariaAttributes = {
+    'aria-label': 'ColorPicker',
+    'aria-roledescription': '2D slider',
+  };
+
   return (
     <div className={styles.example}>
       <ColorPicker color={color} onColorChange={handleChange}>
-        <ColorArea />
+        <ColorArea inputX={ariaAttributes} inputY={ariaAttributes} />
         <div className={styles.row}>
           <div className={styles.sliders}>
-            <ColorSlider />
-            <AlphaSlider />
+            <ColorSlider aria-label="Hue" />
+            <AlphaSlider aria-label="Alpha" />
           </div>
           <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
         </div>

diff --git a/...omponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerPopup.stories.tsx b/...omponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerPopup.stories.tsx
@@ -49,6 +49,11 @@ export const ColorPickerPopup = () => {
 
   const [popoverOpen, setPopoverOpen] = React.useState(false);
 
+  const ariaAttributes = {
+    'aria-label': 'ColorPicker',
+    'aria-roledescription': '2D slider',
+  };
+
   return (
     <>
       <Popover open={popoverOpen} trapFocus onOpenChange={(_, data) => setPopoverOpen(data.open)}>
@@ -58,11 +63,11 @@ export const ColorPickerPopup = () => {
 
         <PopoverSurface>
           <ColorPicker color={previewColor} onColorChange={handleChange}>
-            <ColorArea />
+            <ColorArea inputX={ariaAttributes} inputY={ariaAttributes} />
             <div className={styles.row}>
               <div className={styles.sliders}>
-                <ColorSlider />
-                <AlphaSlider />
+                <ColorSlider aria-label="Hue" />
+                <AlphaSlider aria-label="Alpha" />
               </div>
               <div className={styles.previewColor} style={{ backgroundColor: tinycolor(previewColor).toRgbString() }} />
             </div>

diff --git a/...omponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerShape.stories.tsx b/...omponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerShape.stories.tsx
@@ -35,13 +35,18 @@ export const ColorPickerShape = () => {
   const handleChange: ColorPickerProps['onColorChange'] = (_, data) =>
     setColor({ ...data.color, a: data.color.a ?? 1 });
 
+  const ariaAttributes = {
+    'aria-label': 'ColorPicker',
+    'aria-roledescription': '2D slider',
+  };
+
   return (
     <div className={styles.example}>
       <h3>Rounded (default)</h3>
       <ColorPicker color={color} onColorChange={handleChange}>
-        <ColorSlider />
-        <AlphaSlider />
-        <ColorArea />
+        <ColorSlider aria-label="Hue" />
+        <AlphaSlider aria-label="Alpha" />
+        <ColorArea inputX={ariaAttributes} inputY={ariaAttributes} />
       </ColorPicker>
       <h3>Square (default)</h3>
       <ColorPicker shape="square" color={color} onColorChange={handleChange}>