Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revisione componente Tab #1129

Merged
merged 21 commits into from
Jan 14, 2025
Merged

Revisione componente Tab #1129

merged 21 commits into from
Jan 14, 2025

Conversation

Virtute90
Copy link
Collaborator

@Virtute90 Virtute90 commented Nov 25, 2024

Fixes #1090 #1096

PR Checklist

  • My branch is up-to-date with the Upstream main branch.
  • The unit tests pass locally with my changes (if applicable).
  • I have added tests that prove my fix is effective or that my feature works (if applicable).
  • I have added necessary documentation (if appropriate).

Short description of what this resolves:

Implementazione del componente tab con react-bootstrap per una migliore gestione dei pattern ARIA

Changes proposed in this Pull Request:

Revisione completa del componente tab in tutte le sue varianti.

Lascio la PR in draft per capire se il lavoro fatto è conforme ai requisiti di accessibilità.

Mancano i seguenti passaggi per completare il componente e la documentazione:

  • Concludere la documentazione dalle tab verticali
  • Controllare i test sul componente

Copy link

vercel bot commented Nov 25, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
design-react-kit ✅ Ready (Inspect) Visit Preview Jan 13, 2025 4:58pm

@Virtute90 Virtute90 changed the title Refactor/tabs Revisione componente Tab Nov 25, 2024
@astagi astagi requested a review from Fupete November 29, 2024 13:02
@astagi astagi linked an issue Dec 2, 2024 that may be closed by this pull request
1 task
@astagi astagi marked this pull request as ready for review December 2, 2024 23:19
Copy link

@Fupete Fupete left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

La selezione del tab item corrente — e il conseguente cambio del contenuto nel tab a seguire — deve avvenire solo per scelta consapevole dell'utente: al click/touch/invio/spazio.

Nell'implementazione attuale degli esempi con i controlli, navigando da tastiera, avviene in automatico al solo navigare con le frecce tra i diversi tab item. Con la conseguenza che il solo esplorare le opzioni cambia il contenuto del tab panel.

@Virtute90
Copy link
Collaborator Author

@astagi @Fupete Esempi documentazione completati!

@Fupete Fupete self-requested a review January 10, 2025 13:33
Copy link

@Fupete Fupete left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nella pagina completa di documentazione si nota che navigando con le frecce (destra > destra > destra > ...) invece di ciclare negli item del componente corrente in cui sei entrato con un tasto Tab, passa al componente dell'esempio successivo... e così via. Deve ciclare tra gli item del componente corrente. Non si va al componente successivo con i tasti freccia. Si entra/esce col tasto Tab nel componente. Poi le frecce (su/giù e dx/sx) non devono portarti fuori o a componenti successivi ma solo ciclare tra gli item. cc @astagi @Virtute90

immagine

immagine

@astagi
Copy link
Member

astagi commented Jan 10, 2025

@Fupete @Virtute90 risolto negli ultimi commit 🙌

@Fupete
Copy link

Fupete commented Jan 13, 2025

@astagi il comportamento delle frecce ora è corretto, ciclando solo nello stesso tab.

Ma purtroppo il tab stesso diventa un "keyboard trap" perché intrappola il focus. Premendo TAB entri nel componente, con le FRECCE navighi tra gli item. Ma premendo nuovamente TAB non esci più dal componente.

immagine

Update: succede anche nelle preview del componente singolo, non solo in documentazione quando sono più di uno.

@astagi
Copy link
Member

astagi commented Jan 13, 2025

@Fupete ora dovrebbe comportarsi nel modo corretto

@Fupete
Copy link

Fupete commented Jan 13, 2025

@astagi purtroppo ho notato che se col focus sul componente navighi fuori premendo nuovamente il tasto Tab, l'aria-selected dell'item selezionato diventa/rimane false. Quando torni sul componente (Shift-Tab per esempio per tornarci sopra) rimane false, non segnalando quindi più ai lettori di schermo l'elemento che è attivo/selezionato del tab.

@astagi astagi merged commit b5b9c85 into italia:main Jan 14, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants