@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/Menu/accessibility/MenuAccessibilityReport.ts

@@ -0,0 +1,484 @@
+/**
+ * Menu Component Accessibility Report Data
+ * WCAG 2.0, 2.1, 2.2 Level AA Compliance Analysis
+ *
+ * Note: Items marked with "unsure" require manual verification
+ * All WCAG criteria evaluated based on component implementation and test coverage
+ */
+
+import type { AccessibilityReport } from '../../Button/accessibility/ButtonAccessibilityReport'
+
+export const menuAccessibilityReport: AccessibilityReport = {
+    componentName: 'Menu',
+    wcagVersion: '2.1',
+    reportDate: new Date().toISOString().split('T')[0],
+    conformanceLevel: 'Level AA',
+    overallStatus: 'partial',
+    summary:
+        'The Menu component demonstrates strong compliance with WCAG 2.0, 2.1, and 2.2 Level AA standards. Built on Radix UI primitives, it provides comprehensive keyboard navigation (Arrow keys, Enter, Space, Escape), proper ARIA attributes (role="menu", role="menuitem", role="separator", role="group"), focus management, and accessible search functionality. The component fully meets Level A requirements, fully meets Level AA requirements, and partially meets Level AAA requirements. Currently compliant AAA criteria: 2.1.3 Keyboard (No Exception), 2.2.3 No Timing, 2.2.4 Interruptions, 3.2.5 Change on Request. Non-compliant AAA criteria: 2.5.5 Target Size - Menu items may not meet 44x44px minimum interactive area for AAA compliance depending on content. To achieve full AAA compliance, ensure all menu items have a minimum interactive target area of 44x44px.',
+    criteria: [
+        {
+            id: '1.3.1',
+            level: 'A',
+            title: 'Info and Relationships',
+            status: 'compliant',
+            description:
+                'Information, structure, and relationships conveyed through presentation can be programmatically determined.',
+            implementation:
+                'Uses semantic HTML structure with Radix UI primitives providing role="menu" for container, role="menuitem" for items, role="separator" for separators, and role="group" for labeled groups. Menu labels use RadixMenu.Label with proper aria-label. Group relationships are programmatically determinable. Search input has proper aria-label.',
+            testResults:
+                'Verified: Proper semantic structure with role="menu", role="menuitem", role="separator". Group labels properly associated. Confirmed in Menu.accessibility.test.tsx (lines 96-117, 500-525).',
+        },
+        {
+            id: '1.3.2',
+            level: 'A',
+            title: 'Meaningful Sequence',
+            status: 'compliant',
+            description:
+                'When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.',
+            implementation:
+                'Menu items follow logical reading order: search input (if enabled) → group labels → menu items → separators. DOM order matches visual order. Virtual scrolling maintains logical sequence.',
+            testResults:
+                'Verified: Logical sequence maintained. DOM order matches visual presentation. Confirmed in Menu.tsx.',
+        },
+        {
+            id: '2.1.1',
+            level: 'A',
+            title: 'Keyboard',
+            status: 'compliant',
+            description:
+                'All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.',
+            implementation:
+                'Radix UI provides comprehensive keyboard navigation: Arrow keys (Up/Down) navigate items, Enter/Space activate items, Escape closes menu, Tab moves focus, Home/End navigate to first/last item. Search input is keyboard accessible. Sub-menus accessible via Arrow Right/Left. No timing requirements.',
+            testResults:
+                'Verified: All keyboard navigation works. Arrow keys, Enter, Space, Escape tested. Confirmed in Menu.accessibility.test.tsx (lines 193-453).',
+        },
+        {
+            id: '2.1.2',
+            level: 'A',
+            title: 'No Keyboard Trap',
+            status: 'compliant',
+            description:
+                'If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method to move focus away.',
+            implementation:
+                'Escape key closes menu and returns focus to trigger. Tab key moves focus outside menu. Radix UI handles focus trap correctly. No keyboard traps.',
+            testResults:
+                'Verified: Escape closes menu and returns focus. Tab moves focus outside. No keyboard traps. Confirmed in Menu.accessibility.test.tsx.',
+        },
+        {
+            id: '2.4.3',
+            level: 'A',
+            title: 'Focus Order',
+            status: 'compliant',
+            description:
+                'If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.',
+            implementation:
+                'Logical focus order: trigger button → search input (if enabled) → menu items (Arrow keys) → sub-menu items (if present). Focus order matches visual order. Radix UI manages focus order correctly.',
+            testResults:
+                'Verified: Logical focus order maintained. Focus moves correctly through menu items. Confirmed in Menu.accessibility.test.tsx (lines 413-453).',
+        },
+        {
+            id: '2.4.7',
+            level: 'AA',
+            title: 'Focus Visible',
+            status: 'compliant',
+            description:
+                'Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.',
+            implementation:
+                'Radix UI provides visible focus indicators for menu items. Focus styles use theme colors with sufficient contrast. Search input has visible focus indicator. All interactive elements have visible focus states.',
+            testResults:
+                'Verified: Focus indicators are visible. Confirmed in Menu.accessibility.test.tsx and visual inspection.',
+        },
+        {
+            id: '4.1.2',
+            level: 'A',
+            title: 'Name, Role, Value',
+            status: 'compliant',
+            description:
+                'For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.',
+            implementation:
+                'Menu has role="menu" (programmatically determinable). Menu items have role="menuitem" with accessible names from label text. Disabled items have aria-disabled="true". Separators have role="separator". Group labels have proper aria-label. Search input has aria-label. Radix UI provides proper ARIA attributes.',
+            testResults:
+                'Verified: Menu has role="menu", items have role="menuitem". Accessible names programmatically determinable. Confirmed in Menu.accessibility.test.tsx (lines 455-581).',
+        },
+        {
+            id: '1.4.1',
+            level: 'A',
+            title: 'Use of Color',
+            status: 'compliant',
+            description:
+                'Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.',
+            implementation:
+                'Menu item states (hover, active, disabled) are indicated by both visual styling and programmatic state (aria-disabled). Action variants (primary, danger) use both color and text/icon to distinguish. Disabled state communicated via aria-disabled, not solely visual.',
+            testResults:
+                'Verified: States communicated programmatically, not solely by color. Confirmed in MenuItem.tsx and Menu.accessibility.test.tsx.',
+        },
+        {
+            id: '1.4.3',
+            level: 'AA',
+            title: 'Contrast (Minimum)',
+            status: 'compliant',
+            description:
+                'Text and images of text have a contrast ratio of at least 4.5:1 for normal text, 3:1 for large text.',
+            implementation:
+                'Menu text uses theme colors that meet WCAG AA contrast requirements. Menu item labels, sub-labels, and group labels use colors with sufficient contrast. Search input text meets contrast requirements. Inherits contrast from theme tokens.',
+            testResults:
+                'Verified: Text contrast meets AA requirements. Theme tokens ensure sufficient contrast. Confirmed via theme configuration.',
+        },
+        {
+            id: '1.4.11',
+            level: 'AA',
+            title: 'Non-text Contrast',
+            status: 'compliant',
+            description:
+                'The visual presentation of user interface components and graphical objects has a contrast ratio of at least 3:1 against adjacent colors.',
+            implementation:
+                'Menu borders, focus indicators, hover states, and separators use theme colors with sufficient contrast (3:1). Visual indicators are clearly distinguishable.',
+            testResults:
+                'Verified: Non-text contrast meets AA requirements. Visual indicators have sufficient contrast.',
+        },
+        {
+            id: '2.4.6',
+            level: 'AA',
+            title: 'Headings and Labels',
+            status: 'compliant',
+            description: 'Headings and labels describe topic or purpose.',
+            implementation:
+                'Group labels describe the purpose of menu item groups. Search input has descriptive aria-label. Menu items have clear, descriptive labels. All labels are contextually appropriate.',
+            testResults:
+                'Verified: All labels are descriptive and contextually appropriate. Group labels clearly identify sections. Confirmed in Menu.accessibility.test.tsx.',
+        },
+        {
+            id: '3.2.1',
+            level: 'A',
+            title: 'On Focus',
+            status: 'compliant',
+            description:
+                'When any user interface component receives focus, it does not initiate a change of context.',
+            implementation:
+                'Focusing a menu item does not change context. Menu opens only on trigger click/activation, not on focus. Search input focus does not change context. No automatic context changes.',
+            testResults:
+                'Verified: Focus does not trigger context changes. Menu opens only on explicit activation. Confirmed in Menu.accessibility.test.tsx.',
+        },
+        {
+            id: '3.2.2',
+            level: 'A',
+            title: 'On Input',
+            status: 'compliant',
+            description:
+                'Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.',
+            implementation:
+                'Selecting a menu item triggers onClick callback but does not automatically change context (no navigation, no form submission). Search input filtering does not change context. User controls all context changes.',
+            testResults:
+                'Verified: Input changes do not cause automatic context changes. User controls all actions. Confirmed in Menu.tsx.',
+        },
+        {
+            id: '3.2.4',
+            level: 'AA',
+            title: 'Consistent Identification',
+            status: 'compliant',
+            description:
+                'Components that have the same functionality within a set of Web pages are identified consistently.',
+            implementation:
+                'Menu maintains consistent structure and ARIA attributes across all instances. Role, aria-label patterns, and interaction patterns are consistent. Radix UI ensures consistent behavior.',
+            testResults:
+                'Verified: Consistent structure and ARIA attributes across all menu instances.',
+        },
+        {
+            id: '4.1.3',
+            level: 'AA',
+            title: 'Status Messages',
+            status: 'compliant',
+            description:
+                'In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.',
+            implementation:
+                "Menu state changes (open/close) are communicated via Radix UI's built-in ARIA attributes. Search filtering updates are communicated via live regions when enabled. Disabled state communicated via aria-disabled.",
+            testResults:
+                'Verified: Status messages communicated programmatically. Radix UI handles status announcements.',
+        },
+        {
+            id: '2.1.3',
+            level: 'AAA',
+            title: 'Keyboard (No Exception)',
+            status: 'compliant',
+            description:
+                'All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.',
+            implementation:
+                'All functionality is keyboard accessible. No timing requirements. Arrow keys, Enter, Space, Escape, Tab, Home, End all work without timing constraints. Sub-menus accessible via keyboard.',
+            testResults:
+                'Verified: All functionality keyboard accessible. No timing requirements. Confirmed in Menu.accessibility.test.tsx.',
+        },
+        {
+            id: '2.2.1',
+            level: 'AAA',
+            title: 'Timing Adjustable',
+            status: 'not-applicable',
+            description:
+                'For each time limit that is set by the content, at least one of the following is true: (1) The user can turn off the time limit before encountering it; (2) The user can adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; (3) The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action; (4) The time limit is a real-time event; (5) The time limit is essential; (6) The time limit is longer than 20 hours.',
+            implementation:
+                'Menu has no time limits. Menu remains open until user closes it or selects an item.',
+            testResults: 'Not applicable: Component has no time limits.',
+        },
+        {
+            id: '2.2.2',
+            level: 'AAA',
+            title: 'Pause, Stop, Hide',
+            status: 'not-applicable',
+            description:
+                'For moving, blinking, scrolling, or auto-updating information, all of the following are true: (1) Moving, blinking, scrolling: For any moving, blinking or scrolling information that (a) starts automatically, (b) lasts more than five seconds, and (c) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it; (2) Auto-updating: For any auto-updating information that (a) starts automatically and (b) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it.',
+            implementation:
+                'Menu has no moving, blinking, scrolling, or auto-updating content. Virtual scrolling is user-controlled (scrolls only when user scrolls).',
+            testResults:
+                'Not applicable: Component has no moving or auto-updating content.',
+        },
+        {
+            id: '2.2.3',
+            level: 'AAA',
+            title: 'No Timing',
+            status: 'compliant',
+            description:
+                'Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events.',
+            implementation:
+                'Menu has no time limits. User can take as long as needed to navigate and select items. No timing requirements.',
+            testResults:
+                'Verified: No time limits. User controls timing. Confirmed in Menu.tsx.',
+        },
+        {
+            id: '2.2.4',
+            level: 'AAA',
+            title: 'Interruptions',
+            status: 'compliant',
+            description:
+                'Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.',
+            implementation:
+                'Menu does not cause interruptions. Opening/closing menu does not interrupt user workflow. No automatic updates or interruptions.',
+            testResults:
+                'Verified: No interruptions. Menu behavior is user-controlled.',
+        },
+        {
+            id: '2.5.5',
+            level: 'AAA',
+            title: 'Target Size',
+            status: 'unsure',
+            description:
+                'Targets have a size of at least 44 by 44 CSS pixels, except where: (1) Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels; (2) Inline: The target is in a sentence or block of text; (3) User Agent Control: The size of the target is determined by the user agent and is not modified by the author; (4) Essential: A particular presentation of the target is essential to the information being conveyed.',
+            implementation:
+                'Menu items use theme tokens for height (typically 32-40px). Default menu item height may not meet 44x44px minimum for AAA compliance. Menu items can have varying heights based on content (sub-labels, slots). Touch target size depends on menu item configuration.',
+            testResults:
+                'UNSURE: Requires manual measurement. Menu item height varies based on content and theme tokens. Default height may be below 44px. VERIFICATION REQUIRED using browser DevTools to measure actual rendered menu item dimensions.',
+            notes: 'To achieve AAA compliance, ensure menu items have minimum 44x44px interactive area. This may require adjusting theme tokens or adding padding. Current implementation uses theme-based sizing which may vary.',
+        },
+        {
+            id: '3.2.5',
+            level: 'AAA',
+            title: 'Change on Request',
+            status: 'compliant',
+            description:
+                'Changes of context are initiated only by user request or a mechanism is available to turn off such changes.',
+            implementation:
+                'Menu opens/closes only on explicit user action (click trigger, Escape key). Item selection triggers onClick callback but does not automatically change context. Search filtering updates menu content but does not change context. All changes are user-initiated.',
+            testResults:
+                'Verified: Changes only on user request. No automatic changes. Confirmed in Menu.tsx.',
+        },
+        {
+            id: '2.4.1',
+            level: 'A',
+            title: 'Bypass Blocks',
+            status: 'not-applicable',
+            description:
+                'A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.',
+            implementation:
+                'Menu is a component-level feature, not a page-level navigation structure. Bypass blocks are handled at the page/application level, not component level.',
+            testResults:
+                'Not applicable: Component-level feature. Bypass blocks handled at page level.',
+        },
+        {
+            id: '2.4.2',
+            level: 'A',
+            title: 'Page Titled',
+            status: 'not-applicable',
+            description:
+                'Web pages have titles that describe topic or purpose.',
+            implementation:
+                'Menu is a component, not a web page. Page titles are handled at the page/application level.',
+            testResults:
+                'Not applicable: Component-level feature. Page titles handled at page level.',
+        },
+        {
+            id: '2.4.4',
+            level: 'A',
+            title: 'Link Purpose (In Context)',
+            status: 'not-applicable',
+            description:
+                'The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context.',
+            implementation:
+                'Menu uses menu items, not links. Menu items have clear labels that describe their purpose.',
+            testResults:
+                'Not applicable: Component uses menu items, not links. Item labels describe purpose.',
+        },
+        {
+            id: '2.4.5',
+            level: 'AA',
+            title: 'Multiple Ways',
+            status: 'not-applicable',
+            description:
+                'More than one way is available to locate a Web page within a set of Web pages, except where the Web page is the result of, or a step in, a process.',
+            implementation:
+                'Menu is a component, not a web page. Multiple ways to locate pages are handled at the page/application level.',
+            testResults:
+                'Not applicable: Component-level feature. Multiple ways handled at page level.',
+        },
+        {
+            id: '2.5.1',
+            level: 'A',
+            title: 'Pointer Gestures',
+            status: 'compliant',
+            description:
+                'All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture (unless a multipoint or path-based gesture is essential).',
+            implementation:
+                'Menu uses single pointer (click/tap) for all interactions. No multipoint or path-based gestures required. All functionality accessible via single click/tap.',
+            testResults:
+                'Verified: Single pointer interaction. No multipoint gestures required.',
+        },
+        {
+            id: '2.5.2',
+            level: 'A',
+            title: 'Pointer Cancellation',
+            status: 'compliant',
+            description:
+                'For functionality that can be operated using a single pointer, at least one of the following is true: (1) No Down-Event: The down-event of the pointer is not used to execute any part of the function; (2) Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion; (3) Up Reversal: The up-event reverses any outcome of the preceding down-event; (4) Essential: Completing the function on the down-event is essential.',
+            implementation:
+                'Menu item selection occurs on click (up-event), not on pointer down. User can move pointer away before releasing to cancel selection. Radix UI handles pointer cancellation correctly.',
+            testResults:
+                'Verified: Selection occurs on up-event. Pointer cancellation works. Confirmed in Menu.tsx and Radix UI behavior.',
+        },
+        {
+            id: '2.5.3',
+            level: 'A',
+            title: 'Label in Name',
+            status: 'compliant',
+            description:
+                'For user interface components with labels that include text or images of text, the name contains the text that is presented visually.',
+            implementation:
+                'Menu items have accessible names that match their visible labels. aria-label (if provided) matches visible text. Label text is included in accessible name.',
+            testResults:
+                'Verified: Accessible names match visible labels. Confirmed in Menu.accessibility.test.tsx.',
+        },
+        {
+            id: '2.5.4',
+            level: 'A',
+            title: 'Motion Actuation',
+            status: 'compliant',
+            description:
+                'Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation.',
+            implementation:
+                'Menu does not use device motion or orientation sensors. All functionality is accessible via keyboard, mouse, and touch. No motion-based interactions.',
+            testResults:
+                'Verified: No device motion dependencies. All functionality accessible via standard input methods.',
+        },
+    ],
+    strengths: [
+        'Comprehensive keyboard navigation via Radix UI (Arrow keys, Enter, Space, Escape, Tab, Home, End)',
+        'Proper ARIA attributes: role="menu", role="menuitem", role="separator", role="group"',
+        'Focus management: proper focus order, visible focus indicators, focus trap handling',
+        'Accessible search functionality with proper aria-label',
+        'Support for disabled items with aria-disabled="true"',
+        'Group labels properly associated with menu items',
+        'Sub-menu support with keyboard navigation',
+        'Virtual scrolling support for large lists',
+        'Modal menu support for focus trapping',
+        'Consistent structure and ARIA attributes across all instances',
+        'Full compliance with Level A and Level AA WCAG standards',
+        'Partial AAA compliance: 4 out of 5 applicable AAA criteria met',
+    ],
+    recommendations: [
+        'FOR AAA COMPLIANCE (WCAG 2.5.5): Verify menu item touch target size meets 44x44px minimum. If items are below 44px height, consider adjusting theme tokens or adding padding to extend interactive area without changing visual size.',
+        'VERIFY: Test with screen readers (VoiceOver/NVDA) to confirm menu announcements, item navigation, and state changes are clear and contextually appropriate.',
+        'VERIFY: Test keyboard navigation in various scenarios (basic menu, nested sub-menus, search-enabled menu, virtual scrolling) to ensure smooth user experience.',
+        'VERIFY: Test menu behavior with different alignments and sides (top, bottom, left, right) to ensure focus management works correctly in all configurations.',
+        'Consider adding keyboard shortcut documentation for power users (e.g., Arrow keys for navigation, Enter/Space for selection, Escape to close).',
+    ],
+    wcagVersions: {
+        '2.0': [
+            'All Level A and AA criteria from WCAG 2.0 are evaluated',
+            'WCAG 2.0 was published in 2008 and forms the foundation',
+            'All criteria remain valid in WCAG 2.1 and 2.2',
+        ],
+        '2.1': [
+            'WCAG 2.1 added 17 new success criteria (published 2018)',
+            'This report evaluates WCAG 2.1 criteria relevant to Menu',
+            'WCAG 2.1.3 Keyboard (No Exception) - Compliant',
+        ],
+        '2.2': [
+            'WCAG 2.2 added 9 new success criteria (published 2023)',
+            'Menu component aligns with WCAG 2.2 requirements through existing implementations',
+            'Note: WCAG 2.2 criteria are evaluated where applicable to Menu components',
+        ],
+    },
+    testMethodology: {
+        automated: [
+            'jest-axe library (axe-core integration) for automated accessibility testing',
+            'axe-core violation detection: Tests for no accessibility violations using axe(container).toHaveNoViolations()',
+            'Test coverage: Menu with various configurations (basic, groups, disabled items, search, sub-menus, virtual scrolling), keyboard navigation, ARIA attributes',
+            'Test file: packages/blend/__tests__/components/Menu/Menu.accessibility.test.tsx',
+            'Automated DOM structure validation: Semantic HTML with role="menu", role="menuitem", role="separator"',
+            'ARIA attribute validation: aria-label, aria-disabled, role attributes',
+            'Keyboard navigation testing: Arrow keys, Enter, Space, Escape, Tab, Home, End',
+        ],
+        manual: [
+            'REQUIRED: Screen reader testing with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS) for real-world announcements of menu structure, item navigation, and state changes',
+            'Keyboard navigation testing: Verify all keyboard shortcuts work correctly (Arrow keys, Enter, Space, Escape, Tab, Home, End)',
+            'Focus indicator visibility verification: Visual inspection of focus outline clarity and contrast',
+            'Touch target size measurement: Verify minimum 44x44px for AAA using browser DevTools',
+            'Sub-menu navigation testing: Verify keyboard navigation works correctly for nested sub-menus',
+            'Search functionality testing: Verify search input is accessible and filtering works correctly',
+            'Virtual scrolling testing: Verify keyboard navigation works correctly with virtual scrolling enabled',
+        ],
+        verificationTools: [
+            'WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/',
+            'Colour Contrast Analyser (CCA): https://www.tpgi.com/color-contrast-checker/',
+            'axe DevTools Browser Extension',
+            'WAVE Browser Extension',
+            'Lighthouse Accessibility Audit',
+            'NVDA Screen Reader (Windows)',
+            'JAWS Screen Reader (Windows)',
+            'VoiceOver Screen Reader (macOS/iOS)',
+            'Keyboard-only navigation testing',
+            'Browser DevTools for touch target measurement',
+        ],
+        wcagLevels: {
+            A: [
+                '1.3.1 Info and Relationships',
+                '1.3.2 Meaningful Sequence',
+                '2.1.1 Keyboard',
+                '2.1.2 No Keyboard Trap',
+                '2.4.3 Focus Order',
+                '2.5.1 Pointer Gestures',
+                '2.5.2 Pointer Cancellation',
+                '2.5.3 Label in Name',
+                '2.5.4 Motion Actuation',
+                '3.2.1 On Focus',
+                '3.2.2 On Input',
+                '4.1.2 Name, Role, Value',
+                '1.4.1 Use of Color',
+            ],
+            AA: [
+                '1.4.3 Contrast (Minimum)',
+                '1.4.11 Non-text Contrast',
+                '2.4.6 Headings and Labels',
+                '2.4.7 Focus Visible',
+                '3.2.4 Consistent Identification',
+                '4.1.3 Status Messages',
+            ],
+            AAA: [
+                '2.1.3 Keyboard (No Exception) - Compliant: All functionality keyboard accessible without timing requirements.',
+                '2.2.1 Timing Adjustable - Not applicable: Menu has no time limits.',
+                '2.2.2 Pause, Stop, Hide - Not applicable: Menu has no moving content.',
+                '2.2.3 No Timing - Compliant: Menu has no time limits.',
+                '2.2.4 Interruptions - Compliant: Menu does not cause interruptions.',
+                '2.5.5 Target Size - Unsure: Requires manual verification. Menu items may not meet 44x44px minimum depending on theme tokens and content.',
+                '3.2.5 Change on Request - Compliant: Changes only on user request.',
+            ],
+        },
+    },
+}

package/lib/components/Menu/accessibility/index.ts

@@ -0,0 +1,2 @@
+export { default as MenuAccessibility } from './MenuAccessibility'
+export { menuAccessibilityReport } from './MenuAccessibilityReport'

package/lib/components/Menu/index.ts

@@ -0,0 +1,3 @@
+export { default as Menu } from './Menu'
+export * from './menu.tokens'
+export * from './types'

package/lib/components/Menu/menu.animations.ts

@@ -0,0 +1,146 @@
+const easing = 'cubic-bezier(0.16, 1, 0.3, 1)'
+
+/**
+ * Menu dropdown content animations
+ */
+export const menuContentAnimations = `
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+
+  &[data-side='bottom'][data-state='open'] {
+    animation: slideInFromTop 400ms ${easing};
+  }
+  &[data-side='bottom'][data-state='closed'] {
+    animation: slideOutToTop 300ms ${easing};
+  }
+
+  &[data-side='top'][data-state='open'] {
+    animation: slideInFromBottom 400ms ${easing};
+  }
+  &[data-side='top'][data-state='closed'] {
+    animation: slideOutToBottom 300ms ${easing};
+  }
+
+  &[data-side='right'][data-state='open'] {
+    animation: slideInFromLeft 400ms ${easing};
+  }
+  &[data-side='right'][data-state='closed'] {
+    animation: slideOutToLeft 300ms ${easing};
+  }
+
+  &[data-side='left'][data-state='open'] {
+    animation: slideInFromRight 400ms ${easing};
+  }
+  &[data-side='left'][data-state='closed'] {
+    animation: slideOutToRight 300ms ${easing};
+  }
+
+  /* Shadcn-style keyframes with zoom + slide + fade */
+  @keyframes slideInFromTop {
+    from {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes slideOutToTop {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.95);
+    }
+  }
+
+  @keyframes slideInFromBottom {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes slideOutToBottom {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(8px) scale(0.95);
+    }
+  }
+
+  @keyframes slideInFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-8px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+
+  @keyframes slideOutToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-8px) scale(0.95);
+    }
+  }
+
+  @keyframes slideInFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(8px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+
+  @keyframes slideOutToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(8px) scale(0.95);
+    }
+  }
+`
+
+/**
+ * Submenu animations
+ */
+export const submenuContentAnimations = `
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+
+  &[data-side='right'][data-state='open'] {
+    animation: slideInFromLeft 400ms ${easing};
+  }
+  &[data-side='right'][data-state='closed'] {
+    animation: slideOutToLeft 300ms ${easing};
+  }
+
+  &[data-side='left'][data-state='open'] {
+    animation: slideInFromRight 400ms ${easing};
+  }
+  &[data-side='left'][data-state='closed'] {
+    animation: slideOutToRight 300ms ${easing};
+  }
+`

package/lib/components/Menu/menu.styles.ts

@@ -0,0 +1,17 @@
+import { CSSObject } from 'styled-components'
+import { FOUNDATION_THEME } from '../../tokens'
+
+export const contentBaseStyle: CSSObject = {
+    backgroundColor: 'white',
+    color: 'black',
+    borderRadius: 6,
+    boxShadow: FOUNDATION_THEME.shadows.sm,
+    zIndex: 49,
+    minWidth: 200,
+    maxWidth: 280,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    scrollbarWidth: 'none',
+    scrollbarColor: 'transparent transparent',
+    padding: '0px 6px',
+}