Nested elements with `role='tab'` are triggering tab change

Offen

#237 erstellt am 26.3.2018 5 Kommentare 8 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 3/5
Geschätzter Aufwand: 1-2 Tage
Anfängerfreundlichkeit: 35/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: javascript, react
Bereich: accessibility, frontend

Rechercherichtung

Beginne damit, das JSX-Beispiel mit einem verschachtelten Element zu reproduzieren, das role='tab' verwendet, und verfolge anschließend, wie sich Klicks innerhalb von TabPanel auf die Tab-Auswahl auswirken. Die Aufgabe ist erledigt, wenn das Klicken auf das verschachtelte role='tab'-Element den ausgewählten Tab nicht mehr ändert, während normale Tab-Wechsel weiterhin funktionieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

If any child element of a TabPanel has role='tab' clicking on that element will cause the selected tab to become the first tab.

Example:

Clicking on <span>hello</hello> will cause the selected tab to change.

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>


      <div role='tab'>
          <span>hello</span>
      </div>
    </TabPanel>
  </Tabs>
);

Use Case:
Seems plausible that someone might want to use the 'tab' role on a nested element. In my particular case I'm using https://github.com/react-component/collapse within a TabPanel.

Vorherrschende Sprache: JavaScript
Sterne: 3.1k
Forks: 455
Ø Merge: 5 Std. 9 Min.
Gemergte PRs (30 T.): 2

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus reactjs/react-tabs

Tab not updating properly when state changes dynamically Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 25/100

reactjs/react-tabs#584 · Erstellt am 27.7.2025
className default is lost when props.className is undefined in UncontrolledTabs Offen

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 45/100

reactjs/react-tabs#581 · 3 Kommentare · Erstellt am 28.5.2025
Can I get the width of the dom of the first selected tab? Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#571 · Erstellt am 19.12.2024
Support hiding of all TabPanels Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#525 · 1 Kommentar · 1 Reaktion · Erstellt am 22.7.2023
Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#521 · 3 Kommentare · Erstellt am 07.6.2023

Alle Issues in reactjs/react-tabs