Merge branch 'master' into users/srmukher/zero_to_y

microsoft · Jan 8, 2025 · 199f867 · 199f867
2 parents 43263f2 + b52d6ba
commit 199f867
Show file tree

Hide file tree

Showing 42 changed files with 391 additions and 64 deletions.
diff --git a/change/@fluentui-react-94a6046f-d21a-4386-9830-79921b5d4337.json b/change/@fluentui-react-94a6046f-d21a-4386-9830-79921b5d4337.json
diff --git a/change/@fluentui-react-color-picker-preview-cf2c2f44-2d77-4ead-b123-c81b1da98292.json b/change/@fluentui-react-color-picker-preview-cf2c2f44-2d77-4ead-b123-c81b1da98292.json
@@ -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"
+}
diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Wed, 08 Jan 2025 07:21:37 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.118",
+      "version": "8.6.118",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.122.5",
+            "commit": "8f763922d713d9ccd35e65db07206c10b170fafd"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 03 Jan 2025 07:21:32 GMT",
       "tag": "@fluentui/azure-themes_v8.6.117",

diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Fri, 03 Jan 2025 07:21:32 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Jan 2025 07:21:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.6.118](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.118)
+
+Wed, 08 Jan 2025 07:21:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.117..@fluentui/azure-themes_v8.6.118)
+
+### Patches
+
+- Bump @fluentui/react to v8.122.5 ([PR #33578](https://github.com/microsoft/fluentui/pull/33578) by beachball)
+
 ## [8.6.117](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.117)
 
 Fri, 03 Jan 2025 07:21:32 GMT 

diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.6.117",
+  "version": "8.6.118",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,7 +27,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.122.4",
+    "@fluentui/react": "^8.122.5",
     "@fluentui/set-version": "^8.2.23",
     "tslib": "^2.1.0"
   }

diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Wed, 08 Jan 2025 07:21:37 GMT",
+      "tag": "@fluentui/react-charting_v5.23.39",
+      "version": "5.23.39",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/theme-samples to v8.7.194",
+            "commit": "8f763922d713d9ccd35e65db07206c10b170fafd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react to v8.122.5",
+            "commit": "8f763922d713d9ccd35e65db07206c10b170fafd"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 06 Jan 2025 07:16:33 GMT",
       "tag": "@fluentui/react-charting_v5.23.38",

diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Mon, 06 Jan 2025 07:16:33 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Jan 2025 07:21:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.39)
+
+Wed, 08 Jan 2025 07:21:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.38..@fluentui/react-charting_v5.23.39)
+
+### Patches
+
+- Bump @fluentui/theme-samples to v8.7.194 ([PR #33578](https://github.com/microsoft/fluentui/pull/33578) by beachball)
+- Bump @fluentui/react to v8.122.5 ([PR #33578](https://github.com/microsoft/fluentui/pull/33578) by beachball)
+
 ## [5.23.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.38)
 
 Mon, 06 Jan 2025 07:16:33 GMT 

diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.38",
+  "version": "5.23.39",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@fluentui/react-focus": "^8.9.20",
-    "@fluentui/theme-samples": "^8.7.193",
+    "@fluentui/theme-samples": "^8.7.194",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "^3.0.0",
     "@types/d3-axis": "^3.0.0",
@@ -66,7 +66,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.122.4",
+    "@fluentui/react": "^8.122.5",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0",

diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/cra-template",
-  "version": "8.4.194",
+  "version": "8.4.195",
   "description": "Create React App template for Fluent UI React (@fluentui/react)",
   "repository": {
     "type": "git",

diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/fluent2-theme",
   "entries": [
+    {
+      "date": "Wed, 08 Jan 2025 07:21:37 GMT",
+      "tag": "@fluentui/fluent2-theme_v8.107.122",
+      "version": "8.107.122",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/fluent2-theme",
+            "comment": "Bump @fluentui/react to v8.122.5",
+            "commit": "8f763922d713d9ccd35e65db07206c10b170fafd"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 03 Jan 2025 07:21:32 GMT",
       "tag": "@fluentui/fluent2-theme_v8.107.121",

diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/fluent2-theme
 
-This log was last generated on Fri, 03 Jan 2025 07:21:32 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Jan 2025 07:21:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.107.122](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.122)
+
+Wed, 08 Jan 2025 07:21:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.121..@fluentui/fluent2-theme_v8.107.122)
+
+### Patches
+
+- Bump @fluentui/react to v8.122.5 ([PR #33578](https://github.com/microsoft/fluentui/pull/33578) by beachball)
+
 ## [8.107.121](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.121)
 
 Fri, 03 Jan 2025 07:21:32 GMT 

diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/fluent2-theme",
-  "version": "8.107.121",
+  "version": "8.107.122",
   "description": "A Fluent2 theme for Fluent UI React 8.x",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,7 +27,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.122.4",
+    "@fluentui/react": "^8.122.5",
     "@fluentui/set-version": "^8.2.23",
     "tslib": "^2.1.0"
   }

diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-cards",
   "entries": [
+    {
+      "date": "Wed, 08 Jan 2025 07:21:37 GMT",
+      "tag": "@fluentui/react-cards_v0.205.194",
+      "version": "0.205.194",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-cards",
+            "comment": "Bump @fluentui/react to v8.122.5",
+            "commit": "8f763922d713d9ccd35e65db07206c10b170fafd"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 03 Jan 2025 07:21:32 GMT",
       "tag": "@fluentui/react-cards_v0.205.193",

diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-cards
 
-This log was last generated on Fri, 03 Jan 2025 07:21:32 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Jan 2025 07:21:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.205.194](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.194)
+
+Wed, 08 Jan 2025 07:21:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.193..@fluentui/react-cards_v0.205.194)
+
+### Patches
+
+- Bump @fluentui/react to v8.122.5 ([PR #33578](https://github.com/microsoft/fluentui/pull/33578) by beachball)
+
 ## [0.205.193](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.193)
 
 Fri, 03 Jan 2025 07:21:32 GMT 

diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-cards",
-  "version": "0.205.193",
+  "version": "0.205.194",
   "description": "Deprecated experimental Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.122.4",
+    "@fluentui/react": "^8.122.5",
     "@fluentui/foundation-legacy": "^8.4.23",
     "@fluentui/set-version": "^8.2.23",
     "@microsoft/load-themed-styles": "^1.10.26",

diff --git a/...onents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx b/...onents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx
@@ -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"
           />

diff --git a/...omponents/react-color-picker-preview/library/src/components/ColorSlider/useColorSlider.ts b/...omponents/react-color-picker-preview/library/src/components/ColorSlider/useColorSlider.ts
@@ -87,7 +87,10 @@ export const useColorSlider_unstable = (
       thumb: 'div',
     },
     root: slot.always(root, {
-      defaultProps: nativeProps.root,
+      defaultProps: {
+        role: 'group',
+        ...nativeProps.root,
+      },
       elementType: 'div',
     }),
     input: slot.always(input, {
@@ -96,6 +99,8 @@ export const useColorSlider_unstable = (
         ref,
         min: MIN,
         max: MAX,
+        tabIndex: 0,
+        ['aria-orientation']: vertical ? 'vertical' : 'horizontal',
         ...nativeProps.primary,
         type: 'range',
       },

diff --git a/...ponents/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx b/...ponents/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
@@ -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>

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
@@ -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>