From 99348c848e4729e8794581ed8499bb350cd54732 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Mon, 26 Aug 2024 10:23:43 -0700 Subject: [PATCH] fix: SplitButton menuButton is at least 24px wide (#32309) --- ...-react-button-e7f98b68-84a6-495a-81fa-cc5ac0eda06f.json | 7 +++++++ .../components/SplitButton/useSplitButtonStyles.styles.ts | 6 +++++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 change/@fluentui-react-button-e7f98b68-84a6-495a-81fa-cc5ac0eda06f.json 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 00000000000000..0b370ccbbb793a --- /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 6b6826712ac3d3..f3ebfaf3efa880 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, }, },