How can we improve the Microsoft Edge developer experience?

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.
However, this is often done in an inaccessible way, just by using :hover, because making it accessible requires JS, since :focus does not apply to ancestors. However, 1 in 2 people writing HTML/CSS are not comfortable with JavaScript so keyboard accessibility (and usability, as many of us are keyboard users by choice) goes out of the window.
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.

[1]: https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo

409 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Lea Verou shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    3 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...

      Feedback and Knowledge Base