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

tabs: visual indicator of focus is missing #11384

Closed
avakatushka opened this issue Jul 26, 2018 · 6 comments · Fixed by #11392
Closed

tabs: visual indicator of focus is missing #11384

avakatushka opened this issue Jul 26, 2018 · 6 comments · Fixed by #11392
Assignees
@Splaktar
Labels
a11y This issue is related to accessibility g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed severity: regression This issue is related to a regression type: bug
Milestone
1.1.11

Comments

@avakatushka
Copy link

avakatushka commented Jul 26, 2018 •
edited

Bug

CodePen and steps to reproduce the issue:

When you go through the page using tab key (for example, tabs demo) you can see no indicator of that the md-tabs element have recieved focus. But if you use arrow key to navigate through md-tabs, visual indicator appears, and keeps working properly.

Detailed Reproduction Steps:

  1. Go to Tabs Demo Page https://material.angularjs.org/1.1.5/demo/tabs
  2. Press tab long enough, to get to ONE/TWO/THREE tabs under Dynamic Height example
  3. See that there is no visual indicator of focus
  4. Use left and write arrows
  5. See that now visual indicator of focus appeared

What is the expected behavior?

Visual indicator appears immediately that the focus is set on md-tabs element.

What is the current behavior?

Visual focus is not present than it should be.

What is the use-case or motivation for changing an existing behavior?

Accessibility guideline: "Confirm that a visual indicator is present for each element that currently has keyboard focus."

Which versions of AngularJS, Material, OS, and browsers are affected?

  • AngularJS: The one used in AngularJS Material demos
  • AngularJS Material: 1.1.10 (could see the issue in current demo)
  • OS: Mac OS
  • Browsers: Chrome, Safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

Screenshot with right and wrong version
@codymikol
Copy link
Contributor

Can confirm this is an issue on 1.1.10 as well

@jelbourn jelbourn added a11y This issue is related to accessibility g3: reported The issue was reported by an internal or external product team. labels Jul 26, 2018
@Splaktar Splaktar self-assigned this Jul 30, 2018
@Splaktar Splaktar changed the title a11y: visual Indicator of focus on md-tabs is missing tabs: visual indicator of focus is missing Jul 30, 2018
@Splaktar Splaktar added the severity: regression This issue is related to a regression label Jul 30, 2018
@Splaktar Splaktar added this to the 1.1.11 milestone Jul 30, 2018
@Splaktar Splaktar added type: bug P1: urgent Urgent issues that should be addressed in the next minor or patch release. needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Jul 30, 2018
@Splaktar
Copy link
Member

It looks like this is working properly in 1.1.4 and that this is a regression introduced in 1.1.5.

This is probably related to one of the following:

@codymikol
Copy link
Contributor

After a git bisect, it looks like

tabs: accessibility and keyboard interaction fixes (#10706) (072f832), closes #10075

is causing the issue. I'm going to take a closer look.

@codymikol
Copy link
Contributor

I currently have the tab focus working in master, but I just checked out a diff of the files from the parent of the bad commit. It looks like the issues reside in a combination of tabsController.js and tabsDirective.js. I'm going to see if I can figure out what exactly is causing the focus to disappear by removing diffs one by one 🤷‍♂️

@codymikol
Copy link
Contributor

Fixed, going to make a PR soon.

codymikol pushed a commit to codymikol/material that referenced this issue Jul 31, 2018
fix(tabs): show a visual indication of tab focus
037ecfd 
the visual highlighting of focused tabs was not functioning

Fixes angular#11384
codymikol pushed a commit to codymikol/material that referenced this issue Aug 1, 2018
fix(tabs): show a visual indication of tab focus
fe9c953 
the visual highlighting of focused tabs was not functioning

Fixes angular#11384
@codymikol codymikol mentioned this issue Aug 1, 2018
Merged
3 tasks
@Splaktar Splaktar added has: Pull Request A PR has been created to address this issue for: external contributor and removed needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Aug 1, 2018
codymikol pushed a commit to codymikol/material that referenced this issue Aug 1, 2018
fix(tabs): show a visual indication of tab focus
8bf5597 
the visual highlighting of focused tabs was not functioning

Fixes angular#11384
@avakatushka
Copy link
Author

Thank you so much! Cool that you fixed it!

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 g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed severity: regression This issue is related to a regression type: bug
Projects
None yet
Milestone
1.1.11
Development

Successfully merging a pull request may close this issue.

fix(tabs): show a visual indication of tab focus codymikol/material
4 participants
@jelbourn @Splaktar @codymikol @avakatushka