resolve comments and update screenshots

src/__stories__/menu-story.tsx

@@ -27,15 +27,6 @@ type MenuArgs = {
     checkbox: boolean;
 };
 
-const getMenuItemControlProps = (withCheckbox: boolean, checked: boolean) => {
-    return withCheckbox
-        ? {
-              controlType: 'checkbox' as const,
-              checked,
-          }
-        : {};
-};
-
 export const Default: StoryComponent<MenuArgs> = ({
     menuOptionsCount,
     horizontalPosition,
@@ -100,10 +91,10 @@ export const Default: StoryComponent<MenuArgs> = ({
                                                     alert({title: value, message: 'pressed'});
                                                 }
                                             }}
-                                            {...getMenuItemControlProps(
-                                                checkbox,
-                                                valuesState.includes(`Option ${optionIndex + 1}`)
-                                            )}
+                                            {...(checkbox && {
+                                                controlType: 'checkbox' as const,
+                                                checked: valuesState.includes(`Option ${optionIndex + 1}`),
+                                            })}
                                             Icon={icon ? IconLightningRegular : undefined}
                                         />
                                     ))}

src/menu.tsx

@@ -17,6 +17,7 @@ import Checkbox from './checkbox';
 import {CSSTransition} from 'react-transition-group';
 import {combineRefs} from './utils/common';
 
+import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, IconProps} from './utils/types';
 
 const MENU_TRANSITION_DURATION_IN_MS = 120;
@@ -27,21 +28,22 @@ type MenuContextType = {
     setFocusedValue: (value: string | null) => void;
     closeMenu: () => void;
 };
+
 const MenuContext = React.createContext<MenuContextType>({
     focusedValue: null,
     isMenuOpen: false,
     setFocusedValue: () => {},
     closeMenu: () => {},
 });
-export const useMenuContext = (): MenuContextType => React.useContext(MenuContext);
+
+const useMenuContext = (): MenuContextType => React.useContext(MenuContext);
 
 interface MenuItemBaseProps {
     label: string;
     Icon?: React.FC<IconProps>;
     destructive?: boolean;
     disabled?: boolean;
     'aria-label'?: string;
-    children?: undefined;
     onPress: (label: string) => void;
 }
 
@@ -51,18 +53,17 @@ interface MenuItemWithoutControlProps extends MenuItemBaseProps {
 }
 
 interface MenuItemWithControlProps extends MenuItemBaseProps {
-    controlType: 'checkbox';
+    controlType?: 'checkbox';
     checked?: boolean;
 }
 
-type MenuItemProps = MenuItemWithControlProps | MenuItemWithoutControlProps;
+type MenuItemProps = ExclusifyUnion<MenuItemWithControlProps | MenuItemWithoutControlProps>;
 
 export const MenuItem: React.FC<MenuItemProps> = ({
     label,
     Icon,
     destructive,
     disabled,
-    'aria-label': ariaLabel,
     onPress,
     controlType,
     checked,
@@ -83,7 +84,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                 }}
                 disabled={disabled}
                 role="menuitemcheckbox"
-                aria-label={ariaLabel ?? label}
+                aria-label={label}
                 render={({controlElement}) => (
                     <Box paddingX={8} paddingY={12}>
                         <Inline space="between" alignItems="center">

src/overlay.tsx

@@ -51,7 +51,6 @@ const Overlay: React.FC<Props> = ({
             className={className}
             onPointerDown={(e) => {
                 // We use listen to and cancel pointerdown to close overlay if user scrolls on iOS.
-                // In Android with children we hide children and onPress later in onClick to ensure click event doesn't hit element below overlay.
                 if ((e.target as any).dataset.overlay && onPress) {
                     if (children && isAndroid(platformOverrides) && isChrome(platformOverrides)) {
                         e.stopPropagation();

src/touchable.tsx

@@ -120,7 +120,7 @@ const RawTouchable = React.forwardRef<TouchableElement, Props>((props, ref) => {
         style: props.style,
         role: props.role,
         'aria-checked': props['aria-checked'],
-        'aria-disabled': props.disabled,
+        'aria-disabled': props.disabled ? true : undefined,
         'aria-controls': props['aria-controls'],
         'aria-expanded': props['aria-expanded'],
         'aria-hidden': props['aria-hidden'],