'Setting focus gives the button focus, but focus is not visible

In an angular solution, I have some dialogs located in <div's>.

Open them like:

    this.deleteFileDialogOpened=true;
    setTimeout(() => { 
      this.btnOk2.nativeElement.focus(); 
    }, 10);

where

  @ViewChild('msgOkBtn2') btnOk2: ElementRef;

The button gets focus, but focus is not visible. Space works as I want it to. Pressing tab-key moved to the next (cancel) button, and the button has "a focus ring", clearly showing it has focus. Shift+tab and it goes back, same way, focus is visible.

Is there a way to make focus visible? Like when moving with the tab key, so I can actually see where focus is.

I could change it CSS, but is there a "system way" to do this? Even standard buttons have this issue.

The dialog is as simple as it gets:

<div *ngIf="deleteFileDialogOpened" class="....">
    <div>
        <p>Do you want to the delete the file {{filenameToDelete}}?</p>
    </div>
    <div>
        <button (click)="deleteFile()" #msgOkBtn2>Yes</button>
        <button (click)="closeDialog()">Cancel</button>
    </div>
</div>

angular focus

Solution 1:^[1]

:focus focuses the element, but does not necessarily :focus-visible - the visible part. You should edit :focus-visible of your element or go with the css option. https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Css option demo here (on which also component has :focus-visible): https://stackblitz.com/edit/angular-zzf4pd?file=src%2Fapp%2Fhello.component.ts

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joosep Parts

'Setting focus gives the button focus, but focus is not visible

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]