fix(material/stepper): add text for screen readers to indicate when step is complete #23519
Conversation
amysorto
added
P3
google-cla
bot
added
the
cla: yes
mmalerba
added
action: merge
amysorto
force-pushed
the
announce-step-as-completed-for-screen-readers
branch
from
5b1c00e to
d7cf8c3
Compare
| @@ -10,6 +10,10 @@ | |||
| [ngTemplateOutletContext]="_getIconContext()"></ng-container> | |||
| <ng-container *ngSwitchDefault [ngSwitch]="state"> | |||
| <span *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span> | |||
| <span class="cdk-visually-hidden" | |||
| *ngIf="state == 'done' || state == 'edit'"> | |||
There was a problem hiding this comment.
Sorry for chim in, but wouldn't it be better to do it like this?
| *ngIf="state == 'done' || state == 'edit'"> | |
| *ngIf="state === 'done' || state === 'edit'"> |
There was a problem hiding this comment.
Shouldn't we be adding this text only when the state is done? edit means that the user is still editing it.
There was a problem hiding this comment.
Thanks @dev054!
@crisbeto @jelbourn I just updated this to have also separately have special text for "edit". I do mainly see the edit state so I figured it's worth having one too. Although your right its different than "done". Although I am not too sure if just saying editable makes sense. Thoughts?
There was a problem hiding this comment.
Maybe it should say something like "Current"? The only reason we have it as edit is because that's what the icon is called.
There was a problem hiding this comment.
We should already be capturing which step is selected/active by applying aria-selected to the role="tab" element, no?
There was a problem hiding this comment.
src/material/stepper/stepper-intl.ts
Outdated
| @@ -21,6 +21,9 @@ export class MatStepperIntl { | |||
|
|
|||
| /** Label that is rendered below optional steps. */ | |||
| optionalLabel: string = 'Optional'; | |||
|
|
|||
| /** Label that is used to indicate step as completed to screen readers. */ | |||
| completedScreenReaderLabel: string = 'Completed'; | |||
There was a problem hiding this comment.
This should just be completedLabel
(that fact that it's read by a screen-reader related to how it will be used rather than what it is)
amysorto
force-pushed
the
announce-step-as-completed-for-screen-readers
branch
from
d7cf8c3 to
fb41276
Compare
| <span class="cdk-visually-hidden" *ngIf="state === 'done'"> | ||
| {{_intl.completedLabel}} | ||
| </span> | ||
| <span class="cdk-visually-hidden" *ngIf="state === 'edit'"> | ||
| {{_intl.editableLabel}} | ||
| </span> |
There was a problem hiding this comment.
One thing that also occurred to me: we should compare doing this (inline text) vs. aria-describedby on the role="tab" element and see if one is preferable.
There was a problem hiding this comment.
When I tried using the aria-describedby attribute, nothing was announced when testing with ChromeVox so I just left it as is. I also added tests
…tep is complete or editable
amysorto
force-pushed
the
announce-step-as-completed-for-screen-readers
branch
from
fb41276 to
f605fcf
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. |
No description provided.