-
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
af5451a
commit 6b37b03
Showing
3 changed files
with
80 additions
and
83 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,18 +1,17 @@ | ||
| import { DevelopmentSection } from '@/components/doc/common/developmentsection'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import Link from 'next/link'; | ||
|
|
||
| export function AccessibilityDoc() { | ||
| return ( | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and{' '} | ||
| <i>aria-label</i> can optionally be used as well. | ||
| </p> | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and{' '} | ||
| <i>aria-label</i> can optionally be used as well. | ||
| </p> | ||
|
|
||
| <h3>Close Button Keyboard Support</h3> | ||
| <p>Component does not include any interactive elements.</p> | ||
| </DocSectionText> | ||
| <h3>Close Button Keyboard Support</h3> | ||
| <p>Component does not include any interactive elements.</p> | ||
| </DocSectionText> | ||
| ); | ||
| } |
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,47 +1,46 @@ | ||
| import { DevelopmentSection } from '@/components/doc/common/developmentsection'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
|
|
||
| import Link from 'next/link'; | ||
|
|
||
| export function AccessibilityDoc() { | ||
| return ( | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and{' '} | ||
| <i>aria-label</i> can optionally be used as well. | ||
| </p> | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and{' '} | ||
| <i>aria-label</i> can optionally be used as well. | ||
| </p> | ||
|
|
||
| <p> | ||
| Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="/locale">locale</Link> API by default, you may use | ||
| <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>. | ||
| </p> | ||
| <p> | ||
| Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="/locale">locale</Link> API by default, you may use | ||
| <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>. | ||
| </p> | ||
|
|
||
| <h3>Close Button Keyboard Support</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>enter</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>space</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSectionText> | ||
| <h3>Close Button Keyboard Support</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>enter</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>space</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSectionText> | ||
| ); | ||
| } |
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,46 +1,45 @@ | ||
| import { DevelopmentSection } from '@/components/doc/common/developmentsection'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
|
|
||
| import Link from 'next/link'; | ||
|
|
||
| export function AccessibilityDoc() { | ||
| return ( | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". | ||
| </p> | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". | ||
| </p> | ||
|
|
||
| <p> | ||
| Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="/locale">locale</Link> API by default, you may use | ||
| <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>. | ||
| </p> | ||
| <p> | ||
| Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="/locale">locale</Link> API by default, you may use | ||
| <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>. | ||
| </p> | ||
|
|
||
| <h3>Close Button Keyboard Support</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>enter</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>space</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSectionText> | ||
| <h3>Close Button Keyboard Support</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>enter</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>space</i> | ||
| </td> | ||
| <td>Closes the message.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSectionText> | ||
| ); | ||
| } |