import{j as t}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import"./index-_dyfSX8u.js";import{M as n,T as c,S as p,D as h,P as d,a as l,b as m}from"./index-DLgQDw3r.js";import{T as o}from"./Tabs.stories-CRJgQA20.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-D06dtFvI.js";import"./iframe-Cf-Lpz6Y.js";import"./DocsRenderer-CFRXHY34-CCeAz_jE.js";import"./client-ByW5HbEz.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./index-BJMTVygn.js";import"./axeRun-B-LchFqf.js";import"./axe-4JP0vCEZ.js";import"./iconUtils-BII10A1q.js";import"./index-DB8HwIVZ.js";import"./OdysseyThemeProvider-Bh0Bu-2o.js";import"./Server-Ch5aeRtt.js";import"./List-UlX1tusJ.js";import"./ArrowRight-ChWYjNny.js";import"./Bug-CQIUmZ-N.js";import"./Calendar-_GPHtaRa.js";import"./ChevronRight-C12ToI7Y.js";import"./ChevronUp-CfT7Bz8X.js";import"./Clock-17ua7UAW.js";import"./Upload-CfzP_Muq.js";import"./Documentation-DF3oo39e.js";import"./Download-Zlhupksh.js";import"./ExternalLink-D0l1c5Cz.js";import"./Filter-DsDJ7si-.js";import"./Folder-e-po0U54.js";import"./Globe-B83Xmd05.js";import"./Grid-EpV3TL4a.js";import"./Group-mTVRC79V.js";import"./Hide-TKfOHglI.js";import"./Home-la7Lmt_L.js";import"./InformationCircle-a2jMUKfL.js";import"./More-DLQ2RjWn.js";import"./Refresh-DexPEklu.js";import"./Search-C5TVrLyE.js";import"./Settings-2rTKyez8.js";import"./Show-BnmQFsN6.js";import"./Sync-BbqTDeWk.js";import"./User-CyxEAfVT.js";import"./Video-DWT3WylB.js";import"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import"./OdysseyProvider-qIn9QVYS.js";import"./Badge-BO7bTIEa.js";import"./Box-1mvP3NLW.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./Tabs-CQz87GHd.js";import"./ButtonBase-BNqa2TMD.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./TransitionGroupContext-DAL84N7p.js";import"./utils-kUZVaD1e.js";import"./debounce-Be36O1Ab.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./createSvgIcon-ClUWwDzL.js";import"./getReactElementRef-DsIevm5t.js";import"./resolveComponentProps-DXQ8X87i.js";import"./isHostComponent-DVu5iVWx.js";import"./useThemeProps-BPvYx-mf.js";import"./useThemeProps-DwvbKxez.js";import"./Button-BEA5U6Tg.js";import"./BaseButton-DYZHKnV3.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-CsVWtVfL.js";import"./Tooltip-Cq2rQGbD.js";import"./Grow-C8kUeGCY.js";import"./useControlled-NQulfz4l.js";import"./Popper-BARIxJrI.js";import"./popper-BVOCD5jc.js";import"./Portal-C6D59xAE.js";import"./Button-BzIwUmSM.js";function e(i){const r={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...s(),...i.components};return t.jsxs(t.Fragment,{children:[t.jsx(n,{of:o}),`
`,t.jsx(c,{of:o}),`
`,t.jsx(p,{of:o}),`
`,t.jsx(h,{of:o}),`
`,t.jsx(d,{of:o}),`
`,t.jsxs(r.p,{children:["A full composition includes a ",t.jsx(r.code,{children:"<Tabs>"})," component with the ",t.jsx(r.code,{children:"tabs"}),` prop set to an array of two or more objects
that use the following props:`]}),`
`,t.jsx(l,{}),`
`,t.jsx(m,{}),`
`,t.jsx(r.h2,{id:"accessibility",children:"Accessibility"}),`
`,t.jsx(r.h3,{id:"keyboard-support",children:"Keyboard Support"}),`
`,t.jsx("figure",{className:"ods-table--figure",children:t.jsxs("table",{className:"ods-table",children:[t.jsx("caption",{children:"Tabs support the following keyboard shortcuts"}),t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{scope:"column",children:"Key"}),t.jsx("th",{scope:"column",children:"Behavior"})]})}),t.jsxs("tbody",{children:[t.jsxs("tr",{children:[t.jsx("th",{scope:"row",rowSpan:"2",children:t.jsx("kbd",{children:"Tab"})}),t.jsx("td",{children:t.jsxs(r.p,{children:["When focus moves in to ",t.jsx("code",{children:"tablist"}),` the focus is placed on the
first `,t.jsx("code",{children:"tab"})," element."]})})]}),t.jsx("tr",{children:t.jsx("td",{children:t.jsxs(r.p,{children:[`Unlike the right arrow key, if you Tab past the last element, the Tab
focus continues down the page as normal. In this case, it should set
focus in to the active `,t.jsx("code",{children:"tabpanel"})]})})}),t.jsxs("tr",{children:[t.jsx("th",{scope:"row",children:t.jsxs(r.p,{children:[t.jsx("kbd",{children:"Space"})," or ",t.jsx("kbd",{children:"Enter"})]})}),t.jsx("td",{children:t.jsxs(r.p,{children:["When focus is placed on a Tab, the corresponding ",t.jsx("code",{children:"tabpanel"})," ",`
is activated/displayed.`]})})]}),t.jsxs("tr",{children:[t.jsx("th",{scope:"row",rowSpan:"2",children:t.jsx("kbd",{children:"Right Arrow"})}),t.jsx("td",{children:t.jsxs(r.p,{children:["When focus is within the ",t.jsx("code",{children:"tablist"}),` the next Tab is
selected.`]})})]}),t.jsx("tr",{children:t.jsx("td",{children:"If the last Tab is focused the focus is moved to the first Tab."})}),t.jsxs("tr",{children:[t.jsx("th",{scope:"row",rowSpan:"2",children:t.jsx("kbd",{children:"Left Arrow"})}),t.jsx("td",{children:t.jsxs(r.p,{children:["When focus is within the ",t.jsx("code",{children:"tablist"}),` the previous Tab is
selected.`]})})]}),t.jsx("tr",{children:t.jsx("td",{children:"If the first Tab is focused the focus is moved to the last Tab."})}),t.jsxs("tr",{children:[t.jsx("th",{scope:"row",children:t.jsx("kbd",{children:"Home"})}),t.jsx("td",{children:"If a Tab has focus, the focus is moved to the first Tab."})]}),t.jsxs("tr",{children:[t.jsx("th",{scope:"row",children:t.jsx("kbd",{children:"End"})}),t.jsx("td",{children:"If a Tab has focus, the focus is moved to the last Tab."})]})]})]})}),`
`,t.jsx(r.h2,{id:"references",children:"References"}),`
`,t.jsx(r.h3,{id:"further-reading",children:"Further Reading"}),`
`,t.jsxs(r.ul,{children:[`
`,t.jsx(r.li,{children:t.jsx(r.a,{href:"https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel",rel:"nofollow",children:"Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1"})}),`
`]})]})}function Ht(i={}){const{wrapper:r}={...s(),...i.components};return r?t.jsx(r,{...i,children:t.jsx(e,{...i})}):e(i)}export{Ht as default};
