import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as r}from"./index-BeeV6X6A.js";import{M as i,C as s,c}from"./index-DLgQDw3r.js";import{Default as a}from"./ScreenReaderText.stories-BuS5WxvE.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-Cf-Lpz6Y.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import"./OdysseyThemeProvider-Bh0Bu-2o.js";import"./OdysseyProvider-qIn9QVYS.js";import"./ScreenReaderText-CebALBsG.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./visuallyHidden-Dan1xhjv.js";function o(n){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{anchor:!0}),`
`,e.jsx(t.h1,{id:"screenreadertext",children:"ScreenReaderText"}),`
`,e.jsx(t.p,{children:"The ScreenReaderText component is designed to enhance accessibility by providing text that can be read by screen readers but is not visible to a sighted user."}),`
`,e.jsx(s,{of:a}),`
`,e.jsx(t.h2,{id:"usage",children:"Usage"}),`
`,e.jsx(t.p,{children:"The ScreenReaderText component should be used in conjunction with other visible UI elements to ensure that all users have access to the same information. It is typically used for labeling and providing additional context for form fields, buttons, and other interactive elements on the page."}),`
`,e.jsx(t.h3,{id:"component-composition",children:"Component composition"}),`
`,e.jsx(t.p,{children:"ScreenReaderText may be used to provide accessibility when composing custom components."}),`
`,e.jsxs(t.p,{children:["For example, when communicating the ",e.jsx(t.code,{children:"severity"})," of an Alert:"]}),`
`,e.jsx(c,{code:`
<Alert role={role} severity={severity} variant="banner">
  <ScreenReaderText>{severity}:</ScreenReaderText>
  {text}
</Alert>
`})]})}function D(n={}){const{wrapper:t}={...r(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{D as default};
