bug: Programmatically focus an ion-button

[AE1NS]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
There is no .setFocus() Method on an ion-button element. The only method I found that could focus the element, was IONELEMENT.el.focus(). Unfortunately this method does not focus the button (checked with document.activeElement). Its a huge problem when trying to build an accessible app.

Expected behavior:
Either a .setFocus() method (like on an ion-input) or a .focus() method on the 'el' property, that focus the button correctly.

Steps to reproduce:
Access the button in TS Code and call the .focus() method on the 'el' property.

Related code:

@ViewChild(IonButton) button;
...
this.button.el.focus();

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework.

Many browsers will not let you programmatically focus an element if it does not have tabindex on it. This is true for Ionic components including ion-button. To get around this, you should set tabindex="0" on the ion-button.

I created a CodePen with an example: https://codepen.io/liamdebeasi/pen/gOPbqmG

Open the console, and you should see the ion-button as the focused element. For more information about focusing elements, please see: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex.

[AE1NS]

This is working as expected, thank you. But theres another thing that breaks now. When I add the tabindex="0" I can focus the item programmatically but the action is not called (i.e. click event) when I press space or enter on it. When I remove the tabindex, I can tab to the ion-button (I dont understand why, because there is no tabindex) and the action is called when pressing space/enter (like a click). Is this a bug, or is there another thing I am missing?

[liamdebeasi]

What browser are you testing this on? I am testing this in my CodePen, and a click event I added is being called properly.

[AE1NS]

I am testing with the latest Firefox. Angular/Ionic application.

<ion-button (click)="onClick()" tabindex="0">TestButton</ion-button>
...
onClick() {
    alert('clicked');
}

Without tabindex I can move to the button with tab and call the event with enter/space when focused. With tabindex, I have two tab targets on the same button. I can tab to the button but the event is not triggered with enter/space. Then I tab again and the button is still focused (also document.activeElement is showing me ion-button again) and then the event gets triggered. Is it a bug that the button is focusable two times with tabindex?

[AE1NS]

@liamdebeasi were you able to to investiagte the described behavior?

[liamdebeasi]

This looks like how Firefox handles focused buttons in the Shadow DOM. This is probably something we can improve with delegatesFocus, but Firefox does not support this yet.

[AE1NS]

Alright, thanks for the clarification.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.