fix: MenuButton is styled correctly when aria-expanded is a string (m…

…icrosoft#31809)
mltejera · Jun 25, 2024 · 3fe95fd · 3fe95fd
1 parent 1e1398c
commit 3fe95fd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/change/@fluentui-react-button-9d0e8c6a-5acc-4b52-a96f-57d04ac83672.json b/change/@fluentui-react-button-9d0e8c6a-5acc-4b52-a96f-57d04ac83672.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: MenuButton is styled correctly when aria-expanded is a string",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButton.tsx b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButton.tsx
@@ -14,7 +14,10 @@ export const useMenuButton_unstable = (
   'use no memo';
 
   const buttonState = useButton_unstable(props, ref);
-  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;
+  // force aria-expanded to be a boolean, not a string
+  buttonState.root['aria-expanded'] = props['aria-expanded']
+    ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true
+    : false;
 
   return {
     // Button state