fix: SplitButton menuButton is at least 24px wide (microsoft#32309)

levithomason · Aug 26, 2024 · 99348c8 · 99348c8
1 parent 6bc0d22
commit 99348c8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/change/@fluentui-react-button-e7f98b68-84a6-495a-81fa-cc5ac0eda06f.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts b/...components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
@@ -10,6 +10,10 @@ export const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {
   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,
     },
   },