bug: ion-toggle focus-visible doesnt work about ionic-framework

[sean-perkins]

Hello @FabianGutierrezOpengov thanks for reporting this.

Can you share more about the desired styling you are trying to accomplish?

:focus-visible is only applied when the element is the element that receives focus. In the case of web components, that can be an element within the shadow dom. This means applying :focus-visible on the host element, will not apply. This can be illustrated in this codepen: https://codepen.io/sean-perkins/pen/PoLrbXY. When tabbing to the button, the inner styles that target the element that receives focus is applied, however the styles on the component host are not.

ion-item is currently using an option to delegate focus from the content inside the shadow dom to the host element:

ionic-framework/core/src/components/item/item.tsx

Lines 35 to 37 in e440051

	shadow: {
	delegatesFocus: true,
	},

If I can better understand what your styling needs are, I can better determine if that approach makes sense here.

Thanks!

[sean-perkins]

Hello @FabianGutierrezOpengov, I followed up with the team further. I believe the ion-focusable class is what you are requiring.

<style>
ion-toggle.ion-focused {
  background-color: red;
}
</style>
<ion-toggle class="ion-focusable">Default Toggle</ion-toggle>

Demo: https://stackblitz.com/edit/ionic-ion-toggle-focus-isse-udrveu?file=index.html,theme%2Fvariables.css

By adding ion-focusable to the element, you can then use the .ion-focused selector instead of :focus-visible.

Let me know if this resolves your problem.

[FabianGutierrezOpengov]

@sean-perkins that seems to work wonderfully. thanks. now Im embarrased because I didnt see this helper before

I'd like request/suggest a change/improvement in documentation, after some investigation of what you mention I noticed that ion-focusable is documented here: https://ionic.io/docs/accessibility/keyboard but trying to google it with keywords like ion-focusable and ion-focused leads me usually yo this page https://ionicframework.com/docs/developing/managing-focus which is unrelated?

and now im confused because I see docs under a ionicframework.com and ionic.io? 👀 😅

Would be good if ion toggle provides a example of this helper class in their main documentation here https://ionicframework.com/docs/api/toggle at the accessibility section and/or explaining the ion-focusable utility under their own heading so SEO can do their job properly.

T

[sean-perkins]

@FabianGutierrezOpengov great call out! I also was not clear on where the information was located and search results directed me to the same page without the information.

I'll update the documentation and cross link where possible 👍