Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

fix(nav-bar): update keyboard navigation to WAI-ARIA guidelines #11494

Merged
merged 1 commit into from Nov 6, 2018

Conversation

Splaktar
Copy link
Member

@Splaktar Splaktar commented Oct 26, 2018

PR Checklist

Please check that your PR fulfills the following requirements:

  • The commit message follows our guidelines
  • Tests for the changes have been added or this is not a bug fix / enhancement
  • Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

  1. You can't move focus out of md-nav-bar with shift+tab on keyboard.
  2. You can't use the home or end keys to change tabs as defined in the WAI-ARIA Authoring Practices
  3. You can't wrap around to the first/last tab when hitting the end as as defined in the WAI-ARIA Authoring Practices
  4. Sometimes the focus ends up on the md-nav-bar instead of being properly forwarded to the ._md-nav-button causing the arrow buttons and keyboard navigation to not work.

Issue Number:
Fixes #10419. Relates to #11489.

What is the new behavior?

Update keyboard navigation to WAI-ARIA guidelines

  • stop blocking shift-tab from moving focus away from the nav-bar
  • enable the use of the home and end keys
  • wrap to the first/last tab when hitting the end
  • properly manage nav item tabindex values
  • skip over disabled tabs instead of leaving focus in a bad state
  • remove click listener on destroy
  • document keyboard behaviors
  • fix bad linking syntax in API docs
  • update to latest karma version

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

These changes have been tested with #11486 and they are compatible with those changes. This PR should be merged after #11486.

@Splaktar Splaktar added this to the 1.1.11 milestone Oct 26, 2018
@googlebot googlebot added the cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ label Oct 26, 2018
@Splaktar Splaktar added the a11y This issue is related to accessibility label Oct 26, 2018
@Splaktar Splaktar added type: bug ui: focus P2: required Issues that must be fixed. labels Oct 26, 2018
@Splaktar Splaktar added the pr: merge ready This PR is ready for a caretaker to review label Oct 26, 2018
- stop blocking shift-tab from moving focus away from the nav-bar
- enable the use of the home and end keys
- wrap to the first/last tab when hitting the end
- properly manage nav item tabindex values
- skip over disabled tabs instead of leaving focus in a bad state
- remove click listener on destroy
- document keyboard behaviors
- fix bad linking syntax in API docs
- update to latest karma version

Fixes #10419. Relates to #11489.
@Splaktar Splaktar assigned jelbourn and unassigned mmalerba Oct 29, 2018
@jelbourn jelbourn merged commit 4d29450 into master Nov 6, 2018
@Splaktar Splaktar deleted the improveNavBarKeyboardNav branch November 7, 2018 18:34
marosoft pushed a commit to marosoft/material that referenced this pull request Nov 11, 2018
…lar#11494)

- stop blocking shift-tab from moving focus away from the nav-bar
- enable the use of the home and end keys
- wrap to the first/last tab when hitting the end
- properly manage nav item tabindex values
- skip over disabled tabs instead of leaving focus in a bad state
- remove click listener on destroy
- document keyboard behaviors
- fix bad linking syntax in API docs
- update to latest karma version

Fixes angular#10419. Relates to angular#11489.
Splaktar added a commit that referenced this pull request Jan 21, 2019
remove hover style that is inconsistent with spec

Fixes #11591. Relates to #11494. Closes #11598.
Splaktar added a commit that referenced this pull request Jan 22, 2019
remove hover style that is inconsistent with spec

Fixes #11591. Relates to #11494. Closes #11598.
mmalerba pushed a commit that referenced this pull request Feb 1, 2019
<!-- 
Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed.
-->
## PR Checklist
Please check that your PR fulfills the following requirements:
- [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format)
- [x] Tests for the changes have been added or this is not a bug fix / enhancement
- [x] Docs have been added, updated, or were not required

## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
```
[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:
```

## What is the current behavior?
Clicking on nav items with a mouse causes the focus to move to the previously clicked nav item instead of the newly clicked nav item.
<!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. -->
Issue Number: 
Fixes #11591. Relates to #11494. Closes #11598.

## What is the new behavior?
- Focus is moved to the new nav item after it is clicked.
- remove hover style that is inconsistent with spec
- add test from @codymikol 

## Does this PR introduce a breaking change?
```
[ ] Yes
[x] No
```
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
<!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. -->

## Other information
Thank you to @codymikol for doing the initial investigation into this regression!
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This issue is related to accessibility cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ P2: required Issues that must be fixed. pr: merge ready This PR is ready for a caretaker to review type: bug ui: focus
Projects
None yet
Development

Successfully merging this pull request may close these issues.

nav-bar: can't move focus out of md-nav-bar with shift+tab
4 participants