diff --git a/change/@fluentui-react-8279ee8e-b6e5-4f7f-b9e7-18a13d31e6cb.json b/change/@fluentui-react-8279ee8e-b6e5-4f7f-b9e7-18a13d31e6cb.json new file mode 100644 index 00000000000000..9e246f7da759bc --- /dev/null +++ b/change/@fluentui-react-8279ee8e-b6e5-4f7f-b9e7-18a13d31e6cb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: ContextualMenuSplitButton always sets aria-checked (does not leave it undefined) when it is checkable.", + "packageName": "@fluentui/react", + "email": "Humberto.Morimoto@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx index 32053d792f0cba..e079e4ac9a53d3 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx @@ -12,7 +12,7 @@ import { import { ContextualMenuItem } from '../ContextualMenuItem'; import { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames'; import { KeytipData } from '../../../KeytipData'; -import { isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index'; +import { getIsChecked, getMenuItemAriaRole, hasSubmenu, isItemDisabled } from '../../../utilities/contextualMenu/index'; import { VerticalDivider } from '../../../Divider'; import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper'; import type { IContextualMenuItem } from '../ContextualMenu.types'; @@ -85,6 +85,8 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper { this._ariaDescriptionId = getId(); } + const ariaChecked = getIsChecked(item) ?? undefined; + return ( {(keytipAttributes: any): JSX.Element => ( @@ -102,7 +104,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper { ariaDescription ? this._ariaDescriptionId : undefined, keytipAttributes['aria-describedby'], )} - aria-checked={item.isChecked || item.checked} + aria-checked={ariaChecked} aria-posinset={focusableElementIndex + 1} aria-setsize={totalItemCount} onMouseEnter={this._onItemMouseEnterPrimary}