feat: provide `setFocus` interface on `IonRadio`, `IonCheckbox`, `IonItem`, and `IonButton`

[triptate]

Feature Request

Ionic version:

[x] 5.1.1

Describe the Feature Request

Currently only the IonInput, IonTextarea, and IonSearchbar components offer a setFocus interface for programmatically focusing the component. It was suggested in the Slack group that this was due to those components needing to bring up the mobile keyboard and there being no value to focusing other types of elements programmatically. However, on desktop/web there is value to managing focus, particularly for supporting custom keyboard accessibility features. In our case, we are trying to implement a searchable select component, and would like to be able to tab through the options using arrow keys. Without programmatic access to the select options (we are using IonRadio components), we cannot manage the focus.

Describe Preferred Solution

The IonRadio, IonCheckbox, IonItem, and IonButton components should have a setFocus interface available on their refs. Calling setFocus on the ref would apply focus to the native element wrapped by that component.

Describe Alternatives

Currently the only workaround we've come up with is to use native HTML elements in place of Ionic components, but doing so requires also implementing custom styles for the native elements.

Related Code

I think this is understandable without a code example, but let me know if any supporting code would be helpful to see.

Additional Context

[liamdebeasi]

Thanks for the issue. Can you please describe your use case? All components have the native focus method provided that you should be able to use. The only reason we have setFocus on input is because we need to pass focus to inner elements.

[triptate]

The way I understand it, calling focus() directly on these ionic wrapping elements will not work because they are not in the tabindex and not focusable directly. they all wrap native button elements in the shadow dom and need an interface to apply focus to that underlying element.

In our use case, we are using an IonModal with an IonSearchbar in the header, and the content populates with IonRadio elements which are selectable options for the text you are searching. We are looking to manage focus on the IonRadio elements using the keyboard (i.e. hitting the up and down arrow keys will cycle focus through the IonRadio elements). We have also tried using IonItem elements instead of IonRadio elements. In practice, attempting to apply focus using the native focus method does not apply focus as hoped.

[liamdebeasi]

Thanks for the follow up. We intentionally do not set tabindex on these components so as to not interfere with your app's tab ordering. That being said, you should be able to set tabindex yourself.

Here is a CodePen example I made: https://codepen.io/liamdebeasi/pen/eYJOWQv

Does this work for your use case?

[triptate]

Thanks @liamdebeasi, this does indeed work for radios, and solves our use case. However, in a previous iteration of our attempts at solving the problem, I tried this approach on an IonItem that had the button prop. In that case, adding the IonItem to the tabindex and setting focus on it works, but there is still a native button in the shadow dom that can also receive focus, so you'd end up focusing this element twice when tabbing through the page: once for the wrapper item and once for the underlying button element. The same is true of an actual IonButton. While we don't need this for our particular use case right now, it may still be worth considering adding the setFocus method to the IonButton component and to IonItem components that act as buttons, unless there's a workaround on those that I'm missing.

Thanks again!

[liamdebeasi]

Can you provide a code sample of what you are trying to do regarding IonButton/IonItem?