diff --git a/change/@fluentui-react-button-e7f98b68-84a6-495a-81fa-cc5ac0eda06f.json b/change/@fluentui-react-button-e7f98b68-84a6-495a-81fa-cc5ac0eda06f.json new file mode 100644 index 0000000000000..0b370ccbbb793 --- /dev/null +++ b/change/@fluentui-react-button-e7f98b68-84a6-495a-81fa-cc5ac0eda06f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: medium and large SplitButton menuButton is at least 24px wide", + "packageName": "@fluentui/react-button", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts index 6b6826712ac3d..f3ebfaf3efa88 100644 --- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts @@ -10,6 +10,10 @@ export const splitButtonClassNames: SlotClassNames = { primaryActionButton: 'fui-SplitButton__primaryActionButton', }; +// WCAG minimum target size for pointer targets that are immediately adjacent to other targets: +// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum +const MIN_TARGET_SIZE = '24px'; + const useFocusStyles = makeStyles({ primaryActionButton: createCustomFocusIndicatorStyle({ borderTopRightRadius: 0, @@ -40,7 +44,7 @@ const useRootStyles = makeStyles({ borderLeftWidth: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, - minWidth: 0, + minWidth: MIN_TARGET_SIZE, }, },