Sidenav and Toolbar buttons are highlighed automatically

[michelebombardi]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When the sidenav is opened and the user move the cursor on one of buttons the first button is always highlighted automatically.

Moreover, when the sidenav is closed the menu button on the toolbar is highlighted automatically until the user click somewhere else.

What is the current behavior?

Highlights should be shown only if the user moves the cursor on button.

What are the steps to reproduce?

Plunker -> https://plnkr.co/edit/ve5Ez0WSinNyowxI46LO?p=preview

Which versions of Angular, Material, OS, browsers are affected?

"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/core": "2.4.7",
"@angular/flex-layout": "^2.0.0-beta.4",
"@angular/forms": "2.4.7",
"@angular/http": "2.4.7",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
"@angular/platform-server": "2.4.7",

Is there anything else we should know?

[joh04667]

This is related to the md-button directive. The first md-button in the sidenav shows this behavior. As a workaround, you can set a 'dummy' anchor tag or button at the start of the sidenav with an md-button attribute, then set its height to 0 and position it absolutely.

EDIT:

More details:

When an element with md-button is hovered, the "mat-button-focus" class is being applied to the first element with an md-button attribute in the sidenav. The class stays there even as other md-buttons are hovered over, and is removed on a normal blur event (click, etc). This only affects elements with an md-button attribute.

When the sidenav is closed, the focus is applied to the button that opened the sidenav. Its position and parent container have no affect on this. Putting multiple buttons tied to the sidenav around the page, clicking one to open, and closing it always lead to the button that opened it getting focused.

Workaround:

As stated, the md-button focusing in the sidenav can be worked around by adding a dummy md-button element with no height, like so: https://plnkr.co/edit/wPWpZINvhfhyhViXc9Jt?p=preview

For the menu icon getting focused when the sidenav is closed, I bound the private _removeKeyboardFocus() method on the mdButton prototype to the md-sidenav's onClose event. Naughty naughty using private methods, I know, but that's why it's called a workaround.
Example fix for OP's Plunker: https://plnkr.co/edit/HvwUYtCQQ86ibhUFbXC8?p=preview

[mmalerba]

Just looked into this. It's WAI that the sidenav focuses the first focusable element upon opening, though as @joh04667 pointed out the md-button is treating the programmatic focus from the focus-trap as a keyboard focus and applying the keyboard focus styling. I'll prepare a PR to switch md-button over to using the new FocusOriginMonitor which handles this edge case.

[joh04667]

@mmalerba just to be clear....it's WAI to have the keyboard focus only show up and stick to the first element when any md-button element is hovered over? And for it to lose keyboard focus when an empty space in the sidenav is clicked? This doesn't seem like a very good feature to me; the keyboard focus is not shown initially and is able to be removed trivially.

Here's a simpler Plunker with that behavior: https://plnkr.co/edit/wPWpZINvhfhyhViXc9Jt?p=preview

[mmalerba]

It's WAI for the first focusable element in the sidenav to be focused when the sidenav is opened. However buttons should only have the darkened background style when they are focused via they keyboard (i.e. pressing tab).