Skip to content

Commit

Permalink
#5429 for DeferredContent
Browse files Browse the repository at this point in the history
  • Loading branch information
yigitfindikli committed Nov 28, 2023
1 parent eae284c commit 6c88a14
Showing 1 changed file with 16 additions and 19 deletions.
35 changes: 16 additions & 19 deletions components/doc/deferredcontent/accessibilitydoc.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
import { CodeHighlight } from '@/components/doc/common/codehighlight';
import { DevelopmentSection } from '@/components/doc/common/developmentsection';
import { DocSectionText } from '@/components/doc/common/docsectiontext';

export function AccessibilityDoc() {
return (
<DevelopmentSection>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so
you have full control over the roles like{' '}
<a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
landmark
</a>{' '}
and attributes like <i>aria-live</i>.
</p>
<CodeHighlight>
{`
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
have full control over the roles like{' '}
<a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
landmark
</a>{' '}
and attributes like <i>aria-live</i>.
</p>
<CodeHighlight>
{`
<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
Content
</DeferredContent>
`}
</CodeHighlight>
</CodeHighlight>

<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
</DevelopmentSection>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
);
}

0 comments on commit 6c88a14

Please sign in to comment.