fix(material/stepper): updates vertical-stepper aria roles #30577
Conversation
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
crisbeto
added
the
dev-app preview
|
Deployed dev-app for a28e833 to: https://ng-dev-previews-comp--pr-angular-components-30577-dev-8fa6kebf.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
4 times, most recently
from
85afb00 to
8a56517
Compare
essjay05
requested review from
crisbeto and
andrewseguin
and removed request for
a team
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
from
5c61ea5 to
21533e8
Compare
angular-robot
bot
added
the
area: build & ci
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
from
6097d6b to
71e25bf
Compare
crisbeto
reviewed
Mar 12, 2025
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
from
71e25bf to
54bab8e
Compare
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
from
9820986 to
334d4de
Compare
crisbeto
reviewed
Mar 17, 2025
| /** Only find steps with the given selected state. */ | ||
| selected?: boolean; | ||
| /** Only find steps with the given expanded state. */ | ||
| expanded?: boolean; |
There was a problem hiding this comment.
I think we can leave the selected terminology. expanded doesn't really apply to horizontal stepper since they don't expand/collapse.
There was a problem hiding this comment.
So unfortunately, it looks like the aria-selected attribute can't be applied to aria role="button". I'm thinking of changing it to aria-pressed instead as it's an accepted attribute for buttons.
There was a problem hiding this comment.
I still think we should keep the selected terminology in the test harness. The harness doesn't need to match the ARIA pattern.
There was a problem hiding this comment.
Hi @crisbeto, I've reverted my harness changes to use isSelected terminology instead but be based off of aria-pressed. Let me know if these new changes are sufficient. Thanks for your consult on this!
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
from
439ec62 to
e43bcd2
Compare
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
2 times, most recently
from
57b1b9e to
1de20e4
Compare
crisbeto
approved these changes
Mar 24, 2025
Updates Angular Component's vertical stepper to use more generic aria roles since having the default tablist/tab/tabpanel applied to the vertical stepper violates WCAG rules of having tabpanel as a nested child within tablist. The new roles of group and region satisfy aria requirements while maintaining the current html structure of the vertical stepper. Fixes b/361783174
Updates previous fix to create individual mat-step-header tags to be used within the horizontal and vertical steppers to make it easier to edit/understand.
Updates previous fix to add aria-expanded attribute to vertical stepper to be more descriptive as to when the associated content is open and the respective step is current.
Updates stepper.spec.ts to check for region role for the vertical stepper based on the new role updates.
Work on fixing failing tests.
Updates stepper.spec.ts to match updated aria-roles for vertical stepper so that it is looking for the appropriate roles/attributes.
Reverts previously changed step-harness files.
Remove unnecessary aria-pressed from vertical stepper.
Updates stepper-harness tests to make checks depending on whether the stepper is horizontal or vertical and checking the attributes accordingly.
Ran command to update api golden checks with new stepper tests.
Updates previous fix to use an ng-template instead of using mat-step-header twice.
…ttern as vertical Updates previous fix so that the aria-roles are cohesive between horizontal/vertical to simplify the patterns.
Updates previous documentation so it uses the correct/updated aria roles of , , and with the attribute.
…les & attributes Updates all tests that are affected by the updated stepper aria roles and attributes.
Ran command to update API goldens.
…pper Updates previous changes to only use aria-expanded for vertical stepper and to add aria-pressed and aria-current values depending on the selectedIndex value.
…utes Updates stepper tests based on the new aria-attributes that were added to the stepper, particularly for the horizontal stepper.
Ran command to update api goldens.
Updates previous changes to tests which used isPressed and isExpanded to simplify to isSelected instead.
essjay05
force-pushed
the
change-vertical-stepper-aria-roles
branch
from
188a79b to
a28e833
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates Angular Component's vertical stepper to use more generic aria roles since having the default tablist/tab/tabpanel applied to the vertical stepper violates WCAG rules of having tabpanel as a nested child within tablist. The new roles of group and region satisfy aria requirements while maintaining the current html structure of the vertical stepper.
Fixes b/361783174