Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab #12066

Merged
Splaktar merged 1 commit into from
Dec 17, 2020
Merged

fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab #12066

Splaktar merged 1 commit into from
Dec 17, 2020

Conversation

@Splaktar
Copy link
Contributor

@Splaktar Splaktar commented Dec 17, 2020 •
edited
Loading

PR Checklist

Please check 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?

  • If you switch between navigating through the speed dial actions from arrow buttons to tabs, the ordering is messed up and some options become impossible to reach with tab navigation.
  • It's not possible to visually see which action item has focus when using a dark theme

Fixes #12043

What is the new behavior?

  • add code to handle Tab and Shift+Tab keyboard interactions
  • rip out old an inaccessible tabindex shifting code
  • use a more noticeable background color for raised mini fab action buttons
    in speed dials as compared to stand-alone raised mini fab buttons
  • change fab-speed-dial demo from branded SVGs with hard coded colors to
    Material Design icons that can be styled by color
  • add button demo of md-raised md-fab
  • move from old vm controller alias to more consistent ctrl

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Due to the nature of having to make related changes to the same component, this PR is based upon PR #12065.

For the review, you should just look at the second commit in this PR: 0a9371b

Before

All examples have the first action item focused.
Screen Shot 2020-12-17 at 06 33 20
Screen Shot 2020-12-17 at 06 35 00

After

All examples have the first action item focused.
Screen Shot 2020-12-17 at 06 34 09
Screen Shot 2020-12-17 at 06 33 42

@Splaktar Splaktar added this to the 1.2.2 milestone Dec 17, 2020
@Splaktar Splaktar self-assigned this Dec 17, 2020
@google-cla google-cla bot added the cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ label Dec 17, 2020
@Splaktar Splaktar force-pushed the fab-speed-dial-action-focus branch from fda4a81 to 0a9371b Compare December 17, 2020 11:37
@Splaktar Splaktar added a11y This issue is related to accessibility P3: important Important issues that really should be fixed when possible. pr: merge ready This PR is ready for a caretaker to review labels Dec 17, 2020
@Splaktar Splaktar requested a review from mmalerba December 17, 2020 11:40
mmalerba
mmalerba approved these changes Dec 17, 2020
View reviewed changes
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Splaktar Splaktar added the pr: lgtm This PR has been approved by the reviewer label Dec 17, 2020
@Splaktar
fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab
a6175d2 
- add code to handle Tab and Shift+Tab keyboard interactions
- rip out old an inaccessible `tabindex` shifting code
- use a more noticeable background color for raised mini fab action buttons
  in speed dials as compared to stand-alone raised mini fab buttons
- change fab-speed-dial demo from branded SVGs with hard coded colors to
  Material Design icons that can be styled by color
- add button demo of `md-raised md-fab`
- move from old `vm` controller alias to more consistent `ctrl`

Fixes #12043
@Splaktar Splaktar force-pushed the fab-speed-dial-action-focus branch from 0a9371b to a6175d2 Compare December 17, 2020 23:23
@Splaktar Splaktar merged commit 41c71ed into master Dec 17, 2020
@Splaktar Splaktar deleted the fab-speed-dial-action-focus branch December 17, 2020 23:26
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@mmalerba mmalerba mmalerba approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@Splaktar Splaktar

Labels

a11y This issue is related to accessibility cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ P3: important Important issues that really should be fixed when possible. pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for a caretaker to review

Projects

None yet

Milestone

1.2.2

Development

Successfully merging this pull request may close these issues.

FAB Speed Dial: keyboard navigation with tab key gives unexpected results

2 participants

@Splaktar @mmalerba