fix(breadcrumb): disabled behaviors and styles #2886
Merged
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.
Description
Disabled breadcrumbs (except for action buttons) in storybook still had pointer events, hover and focus styles. There was no indication that a text-based breadcrumb was disabled. This was partially because the
tabindex
was being set to0
, which then was adding specific styles. Additionally, theis-disabled
class was not being added to the proper.spectrum-Breadcrumb-itemLink
element. This PR should address these a11y concerns and disabled bugs.How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
@jawinn
.spectrum-Breadcrumbs-item
does not have theis-disabled
classyarn start
), find the breadcrumb storybook docs or default pagebreadcrumb/stories/breadcrumb.stories.js
, add an additional disabled breadcrumb item (or feel free to experiment with ones already there). In the browser inspector, verify the following:isDisabled: false
, thetabindex
of your.spectrum-Breadcrumbs-itemLink
breadcrumb is0
. It should be focusable, clickable, and have a hover state. Theis-disabled
class should not be applied at this point and there should not be adisabled
attributeisDisabled: true
, thetabindex
should not be defined on that element. It should not be focusable, clickable, or have a hover state. Theis-disabled
class andaria-disabled="true"
attribute should be added to.spectrum-Breadcrumbs-itemLink
Regression testing
Validate:
Screenshots
To-do list