Typeaheadcontroller typeahead wrongly activated on menu navigation
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 48/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- accessibility, frontend
Research direction
Start at the menu typeaheadController.onKeydown path invoked by menu.captureKeydown, then trace listController.handleKeydown, activatePreviousItem, and beginTypeahead. Add a regression test for Tab navigation from a menu item containing a checkbox, and verify that subsequent ArrowUp navigation focuses the preceding item rather than the last item.
Written by the indexing model from the issue text.
Description
What is affected?
Component, Accessibility
Description
Putting focusable components - such as a md-checkbox - inside a md-menu-item and subsequently pressing 'TAB' when focused on said menu-item, correctly delegates focus to its inner checkbox, but also deactivates the parent md-menu-item - e.g sets tabIndex = 0.
Further navigation - e.g pressing ArrowUp - which is handled through a call to the menu.listController.handleKeydown function, will conclude that no items are active and therefore the call to activatePreviousItem with activeItemRecord being a null-value results in a call to activateLastItem.
The last list item gets focus, instead of the item above.
The culprit is the menu.typeaheadController whose onKeydown-function is called through the capturing event listener menu.captureKeydown. As isTypingAhead == false beginTypeahead gets called.
There are checks for whether or not the given key is a navigable key - upon which it should return - but only for arrow keys, space, enter and escape - hardcoded. Therefore shift and tabkeys begin typeahead's which sets tabIndex = -1 for the lastActiveItemRecord (the first menu-item with tabIndex == 0);
Reproduction
The below code (partially from the documentation) for a menu and activating button should display the described behaviour, when tabbing while focus is on the 'banana' md-menu-item, and then trying to navigate afterwards
<md-filled-button id="usage-anchor" type="button" onclick="document.getElementById('usage-menu').open=true">Set with idref</md-filled-button>
<md-menu id="usage-menu" anchor="usage-anchor">
<md-menu-item>
<div slot="headline">Apple</div>
</md-menu-item>
<md-menu-item>
<div slot="headline">Apple 2</div>
</md-menu-item>
<md-menu-item>
<div slot="headline">Banana</div>
<md-checkbox slot="end"></md-checkbox>
</md-menu-item>
<md-menu-item>
<div slot="headline">Apple 3</div>
</md-menu-item>
<md-menu-item>
<div slot="headline">Apple 4</div>
</md-menu-item>
<md-menu-item>
<div slot="headline">Cucumber</div>
</md-menu-item>
</md-menu>
Workaround
Including more checks for which keys are navigable/non-typeahead;
Could just add shiftLeft and tab to the long if-statement, or maybe provide an extension point like the listController's isNavigableKey function :) ;
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
All (i imagine)
Browser/OS/Node environment
unrelated i believe
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from material-components/material-web
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
material-components/material-web#6014 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 55/100
material-components/material-web#6030 ·
-
Agent Skill Open
Difficulty 5/5 Over a week Newbie friendliness 20/100
material-components/material-web#5918 ·
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
material-components/material-web#5894 · 12 reactions ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
material-components/material-web#5888 · 16 reactions ·
All issues in material-components/material-web
Similar issues
-
accessibility angular bug good first issue typescript ux
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
apache/fineract-backoffice-ui#584 · 1 comment ·
-
bug
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
spartan-ng/spartan#1763 ·
-
Access Score Gallery Label Map
Difficulty 2/5 Half a day Newbie friendliness 68/100
ProjectSidewalk/SidewalkWebpage#5430 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100