-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
content: document focusable classes and usage #3557
Comments
Hello @FabianGutierrezOpengov thanks for reporting this. Can you share more about the desired styling you are trying to accomplish?
If I can better understand what your styling needs are, I can better determine if that approach makes sense here. Thanks! |
Hello @FabianGutierrezOpengov, I followed up with the team further. I believe the <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 Let me know if this resolves your problem. |
@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: and now im confused because I see docs under a 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 T |
@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 👍 |
Prerequisites
Ionic Framework Version
v6.x, v7.x
Current Behavior
.ion-focused nor :focus-visible selector is working for ion-toggle component and toggle/labels combo.
There are workarounds for this but not optimal
Expected Behavior
Steps to Reproduce
Code Reproduction URL
https://stackblitz.com/edit/ionic-ion-toggle-focus-isse
Ionic Info
Ionic:
Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 6.2.7
@angular-devkit/build-angular : 17.1.1
@angular-devkit/schematics : 17.1.1
@angular/cli : 17.1.1
@ionic/angular-toolkit : 7.0.0
Capacitor:
Capacitor CLI : 5.2.3
@capacitor/android : 5.2.3
@capacitor/core : 5.2.3
@capacitor/ios : 5.2.3
Utility:
cordova-res : not installed globally
native-run : 1.7.4
System:
NodeJS : v20.11.0 (C:\Program Files\nodejs\node.exe)
npm : 10.2.4
OS : Windows 10
Additional Information
No response
The text was updated successfully, but these errors were encountered: