AOSSIE-Org / AOSSIE-Org/OrgExplorer

[FEATURE]: Implement keyboard accessibility for navigation cards

Offen
#135 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
JavaScript
Sterne
34
Forks
92
Ø Merge
8 T. 7 Std.
Gemergte PRs (30 T.)
12

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
accessibility, frontend, web-dev
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
65/100

Neue Issues direkt in Ihr Postfach

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