-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #91 from microsoft/shubhakanta-dialog
Added rules for dialog
- Loading branch information
Showing
10 changed files
with
534 additions
and
29 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
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
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 |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| # A DialogBody should have a header(DialogTitle), content(DialogContent), and footer(DialogActions) (`@microsoft/fluentui-jsx-a11y/dialogbody-needs-title-content-and-actions`) | ||
|
|
||
| 💼 This rule is enabled in the ✅ `recommended` config. | ||
|
|
||
| <!-- end auto-generated rule header --> | ||
|
|
||
| Accessibility: A DialogBody should have a header(DialogTitle), content(DialogContent), and footer(DialogActions). | ||
|
|
||
| <https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/> | ||
|
|
||
| ## Ways to fix | ||
|
|
||
| - Add DialogTitle, DialogContent and DialogActions inside DialogBody component. | ||
|
|
||
| ## Rule Details | ||
|
|
||
| This rule aims to make Dialogs accessible | ||
|
|
||
| Examples of **incorrect** code for this rule: | ||
|
|
||
| ```jsx | ||
| <DialogBody> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <DialogBody> | ||
| <DialogTitle>Dialog title</DialogTitle> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <DialogBody> | ||
| <DialogTitle>Dialog title</DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| </DialogBody> | ||
| ``` | ||
|
|
||
| Examples of **correct** code for this rule: | ||
|
|
||
| ```jsx | ||
| <DialogBody> | ||
| <DialogTitle>Dialog title</DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| ``` |
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 |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| # DialogueSurface need accessible labelling: aria-describedby on DialogueSurface and aria-label or aria-labelledby(if DialogueTitle is missing) (`@microsoft/fluentui-jsx-a11y/dialogsurface-needs-aria`) | ||
|
|
||
| 💼 This rule is enabled in the ✅ `recommended` config. | ||
|
|
||
| <!-- end auto-generated rule header --> | ||
|
|
||
| Accessibility: DialogueSurface must have a aria-describedby and aria-label or aria-labelledby(if DialogueTitle is missing). | ||
|
|
||
| <https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/> | ||
|
|
||
| ## Ways to fix | ||
|
|
||
| - Add a label with id, add the aria-describedby having same value as id to DialogueSurface. | ||
| - Add a label with id, add the aria-labelledby having same value as id to DialogueSurface. | ||
| - Add a aria-label to DialogueSurface. | ||
| - Add DialogTitle inside DialogueSurface. | ||
|
|
||
| ## Rule Details | ||
|
|
||
| This rule aims to make Dialogs accessible | ||
|
|
||
| Examples of **incorrect** code for this rule: | ||
|
|
||
| ```jsx | ||
| <DialogSurface> | ||
| <DialogBody> | ||
| <DialogTitle>Dialog title</DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| </DialogSurface> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <> | ||
| <Label id="dialoge-test-id">My Label</Label> | ||
| <DialogSurface aria-describedby="dialoge-test-id"> | ||
| <DialogBody> | ||
| <DialogTitle></DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| </DialogSurface> | ||
| </> | ||
| ``` | ||
|
|
||
| Examples of **correct** code for this rule: | ||
|
|
||
| ```jsx | ||
| <> | ||
| <span id="dialoge-test-id">My Label</span> | ||
| <DialogSurface aria-describedby="dialoge-test-id"> | ||
| <DialogBody> | ||
| <DialogTitle>Dialog title</DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| </DialogSurface> | ||
| </> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <> | ||
| <Label id="dialoge-test-id">My Label</Label> | ||
| <DialogSurface aria-describedby="dialoge-test-id" aria-label="test-label"> | ||
| <DialogBody> | ||
| <DialogTitle></DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| </DialogSurface> | ||
| </> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <> | ||
| <div id="dialoge-test-id-desc">My Label1</div> | ||
| <span id="dialoge-test-id-label">My Label2</span> | ||
| <DialogSurface aria-describedby="dialoge-test-id-desc" aria-labelledby="dialoge-test-id-label"> | ||
| <DialogBody> | ||
| <DialogTitle></DialogTitle> | ||
| <DialogContent>Test</DialogContent> | ||
| <DialogActions> | ||
| <Button>Close</Button> | ||
| <Button>Do Something</Button> | ||
| </DialogActions> | ||
| </DialogBody> | ||
| </DialogSurface> | ||
| </> | ||
| ``` |
Oops, something went wrong.