md-button: buttons being focused wrongly

[jmalexan]

There are a couple of cases I've run into where md-buttons are being focused despite not being clicked on. The first is when an md-sidenav is toggled open by a button, then toggled closed by clicking on the main page, as seen below. This results in the button focusing and unfocusing inversely to its normal behavior.

The other case I've run into is the button in my md-menu containing a button is opened on top of the button that opens it, the button is focused permanently until you click on white space within the menu, as seen below.

[juanmiguelbesada]

I think this is a related bug

On angular material page: https://material.angularjs.org/latest/#/

Click on github button (it will open a new tab)
Now in the angular material page go to typography.

Github button will get focus and it tooltip will appear

[jmalexan]

Interesting find. This is reproducible with all the buttons on the top of the screen on that page, and will happen when switching to any page in the docs, not just the Typography page.

[jmalexan]

Here's another odd occurrence: when I click on any button then either switch to a different tab, or have the button direct me to a different tab, when I switch back to the page that button will permanently have focus until blank space is clicked.

[marcysutton]

In the sidenav this is a feature, not a bug. When a sidenav is triggered from a button, focus is sent back to that button on close. You're seeing focus management at work, something that is required for accessibility.

The second thing is completely unrelated, and I believe it has been fixed (issues with Tooltips).

[blackotruck]

Hi @marcysutton, this also happens on buttons inside modal's md-actions section, now, you say this is a feature, but this prevents from autofocusing an input in forms, in fact the focus is set but lost inmediatly, which doesn't seems right, besides the autofocus is an important feature that we loose for a feature that actually cause confusion. We noticed the same behavior on bottom-sheets, and until now i had no idea that this was the reason, i thought it was a bug on my code, people were asking me why the button seems focused and i couldn't give an answer, i particulary don't find it problematic (except for the autofocus issue), but other users does. Can we reopen this?

[blackotruck]

@marcysutton Sorry but i have to disagree, as the title says the issue is with the md-button perse, the sidenav mention was just one of the cases where it happens, even the google search i used was "md-button focus issue", and it came first, so i don't think there's any need to open a new issue, but i can do it if (after all i said) you really think is necessary

[marcysutton]

Hi, I redid my comment since it wasn't accurate in the context of this larger issue. The challenge is that focus management is required for the framework to be accessible. How can we keep that feature and enable developers like you to accomplish what you're after?

I think one way to accommodate everyone's needs would be to make sure autofocus is detected and supported in components using focus management, rather than disabling focus management. We could potentially limit focus management (or just the focus style) to keyboard users only, but that is currently a huge hack we need to overcome in browsers (see Button Focus Hell and CSS Input Modality).

@blackotruck if autofocus was better supported so that you could focus on arbitrary elements on open of a dialog, would that solve your issue?

[marcysutton]

Note that Material Dialog already has focusOnOpen in its API. Recommended that affordance be used with dialogs, since it already works around focus management. https://material.angularjs.org/latest/api/service/$mdDialog

[blackotruck]

@marcysutton by using focusOnOpen: false the input focus is working fine, but the truth is that i haven't considered accessibility so far, anyway, lots of thanks for the anwer :)