fix(material-experimental/mdc-progress-spinner): fix aria-valuenow #22429
Conversation
annieyw
added
P3
google-cla
bot
added
the
cla: yes
| setAttribute: (name: string, value: string) => | ||
| this._elementRef.nativeElement.setAttribute(name, value), | ||
| this._rootElement.setAttribute(name, value), |
There was a problem hiding this comment.
Rather than having to introduce another layer in the DOM and move styles around, we could change this method so that it doesn't set the aria-valuenow. E.g.
setAttribute: (name, value) => {
if (name !== 'aria-valuenow') {
this._elementRef.nativeElement.setAttribute(name, value)
}
}
There was a problem hiding this comment.
+1, that would be a better approach here. Separately, though, we should ask mdc why they use 0 to 1 instead of 0 to 100 (as percent).
There was a problem hiding this comment.
should we also do the same for mdc progress bar?
There was a problem hiding this comment.
If it has the same issue then yes. Both have the same accessibility setup.
annieyw
force-pushed
the
valuenow
branch
2 times, most recently
from
8a6d178 to
5c0e11a
Compare
| setAttribute: (name: string, value: string) => | ||
| this._elementRef.nativeElement.setAttribute(name, value), | ||
| setAttribute: (name, value) => { | ||
| if (name !== 'aria-valuenow') { |
There was a problem hiding this comment.
nit: maybe we should have a comment here explaining why we're special-casing it? Also do we have to account for aria-valuemin and aria-valuemax?
There was a problem hiding this comment.
aria-valuenmin and aria-valuemax are static and set in the host
|
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. |
Previously the aria-valuenow on mat-progress-spinner was being set through the mdc foundation which deals with values from 0 to 1. This caused the aria-valuenow to be incorrect (eg. 0.6 instead of 60).
Solution: Use
mat-progress-spinneras a wrapper element instead and have the different circle containers under a separatemdc-circular-progressdiv instead of right undermat-progress-spinner. This way the mdc foundation can interact with the underlyingmdc-circular-progressdiv instead of the overallmat-progress-spinnerselector.