google/material-design-lite

button.js: mouseleave event removes focus from button - breaks accessibility

Open

#4761 opened on Sep 16, 2016

View on GitHub
 (4 comments) (0 reactions) (0 assignees)HTML (32,173 stars) (4,926 forks)batch import
help wantedv1-bug

Description

What MDL Version are you using? (please be specific, e.g. major.minor.patch) material-design-lite-1.2.1

What browser(s) is this bug affecting (including version)? Chrome, latest

What OS (and version) are you using? OSX, latest

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it? Create some MDL buttons, eg.

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
    <span>Button 1</span>
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
    <span>Button 2</span>
</button>

Focus a button and position the mouse over it.

Move the mouse pointer away from the button

What is the expected behavior? The button should still have focus and the user should be able to navigate to the next focusable element using tab key.

What is the actual behavior? THE BUTTON IS NOT FOCUSED The user can not tab to the next focusable element, which breaks accessibility!

Any other information you believe would be useful? The code that causes this is in line 111 in button.js:

this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);

You should find a strategy to refocus the button if it was focused before mouseleave event

Contributor guide

Tech stack
javascript
Domain
accessibilityfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic JavaScriptDOM event handlingUnderstanding of focus management
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The bug is in button.js at line 111 where a 'mouseleave' event triggers 'boundButtonBlurHandler', removing focus from the button. The fix should ensure that if the button had focus before the mouseleave event, focus is restored. Review the event listener and refocus logic. No linked PRs or recent comments.