diff --git a/change/@fluentui-react-button-9d0e8c6a-5acc-4b52-a96f-57d04ac83672.json b/change/@fluentui-react-button-9d0e8c6a-5acc-4b52-a96f-57d04ac83672.json new file mode 100644 index 0000000000000..978bebf4f8ad5 --- /dev/null +++ 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": "sarah.higley@microsoft.com", + "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 index 5b5ef4b5b1fbd..d1a6118eb8a0a 100644 --- 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