feat: add `WCAG 2.2` Compliance and Accessibility Testing to `@asgardeo/react` & `@asgardeo/nextjs` UI Components

Current Limitation

The @asgardeo/react & @asgardeo/nextjs UI components lack comprehensive accessibility features and WCAG 2.2 compliance:

WCAG 2.2 Compliance Issues:

• Missing support for new WCAG 2.2 success criteria (Focus Appearance, Dragging Movements, Target Size)
• Non-compliant focus indicators and target sizes
• Lack of proper keyboard navigation patterns

Keyboard Navigation Issues:

• Organization switcher dropdown cannot be navigated with keyboard
• Modals lack proper focus management and keyboard shortcuts
• No Escape/Enter key handling

ARIA Support Gaps:

• Missing ARIA labels for interactive elements
• Dropdown menus lack aria-expanded, aria-haspopup attributes
• Modal dialogs missing aria-modal, aria-labelledby
• No screen reader announcements for organization switches

Focus Management:

• Modals don't trap focus
• Focus not restored when modals close
• Missing visual focus indicators that meet WCAG 2.2 standards

Testing:

• No automated WCAG 2.2 accessibility testing
• Missing keyboard navigation tests
• No screen reader compatibility verification

Suggested Improvement

Add comprehensive WCAG 2.2 AA accessibility support with proper testing:

Implementation Areas

1. WCAG 2.2 Compliance

• Focus Appearance (2.4.11): Enhanced focus indicators with proper contrast
• Target Size (2.5.8): Ensure interactive elements meet 24x24px minimum
• Dragging Movements (2.5.7): Provide keyboard alternatives for any drag interactions
• Fixed Reference Points (2.4.12): Consistent navigation patterns

2. ARIA Enhancements

• Add proper ARIA attributes to dropdowns and modals
• Implement live regions for dynamic announcements
• Add descriptive labels for all interactive elements

3. Keyboard Navigation

• Arrow keys for dropdown navigation
• Enter/Space for selection, Escape to close
• Focus trapping in modals with Tab/Shift+Tab
• Focus restoration when closing modals

4. Screen Reader Support

• Live announcements for organization switches
• Loading state announcements
• Error message announcements

5. Custom Accessibility Hooks

// WCAG 2.2 compliant hooks
useFocusTrap(isActive: boolean)
useFocusRestore()
useAnnouncement()
useKeyboardNavigation()
useWCAGCompliantFocus()

6. Testing with Vitest + WCAG 2.2

// WCAG 2.2 automated testing
test('meets WCAG 2.2 AA standards', async () => {
  // axe-core with WCAG 2.2 rules
});

// Focus appearance testing
test('focus indicators meet WCAG 2.2 standards', () => {
  // Focus visibility and contrast testing
});

// Target size validation
test('interactive elements meet 24x24px minimum', () => {
  // Target size compliance testing
});

Benefits

• WCAG 2.2 AA compliance for legal requirements
• Enhanced focus indicators for better visibility
• Improved target sizes for touch and motor accessibility
• Better keyboard-only navigation
• Screen reader compatibility
• Automated accessibility regression prevention

Key Files to Update

• OrganizationSwitcher components (ARIA + keyboard + WCAG 2.2)
• Modal components (focus management + target sizes)
• New accessibility hooks with WCAG 2.2 compliance
• CSS for WCAG 2.2 compliant focus indicators
• Vitest setup for axe-core with WCAG 2.2 rules
• ESLint jsx-a11y rules updated for WCAG 2.2

Please select the package issue is related to

@asgardeo/react, @asgardeo/nextjs

Version

current

Reporter Checklist

• I have searched the existing issues and this is not a duplicate.
• I have provided all the necessary information.
• I have verified the improvement is not available in the latest version of the package.