Tab: render endContent beside the tab button, not inside it

Aperta
  • Qualcosa non va?
#143 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@ironAiken2 ci sta già lavorando.

Dal 6/11/2026.

  • #144 di @ironAiken2 — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
html, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Read the Tab component and its existing tests to see how it renders the button or navigation link and handles endContent. Add or update tests for sibling rendering, selection behavior, accessible naming and description, and keyboard navigation. Done means interactive end content is outside the tab control, the described behaviors pass, and there is no axe nested-interactive violation.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

Astryx Tab renders label and endContent both inside its <button role="tab"> (or <a> in the navigation pattern). A trailing interactive control — the usual case is an IconWithTooltip explaining the tab — therefore nests a <button> inside the tab's <button>:

In HTML, <button> cannot be a descendant of <button>.

This breaks the HTML button content model (no interactive content descendant) and ARIA's children presentational rule for tab. IconWithTooltip focusable={false} avoids the nesting but the tooltip no longer opens inside a tab, and anchoring the tooltip to the tab itself loses it on touch (a tap selects the tab).

Expected

Tab renders endContent itself as a sibling of the tab's button/link, inside a non-interactive wrapper — no new prop:

<span class="…tab wrapper…">
  <button role="tab" aria-describedby="<end content id>">{label}</button>
  <span id="<end content id>">{endContent}</span>
</span>
  • A tab without endContent keeps Astryx's markup.
  • Clicking non-interactive end content (a count badge) still selects the tab; clicking an interactive control in it (e.g. IconWithTooltip's trigger) does not.
  • End content leaves the tab's accessible name and is read as its description (aria-describedby).
  • The tab's hover background, selection indicator and hit area read as one tab with the end content.
  • Arrow-key navigation between tabs is unchanged; an interactive control in the end content is a separate Tab stop.
  • No axe nested-interactive violation. Under role="tablist" an interactive control beside a tab still trips aria-required-children (a tablist owns only tabs).

Consumer

lablup/backend.ai-webui#10636 — tab help icons in ResourceGroupDetailDrawer and the scheduler page.

Lingua principale
TypeScript
Stelle
2
Fork
0
Merge medio
1g 1h
PR unite (30g)
36

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di lablup/ui-common

Tutte le issue di lablup/ui-common

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.