asgardeo / asgardeo/javascript

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

Aperta
#143 11 commenti 0 reazioni 0 assegnatari Vedi su GitHub
@asgardeo/nextjs @asgardeo/react accessibility Complexity/Low good first issue Type/Improvement
Lingua principale
TypeScript
Stelle
18
Fork
67
Merge medio
4h 6m
PR unite (30g)
13

Descrizione

### 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
```tsx
// WCAG 2.2 compliant hooks
useFocusTrap(isActive: boolean)
useFocusRestore()
useAnnouncement()
useKeyboardNavigation()
useWCAGCompliantFocus()
```

### 6. Testing with Vitest + WCAG 2.2
```tsx
// 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

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia individuando i componenti OrganizationSwitcher e Modal nei package @asgardeo/react e @asgardeo/nextjs, quindi esamina la configurazione di Vitest e i test di accessibilità esistenti. Definisci l’ambito WCAG 2.2 AA per i requisiti elencati relativi a tastiera, ARIA, focus, dimensioni dei target e annunci, e considera concluso il lavoro quando i test automatizzati coprono i componenti concordati e le interazioni elencate superano queste verifiche.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
next.js, react, typescript
Ambito
accessibility, frontend, testing
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.