demo(dialog): Add accessibility demo page for dialog #6360
Conversation
googlebot
added
the
cla: yes
tinayuangao
added
Accessibility
tinayuangao
force-pushed
the
a11y-dialog
branch
from
e0c8789 to
679c5dc
Compare
| @@ -0,0 +1,23 @@ | |||
| <section> | |||
| <h2>Welcome message</h2> | |||
| <p>Activat the button to see a welcome dialog with a simple message and a close button.</p> | |||
| template: `Welcome to Angular Material dialog demo page! | ||
|
|
||
| <md-dialog-actions> | ||
| <button |
There was a problem hiding this comment.
Should this dialog have some other content?
There was a problem hiding this comment.
Do you have an example?
There was a problem hiding this comment.
I was just thinking a <p> with some text
| <h2 md-dialog-title>Neptune</h2> | ||
|
|
||
| <md-dialog-content> | ||
| <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/> |
| md-button | ||
| color="primary" | ||
| href="https://en.wikipedia.org/wiki/Neptune" | ||
| target="_blank">Read more on Wikipedia</a> |
There was a problem hiding this comment.
The indent / line-breaking here is odd
| @@ -0,0 +1,12 @@ | |||
| <h2 md-dialog-title>Neptune</h2> | |||
There was a problem hiding this comment.
Where does the focus go when this dialog is opened?
There was a problem hiding this comment.
The "Close" button in the dialog.
There was a problem hiding this comment.
I suspect that having the focus start after all of the dialog content is weird
@tinayuangao @crisbeto what do you think of adding a dialog config option like focusDialogElementOnOpen (and also ariaLabel) to help with dialogs like this?
There was a problem hiding this comment.
It does make sense, although specifying what element takes precedence in the focus trap should already be possible through the cdk-focus-initial attribute.
There was a problem hiding this comment.
That doesn't give a way to focus the role="dialog" element, though, which I think is what we'd want (but I'm not 100% sure).
There was a problem hiding this comment.
Adding a config option makes sense to me.
I added another example for forms. The focus goes to the first input box in the form when the dialog is opened.
tinayuangao
force-pushed
the
a11y-dialog
branch
2 times, most recently
from
8d580fc to
e8756f0
Compare
jelbourn
added
pr: lgtm
action: merge
Based on the discussion on angular#6360 (comment), these changes add the ability to set the `aria-label` of a dialog, as well as the element that should be focus when the dialog is opened.
kara
added
pr: needs rebase
and removed
action: merge
|
@tinayuangao Rebase? |
tinayuangao
force-pushed
the
a11y-dialog
branch
from
e11e0d1 to
a20d419
Compare
|
@kara Rebased. Thanks! |
Based on the discussion on angular#6360 (comment), these changes add the ability to set the `aria-label` of a dialog, as well as the element that should be focus when the dialog is opened.
Based on the discussion on angular#6360 (comment), these changes add the ability to set the `aria-label` of a dialog, as well as the element that should be focus when the dialog is opened.
Based on the discussion on #6360 (comment), these changes add the ability to set the `aria-label` of a dialog, as well as the element that should be focus when the dialog is opened.
Based on the discussion on angular#6360 (comment), these changes add the ability to set the `aria-label` of a dialog, as well as the element that should be focus when the dialog is opened.
Based on the discussion on #6360 (comment), these changes add the ability to set the `aria-label` of a dialog, as well as the element that should be focus when the dialog is opened.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
No description provided.