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

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

Closed
sharonlevyex opened this issue Nov 8, 2020 · 1 comment · Fixed by #12066
Closed

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

sharonlevyex opened this issue Nov 8, 2020 · 1 comment · Fixed by #12066
Assignees
@Splaktar
Labels
a11y This issue is related to accessibility has: Pull Request A PR has been created to address this issue P3: important Important issues that really should be fixed when possible. resolution: fixed type: bug
Milestone
1.2.2

Comments

@sharonlevyex
Copy link

Bug Report

When navigating through md-fab-actions with both tab and keyboard the focus is not in order.

Example

If I use tab to navigate and I reach the third action:
image
and then I use keyborad (left) to navigate back to the previous action, the focus goes to the first action:
image

Actual behavior

The focus starts from the first element when using keyboard, even after navigating with tab.

Expected behavior

For keyboard to continue navigation from current button focused.

Demo and steps to reproduce the issue

It reproduces in the Material demo.

Demo URL (required)*: https://material.angularjs.org/1.2.1/demo/fabSpeedDial

Detailed Reproduction Steps

  1. Use tab to navigate through the actions.
  2. Continue to navigate with keyboard.
@sharonlevyex sharonlevyex added needs triage Issues that need initial triage type: bug labels Nov 8, 2020
@Splaktar Splaktar self-assigned this Nov 9, 2020
@Splaktar Splaktar added a11y This issue is related to accessibility P3: important Important issues that really should be fixed when possible. and removed needs triage Issues that need initial triage labels Nov 9, 2020
@Splaktar Splaktar added this to the 1.2.2 milestone Nov 9, 2020
@Splaktar
Copy link
Member

Splaktar commented Nov 9, 2020

It looks like tab navigation is broken for this component. It just seems to go to the last option and hitting tab again closes the speed dial instead of going to the next option. Thank you for this report.

@Splaktar Splaktar changed the title FAB Speed Dial: issue when using keyboard and tab together to navigate FAB Speed Dial: keyboard navigation with tab key gives unexpected results Nov 9, 2020
Splaktar added a commit that referenced this issue Dec 17, 2020
@Splaktar
fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab
fda4a81 
- add code to handle Tab and Shift+Tab keyboard interactions
- rip out old an inaccesible `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 if `md-raised md-fab`
- move from old `vm` controller alias to more consistent `ctrl`

Fixes #12043
@Splaktar Splaktar mentioned this issue Dec 17, 2020
Merged
3 tasks
Splaktar added a commit that referenced this issue Dec 17, 2020
@Splaktar
fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab
0a9371b 
- 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 added the has: Pull Request A PR has been created to address this issue label Dec 17, 2020
Splaktar added a commit that referenced this issue 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 added a commit that referenced this issue Dec 17, 2020
@Splaktar
fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab
41c71ed 
- 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
a11y This issue is related to accessibility has: Pull Request A PR has been created to address this issue P3: important Important issues that really should be fixed when possible. resolution: fixed type: bug
Projects
None yet
Milestone
1.2.2
Development

Successfully merging a pull request may close this issue.

fix(fab-speed-dial): keyboard navigation issues with tab and shift+tab angular/material
2 participants
@Splaktar @sharonlevyex