AOSSIE-Org / AOSSIE-Org/OrgExplorer

[FEATURE]: Implement keyboard accessibility for navigation cards

Ouverte
#135 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
enhancement
Langage dominant
JavaScript
Étoiles
34
Forks
92
Merge moyen
8 j 7 h
PR mergées (30 j)
12

Description

### Feature and its Use Cases

## Description
The navigation cards on the Overview page currently work only through mouse interaction. Users navigating with a keyboard cannot focus or activate these cards.

https://github.com/user-attachments/assets/6dfe05be-a282-4283-ae8d-a4b0e901e93a

Since cards are implemented as clickable

elements, they are not native interactive elements, they:
- cannot receive keyboard focus
- cannot be activated using Enter or Space
- screen readers may not recognize these cards as interactive elements

### Expected Behavior:-

Navigation cards should:-
- be reachable using the Tab key
- show a visible focus state
- activate with Enter and Space

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start at the Overview page and locate the navigation-card implementation. Check the current clickable div behavior, then verify that every card is reachable by Tab, shows a visible focus state, and activates with Enter and Space.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
accessibility, frontend, web-dev
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
65/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.