AletheiaFact / AletheiaFact/aletheia

Enhancement: Add accessibility and keyboard navigation to the Verification Page's Avatars

Aperta
#2,324 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
tech
Lingua principale
TypeScript
Stelle
55
Fork
20
Merge medio
2g 6h
PR unite (30g)
2

Descrizione

### Background Information

Currently, the profile avatars displayed on the Verification Request page are clickable with a mouse, but are not accessible to users who rely solely on a keyboard or assistive technologies (such as screen readers). This issue aims to make the component inclusive and navigable.
Ensure that all users, regardless of how they navigate the system, can access the details of the personalities mentioned. Currently, the keyboard focus (`Tab key`) skips over these cards.

https://jam.dev/c/b3c52834-8a7a-4147-a9cd-2c96de667556

### Steps to Reproduce

_No response_

### How

Acceptance Criteria

- [ ] Focusability: Cards must be reachable using the Tab key.
- [ ] Visual Indicator: Add a :focus state (e.g., colored border or outline) so the user knows which card is selected.
- [ ] Keyboard Interaction: The user must be able to “click” on the card by pressing the Enter or Spacebar keys.
- [ ] HTML Semantics: Ensure that the card uses the correct tag (such as or ) or has role="button" and tabindex="0".
- [ ] Aria-label: Add a descriptive label for screen readers (e.g., “View details of [Personality Name]”).

### Expected Behavior

The expected behavior is that personality avatars should be fully accessible via the keyboard, allowing users to navigate between them using the Tab key with a clear visual focus indicator, and to access the details page by pressing Enter or the Space bar, ensuring that screen readers identify each card as an interactive, clickable element.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.