Implement :focus-within from Selectors 4
Tons of UIs include elements that are not visible unless the user interacts with their parent or ancestor. Think popup menus, delete or edit buttons, floating formatting toolbars, copy buttons, editing popups and so on. The list is endless. This is a good way to reduce visual clutter.
Selectors 4 fixes this by introducing :focus-within, which will work just like :hover in the sense that it will also apply to ancestors. This will make it trivial to make the UIs described above keyboard accessible.
Brandon Brown commented
Ya, this is huge for Accessibility when you need to make overlays accessible on keyboard focus and not just hover.
Finally, it has a status page:
Thomas Darling commented
Just get this done already!
The suggestion for this much needed feature has been sitting here for 2 years now, every other major browser supports it, and it's not even on your backlog yet...
You really need to allocate more resources to all those little features we all need, instead of focussing so much on the big ones that take forever to deliver.
Mike herchel commented
Azure Dan commented
This feature would be very helpful in implementing accessibility within the browser
Bill G commented
Why doesn't Edge have this yet? We need this, it's a no-brainer!
Edge is the last one missing in almost all amazing new features.
Why don't you just kill Edge and left the people choose a browser in Windows and sites will be easier for developer and faster and more beautiful for users.
Michael Maaß commented
We are all just temporarily not disabled.
Hurry the F-up!
Jiří Thiemel commented
Really important one. Plus the whole logic of this is so simple it can be described in one sentence (even in the spec). There is nothing to discuss and should be easy to implement without any worries. I understand that implementing web components and similar things takes a lot of time. But this is a different story.
S. M. Abdul Aziz commented
it should have in Edge 17, frustrated to not have it in this modern version of edge.. 😒😒
Dean Ashworth commented
This is a no brainer for A11y.
Shout out to Una!... https://css-tricks.com/solved-with-css-dropdown-menus/
Working on a CSS-only accessible accordion menu in the context of a government CMS where I can't just add a script tag and need to make things readable without a stylesheet, progress halted by this issue :(
Jesse Beach commented
+1, this would simplify so many keyboard interactions and workarounds to apply styles to ancestors when a child element has focus.
Enabled by default in Chrome 60: https://www.chromestatus.com/feature/5363834508279808
Edge is the last one missing: https://caniuse.com/#feat=css-focus-within
Chris Rebert commented
Implemented in Firefox 52: https://bugzilla.mozilla.org/show_bug.cgi?id=1176997
Chris Rebert commented
Implemented in Safari Technology Preview 8: