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

microsoft · Jan 15, 2025 · 087380a · 087380a
1 parent 688e9ca
commit 087380a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 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
@@ -98,11 +98,11 @@ export const ColorAndSwatchPickerExample = () => {
   return (
     <div className={styles.example}>
       <ColorPicker color={color} onColorChange={handleChange}>
-        <ColorArea />
+        <ColorArea inputX={{ 'aria-label': 'Saturation' }} inputY={{ 'aria-label': 'Brightness' }} />
         <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/ColorAreaDefault.stories.tsx b/...omponents/react-color-picker-preview/stories/src/ColorPicker/ColorAreaDefault.stories.tsx
@@ -38,14 +38,18 @@ export const ColorAreaExample = () => {
   };
   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} inputX={ariaAttributes} inputY={ariaAttributes} />
+      <ColorArea
+        color={color}
+        onChange={onChange}
+        inputX={{ 'aria-label': 'Saturation', ...ariaAttributes }}
+        inputY={{ 'aria-label': 'Brightness', ...ariaAttributes }}
+      />
       <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toHexString() }} />
       <Button onClick={resetSlider}>Reset</Button>
     </div>

diff --git a/...ponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx b/...ponents/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx
@@ -120,15 +120,17 @@ 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 inputX={colorAriaAttributes} inputY={colorAriaAttributes} />
+        <ColorArea
+          inputX={{ 'aria-label': 'Saturation', ...colorAriaAttributes }}
+          inputY={{ 'aria-label': 'Brightness', ...colorAriaAttributes }}
+        />
         <ColorSlider aria-label="Hue" aria-valuetext={`${color.h}°, ${namedColor}`} />
         <AlphaSlider aria-label="Alpha" aria-valuetext={`${color.a * 100}%`} />
       </ColorPicker>

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
@@ -58,11 +58,11 @@ export const ColorPickerPopup = () => {
 
         <PopoverSurface>
           <ColorPicker color={previewColor} onColorChange={handleChange}>
-            <ColorArea />
+            <ColorArea inputX={{ 'aria-label': 'Saturation' }} inputY={{ 'aria-label': 'Brightness' }} />
             <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
@@ -39,9 +39,9 @@ export const ColorPickerShape = () => {
     <div className={styles.example}>
       <h3>Rounded (default)</h3>
       <ColorPicker color={color} onColorChange={handleChange}>
-        <ColorArea />
-        <ColorSlider />
-        <AlphaSlider />
+        <ColorSlider aria-label="Hue" />
+        <AlphaSlider aria-label="Alpha" />
+        <ColorArea inputX={{ 'aria-label': 'Saturation' }} inputY={{ 'aria-label': 'Brightness' }} />
       </ColorPicker>
       <h3>Square (default)</h3>
       <ColorPicker shape="square" color={color} onColorChange={handleChange}>