Tab components - React-Bootstrap

From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot ... MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutTabbedcomponentsDynamictabbedinterfacesExamples#Createdynamictabbedinterfaces,asdescribedinthe WAIARIAAuthoringPractices. Tabsisahigher-levelcomponentforquicklycreatinga NavmatchedwithasetofTabPanes. CopyControlled#Tabscanbecontrolleddirectlywhenyouwanttohandlethe selectionlogicpersonally.functionControlledTabs(){ const[key,setKey]=useState('home'); return( setKey(k)} className="mb-3" > ); } render();functionControlledTabs(){const[key,setKey]=useState('home'); return(setKey(k)}className="mb-3">);} render();CopyNoanimation#Setthetransitionproptofalse. CopyDropdowns?#Dynamictabbedinterfacesshouldnotcontaindropdownmenus,asthis causesbothusabilityandaccessibilityissues.Fromausability perspective,thefactthatthecurrentlydisplayedtab’striggerelement isnotimmediatelyvisible(asit’sinsidethecloseddropdownmenu)can causeconfusion.Fromanaccessibilitypointofview,thereiscurrently nosensiblewaytomapthissortofconstructtoastandardWAIARIA pattern,meaningthatitcannotbeeasilymadeunderstandabletousers ofassistivetechnologies.Thatsaid,itDropdownsdoworktechnically(sansfocusmanagement),but wedon'tmakeanyclaimsaboutsupport.CustomTabLayout#FormorecomplexlayoutstheflexibleTabContainer,TabContent,andTabPanecomponentsalongwithany styleofNavallowyoutoquicklypiecetogetheryourownTabs componentwithadditionalmarkupneeded.CreateasetofNavItemseachwithaneventKey correspondingtotheeventKeyofaTabPane.Wrapthewhole thinginaTabContainerandyouhavefullyfunctioning customtabscomponent.Checkoutthebelowexamplemakinguseofthe gridsystemandpills. Tab1 Tab2 Tab1Tab2CopyAPI#Tabs#viewsourcefileimportTabsfrom'react-bootstrap/Tabs'CopyimportcodefortheTabscomponentNameTypeDefaultDescriptionactiveKeystring|numbercontrolledby:onSelect,initialprop:defaultActivekeyMarktheTabwithamatchingeventKeyasactive.defaultActiveKeystring|numberThedefaultactivekeythatisselectedonstartidstringHTMLidattribute,requiredifnogenerateChildIdprop isspecified.mountOnEnterbooleanfalseWaituntilthefirst"enter"transitiontomounttabs(addthemtotheDOM)onSelectfunctioncontrolsactiveKeyCallbackfiredwhenaTabisselected. function( AnyeventKey, SyntheticEventevent? )transitionTransition|false{Fade}Setsadefaultanimationstrategyforallchildrens.animation,elseusefalsetodisableora react-transition-groupcomponent.unmountOnExitbooleanfalseUnmounttabs(removeitfromtheDOM)whenitisnolongervisiblevariant'tabs'|'pills''tabs'NavigationstyleTab#viewsourcefileimportTabfrom'react-bootstrap/Tab'CopyimportcodefortheTabcomponentNameTypeDefaultDescriptiondisabledbooleanThedisabledstateofthetab.eventKeystring|numberAuniqueidentifierfortheComponent,theeventKeymakesitdistinguishablefromothersinaset.SimilartoReact'skeyprop,inthatitonlyneedstobeuniqueamongsttheComponentssiblings,notglobally.tabAttrsobjectObjectcontainingattributestopasstounderlyingnavlink.tabClassNamestringClasstopasstotheunderlyingnavlink.titlerequirednodeContentforthetabtitle.TabContainer#viewsourcefileimportTabContainerfrom'react-bootstrap/TabContainer'CopyimportcodefortheTabContainercomponentNameTypeDefaultDescriptionactiveKeystring|numbercontrolledby:onSelect,initialprop:defaultActivekeyTheeventKeyofthecurrentlyactivetab.generateChildIdfunction(eventKey,type)=>`${props.id}-${type}-${eventKey}`AfunctionthattakesaneventKeyandtypeandreturnsauniqueidfor childtabsands.Thefunctionmustbeapure function,meaningitshouldalwaysreturnthesameidforthesameset ofinputs.Thedefaultvaluerequiresthatanidtobesetforthe . Thetypeargumentwilleitherbe"tab"or"pane".idstringHTMLidattribute,requiredifnogenerateChildIdprop isspecified.mountOnEnterbooleanWaituntilthefirst"enter"transitiontomounttabs(addthemtotheDOM)onSelectfunctioncontrolsactiveKeyAcallbackfiredwhenatabisselected.transition{Transition|false}{Fade}Setsadefaultanimationstrategyforallchildrens. Defaultstoanimation;else,usefalsetodisable,ora customreact-transition-groupcomponent.unmountOnExitbooleanUnmounttabs(removeitfromtheDOM)whentheyarenolongervisibleTabContent#viewsourcefileimportTabContentfrom'react-bootstrap/TabContent'CopyimportcodefortheTabContentcomponentNameTypeDefaultDescriptionaselementType