This repository was archived by the owner on Sep 5, 2024. It is now read-only.
fix(tabs): Accessibility and keyboard interaction fixes #10706
Merged
Conversation
This file contains hidden or 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
googlebot
added
the
cla: yes
|
Tagging @jelbourn as requested. :) |
jelbourn
added
the
g3: pr
|
@crisbeto could you also take a quick look at this? |
crisbeto
approved these changes
May 31, 2017
src/components/tabs/tabs.spec.js
Outdated
| }); | ||
|
|
||
| }); | ||
|
|
||
| describe('leaving tablist', function() { |
There was a problem hiding this comment.
nit: I don't think that this needs to be in an extra describe. It's a non-blocker.
There was a problem hiding this comment.
Moved it into the above describe. :)
This commit does a few things related to accessibility: 1) Hides md-dummy-tabs completely from screen readers with aria-hidden. With this change, screen readers do not hear the dummy tabs read out when using linear navigation. Instead of focusing the dummy tabs, the visible tabs are focused. There was a comment that mentions focusing the dummy tabs as a way to avoid animation issues; however, I could not replicate the mentioned issues. 2) Fixes the ARIA roles so users can hear "tab 1 of 3" instead of just "tab" by moving role="tablist" to the direct parent element (which contains the items marked role="tab"). (VoiceOver in particular) 3) Fixes keyboard interaction to match recommended ARIA practices by focusing on the active tab when using TAB navigation, then resolving the focus/active tab discrepancy on pressing TAB within the tablist. This prevents the behavior where tabbing away from the tablist then back results in the previously focused tab getting focus instead of the active tab. 4) Note that there is a SCSS change added in to retain current behavior when the active tab is added to the tab order; however, this should likely be reconsidered as it actively overrides default focus outline behavior. 5) Removes unsupported ARIA attribute (aria-activedescendant) from md-tabs-canvas and removes md-tab-id from dummy tabs to prevent duplicate setting of aria-controls. 6) Moved id to tab item from dummy tab so the aria-labelledby on the tab content (role="tabpanel") items is set as per ARIA recommendation. Tests were updated and fleshed out to check that the active tab is the only tab allowed in the tab order and that focused/active tabs are reconciled on tabbing out of the tablist. Closes angular#10075.
kara
added
pr: merge ready
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
This commit does a few things related to accessibility:
With this change, screen readers do not hear the dummy tabs read out
when using linear navigation. Instead of focusing the dummy tabs, the
visible tabs are focused. There was a comment that mentions focusing the
dummy tabs as a way to avoid animation issues; however, I could not
replicate the mentioned issues.
"tab" by moving role="tablist" to the direct parent element (which
contains the items marked role="tab"). (VoiceOver in particular)
focusing on the active tab when using TAB navigation, then resolving the
focus/active tab discrepancy on pressing TAB within the tablist. This
prevents the behavior where tabbing away from the tablist then back
results in the previously focused tab getting focus instead of the
active tab.
when the active tab is added to the tab order; however, this should
likely be reconsidered as it actively overrides default focus outline
behavior.
md-tabs-canvas and removes md-tab-id from dummy tabs to prevent
duplicate setting of aria-controls.
content (role="tabpanel") items is set as per ARIA recommendation.
Tests were updated and fleshed out to check that the active tab is the
only tab allowed in the tab order and that focused/active tabs are
reconciled on tabbing out of the tablist.
Closes #10075.