demo(progress-spinner): Add progress spinner accessibility demo page #6347
Conversation
googlebot
added
the
cla: yes
tinayuangao
added
Accessibility
| <section> | ||
| <h2>Loading indicator (Indeterminate progress spinner)</h2> | ||
| <md-progress-spinner mode="indeterminate" | ||
| [value]="loadingValue" color="primary" [strokeWidth]="1"> |
There was a problem hiding this comment.
do indeterminate ones need a value?
|
|
||
| <section> | ||
| <h2>Potion of completion (Determinate progress spinner) </h2> | ||
| <md-progress-spinner mode="indeterminate" color="primary"></md-progress-spinner> |
There was a problem hiding this comment.
should be determinate? (also needs a value)
| <h2>Potion of completion (Determinate progress spinner) </h2> | ||
| <md-progress-spinner mode="indeterminate" color="primary"></md-progress-spinner> | ||
| <md-spinner color="warn"></md-spinner> | ||
| </section> No newline at end of file |
|
Comments addressed. Please take another look. Thanks for review! |
| </section> | ||
|
|
||
| <section> | ||
| <h2>Potion of completion (Determinate progress spinner) </h2> |
| @@ -0,0 +1,16 @@ | |||
| <section> | |||
| <h2>Loading indicator (Indeterminate progress spinner)</h2> | |||
| <md-progress-spinner mode="indeterminate" color="primary" [strokeWidth]="1"> | |||
There was a problem hiding this comment.
Instead of <md-progress-spinner mode="indeterminate">, you can just do <md-spinner> (which is indeterminate by default)
|
|
||
| <section> | ||
| <h2>Potion of completion (Determinate progress spinner) </h2> | ||
| <md-progress-spinner mode="determinate" color="primary" |
There was a problem hiding this comment.
Should be able to omit the mode for determinate since it's the default
tinayuangao
force-pushed
the
a11y-progress-spinner
branch
2 times, most recently
from
a0077ff to
f1cf872
Compare
|
Comments addressed. Please take another look. Thanks for review! |
| @@ -0,0 +1,13 @@ | |||
| <section> | |||
| <h2>Loading indicator (Indeterminate progress spinner)</h2> | |||
| <md-spinner color="indeterminate" [strokeWidth]="1"></md-spinner> | |||
There was a problem hiding this comment.
Also just occurred to me that each progress component should have an aria-label
|
Added |
| <section> | ||
| <h2>Portion of completion (Determinate progress spinner) </h2> | ||
| <md-progress-spinner [strokeWidth]="1" color="primary" | ||
| [value]="portionValue" aria-label="Portion complete"> |
There was a problem hiding this comment.
Could you make the labels something like "Portion of pizza eaten", "Portion of cake eaten"? (e.g. more "real life" examples)
tinayuangao
left a comment
tinayuangao
left a comment
There was a problem hiding this comment.
Changed to "portion of pizza eaten". PTAL. Thanks!
jelbourn
left a comment
jelbourn
left a comment
There was a problem hiding this comment.
LGTM, add merge-ready when ready
| [value]="portionValue" aria-label="Portion of pizza eaten"> | ||
| </md-progress-spinner> | ||
| <md-progress-spinner color="warn" [value]="portionValue" | ||
| aria-label="Portion of pizza eate"> |
There was a problem hiding this comment.
Missing n at the end of the label
tinayuangao
force-pushed
the
a11y-progress-spinner
branch
from
dbb23b1 to
e25b78c
Compare
|
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. |
4 participants
No description provided.