-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
eae284c
commit 6c88a14
Showing
1 changed file
with
16 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |