Components: possibility to "disable" button focused (cdk-program-focused)

[mackelito]

Bug, feature request, or proposal:

proposal

What is the expected behavior?

Buttons not getting focus

What is the current behavior?

Button does get focus

What are the steps to reproduce?

https://plnkr.co/edit/EfLJ1ApD3MD1xiWsRcm1?p=preview

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

If the sidenav contains a long list and user has scrolled down, closes the sidenav and then reopens it the sidenav should stay at the last scroll coordinates.

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

Is there anything else we should know?

[jelbourn]

The focus behavior is in place for accessibility reasons; we typically want to avoid adding APIs that would make any component less accessible.

[spottedmahn]

What's the workaround here?

---

We're popping up a dialog and one of the buttons is getting focus, therefore, causing the style to be incorrect.

[ksrb]

Old issue I know but for the tumbleweeds who search into this issue this is in the documentation:

By default, the first tabbable element within the dialog will receive focus upon open. This can be configured by setting the cdkFocusInitial attribute on another focusable element.

So basically you could set add the cdkFocusIntial attribute to a hidden element i.e.:

<input cdkFocusInitial type='text' style="display: none" />

It's not the greatest for accessibility but yeah 😕 ...

[pablomario]

In my case, the real problem stay in button structure, 'material' build various sub components and last one is a 'div' with css class 'mat-button-focus-overlay':

My solution is simply, in 'style.css' file, add or sobrescribe the 'mat-button-focus-overlay'

.mat-button-focus-overlay { background-color: transparent!important; }

[simeyla]

Revisiting this again after running into it again a year later...

The problem most people seem to have had is related to dialog boxes and not specific to side-nav. So this is about that, but basically the same issue:

• I click on a mat-button called Skip which opens a mat-dialog
• I confirm I want to Skip, and the dialog is closed via another button
• The original button Skip is still highlighted
• That's my problem, and it looks just awful

Fortunately the styles set on the button are as follows:

 class="mat-button cdk-focused cdk-program-focused"

So my global fix is this:

Note the addition of .cdk-program-focused so as to not break keyboard focus styles

.mat-button, .mat-flat-button, .mat-stroked-button
{   
    &.cdk-program-focused .mat-button-focus-overlay
    {
        opacity: 0 !important;
    }
}

This does however break the behavior whereby you click but don't finish the click properly

How is it an 'accessibility' feature to highlight the button that initiated a dialog after the dialog has closed? Whatever the intent of this was - it's a classic case of frustration where people will end up making accessibility worse by disabling it more places than needed.

[simeyla]

I came up with a more practical solution when the problem you're having is a button retaining focus after the dialog it opened has closed.

https://github.com/angular/components/issues/11403#issuecomment-522291462

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}