bug: No reliable way to make ion-button programatically focusable

[FabianGutierrezOpengov]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Preexisting mentions

#21439

Issue

This have been asked before, but it seems the workaround provided here will clash with the internal button tag inside the component and makes button require two tab presses to move their focus to the next element.

this in my humble opinion looks like an A11Y issue as we're nesting interactive elements.

Expected Behavior

adding tabindex="0" should allow element to be programatically focusable but not make it to require 2 tabs to be jumped over

Steps to Reproduce

check sample given at #21439

Code Reproduction URL

#21439

Ionic Info

@angular-devkit/build-angular : 17.1.1
@angular-devkit/schematics : 17.1.1
@angular/cli : 17.1.1
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/core : 6.1.2
Utility:

cordova-res : not installed
native-run : 2.0.1

System:

NodeJS : v20.11.0 (C:\Program Files\nodejs\node.exe)
npm : 10.2.4
OS : Windows 10

Additional Information

No response

[brandyscarney]

Thank you for the issue! I agree that adding tabindex="0" may not provide the best user experience, as it requires users to tab twice to achieve focus. If you're using an ion-app, the following should work to focus a button element:

<ion-app>
  <ion-content class="ion-padding">
    <ion-button onClick="focusButton()">Focus Button</ion-button>
    <ion-button id="focusThis">
      Button
    </ion-button>
  </ion-content>
</ion-app>

function focusButton() {
  var buttonEl = document.querySelector('#focusThis');

  const app = buttonEl.closest('ion-app');
  if (app) {
    app.setFocus([buttonEl]);
  }
}

You can view a working example on CodePen: https://codepen.io/brandyscarney/pen/gONQvpX?editors=1010

I've raised this with the team to explore a better solution for using the native focus() with the button. I'll update this issue once we've decided on the best approach. 🙂

[brandyscarney]

I spoke with the team and we decided to document the above usage. I've created an issue for this here: ionic-team/ionic-docs#3815. Let me know if there are any issues with this. Thank you!