asgardeo / asgardeo/javascript

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

Offen
#143 11 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
@asgardeo/nextjs @asgardeo/react accessibility Complexity/Low good first issue Type/Improvement
Vorherrschende Sprache
TypeScript
Sterne
18
Forks
67
Ø Merge
4 Std. 6 Min.
Gemergte PRs (30 T.)
13

Beschreibung

### 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die Komponenten OrganizationSwitcher und Modal in den Paketen @asgardeo/react und @asgardeo/nextjs zu lokalisieren, und untersuche anschließend die Vitest-Konfiguration und die vorhandenen Accessibility-Tests. Lege den Umfang für WCAG 2.2 AA anhand der aufgeführten Anforderungen an Tastatur, ARIA, Fokus, Zielgröße und Ankündigungen fest, und betrachte die Arbeit als abgeschlossen, wenn automatisierte Tests die vereinbarten Komponenten abdecken und die aufgeführten Interaktionen diese Prüfungen erfüllen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
next.js, react, typescript
Bereich
accessibility, frontend, testing
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.