Comments (4)
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
If I can better understand what your styling needs are, I can better determine if that approach makes sense here.
Thanks!
from ionic-framework.
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.
from ionic-framework.
@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
from ionic-framework.
@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 👍
from ionic-framework.
Related Issues (20)
- bug: input blurring utility causes non input and textarea elements to be blurred HOT 4
- bug: IonAert button get empty value from input HOT 4
- bug: ion-textarea Text Selection Not Persisting on Safari HOT 4
- IOS 17.4 will stop supporting PWA for Europe HOT 2
- feat: Webhook test - ignore HOT 1
- bug: item-sliding animation jumps when using multi touch HOT 1
- bug: ion-infinite-scroll can't be re-enabled after updating to Ionic 7 HOT 3
- bug: iOS Tablet: ion-tab-bar Remains Hidden After Keyboard Dismissal Following Device Orientation Change HOT 2
- bug:tabbar show wrong actived tab when click tab fast HOT 2
- bug: ion-datetime does not correctly show time inside the picker with a field that has a default date HOT 2
- bug: ion-datetime not accepting initial values across months when using with multiple option HOT 2
- bug: I need a double click to display a string in console.log using Ionic + React HOT 3
- feat: Helper & Error Text slot support in inputs HOT 9
- bug: Error from IonReactRouter when upgrading to v7 HOT 4
- bug: An error occurred while running subprocess npm. ( npm i exited with exit code 1 ). HOT 5
- bug: iOS "Go" Button Does Not Trigger `search` Event in `ion-searchbar` HOT 3
- bug: Properties ionNavWillChange and ionNavDidChange do not exist on IonNav HOT 5
- feat: improved `aria-label` for the searchbar's clear button, or a way for consuming apps to customize this value
- bug: max value changes when selecting the 31st and changing the month through the wheel HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-framework.