Update tab indicator implementation #578
Merged
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
arnoldsandoval-okta
requested review from
ganeshsomasundaram-okta,
jmelberg-okta,
rajaguruduraisamy-okta and
a team
as code owners
edburyenegren-okta
approved these changes
Jul 30, 2020
mattkaniaris-okta
approved these changes
Jul 31, 2020
jmelberg-okta
approved these changes
Jul 31, 2020
| Donuts | ||
| <div id="user-profile-tabs" class="ods-tabs" label="User profile options"> | ||
| <div role="tablist" aria-label="" class="ods-tabs--tablist"> | ||
| <button role="tab" id="tab-applications" aria-selected="true" tabindex="0" aria-controls="tab-applications-tabpanel" class="ods-tabs--tab"> |
There was a problem hiding this comment.
As an FYI - this isn't a required aria attribute and isn't compatible with web components. Material UI and Polaris do not use these labels either.
In the future it would be nice to outline attributes as either MUST or SHOULD be implemented, since it'll depend on the technology used by consumers.
| } | ||
| else if (key === 'End') { | ||
| this.tabLast() | ||
| switch (key) { |
There was a problem hiding this comment.
Please add a default case here to pick up all other key types.
There was a problem hiding this comment.
There is no reason for us to pick up any other keys. I'll admit this felt a little weird to me too, but since it was obvious we only needed to answer for those specific cases/keys I went with it. Would you prefer if I went back to a conditional?
arnoldsandoval-okta
added a commit
that referenced
this pull request
Jul 31, 2020
* updates tab component implementation to remove tab indicator positioned by JS (fixes #564) * add default to switch statement which handles tab keyboard events
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 implementation so that
aria-selectedhandles the display of the tab indicator line as opposed to handling positioning via JS (fixes #564)cc: @mattkaniaris-okta