Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Editable tabs: add and remove buttons owned by role=tablist keep aria-required-children firing

Aperta
  • Qualcosa non va?
#1,025 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start in src/TabNavList/index.tsx and src/TabNavList/AddButton.tsx, then trace the remove button alongside each role="tab" node. Check how innerAddButtonRef feeds overflow measurement and inspect the related CSS on the antd side. Re-run the editable Tabs example through axe-core 4.13; done means add and remove buttons no longer trigger aria-required-children while overflow sizing still works.

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

Descrizione

After #1024 moves role="tablist" to .rc-tabs-nav-list, aria-required-children still fires for editable tabs: the add button (src/TabNavList/AddButton.tsx, rendered inside the nav list next to the tab nodes in src/TabNavList/index.tsx) is a button owned by the tablist, and a tablist may only own tab elements. axe-core flags it critical: "Element has children which are not allowed: button".

The remove button is the same class of problem, pre-existing: it renders as a sibling of the role="tab" node inside each tab wrapper, so the tablist owns it too.

Repro: <Tabs editable={{ onChange: ... }} items={...} /> through axe-core 4.13 flags the add button node with aria-required-children (critical). The same check on a non-editable Tabs is clean with #1024 applied, which is why this is carved out of that PR's scope.

What a fix likely needs:

  • relocate the add button outside [role=tablist] (or restructure so the tablist owns only tab nodes) while keeping the innerAddButtonRef size measurement working, it participates in the overflow calculation
  • move the remove button inside each role="tab" element, or give it the same restructuring
  • matching CSS on the antd side for both moves

Context: remaining scope of the aria-required-children failure reported in ant-design/ant-design#49502; antd currently carries a waiting for fix exemption in the tabs a11y test (ant-design/ant-design#53584) that covers this.

Lingua principale
TypeScript
Stelle
572
Fork
242
Merge medio
12h 6m
PR unite (30g)
2

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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 react-component/tabs

Tutte le issue di react-component/tabs

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.