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

2,042 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 →

    26 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Derek Jordan commented  ·   ·  Flag as inappropriate

        Accessibility is an imperative in web development, and has been for at least 2 years already. Why is IE still missing this?
        What is "Edge" the edge of, exactly? Does "edge" refer to the remote reaches of established web development where the denizens are still relying on dialup?

      • Anonymous commented  ·   ·  Flag as inappropriate

        Please incorporate. It's not discomfort coding with js but rather the idea that users disable js for their own reasons and a website should not sacrifice accessibility in those cases.

      • L. Reece commented  ·   ·  Flag as inappropriate

        We need this to be able to make focusable items WITHIN hidden areas keyboard accessible (by keeping the hidden area from dropping off when losing focus by going inside it). This is a no-brainer. This should've been implemented YEARS ago.

      • Brandon Brown commented  ·   ·  Flag as inappropriate

        Ya, this is huge for Accessibility when you need to make overlays accessible on keyboard focus and not just hover.

      • Thomas Darling commented  ·   ·  Flag as inappropriate

        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.

      • Anonymous commented  ·   ·  Flag as inappropriate

        Not only is this not supported, I have a navigation menu that open/closes on button click using javascript, when I add #nav-menu:focus-within {-webkit-transform: translateX(0);transform: translateX(0);} as a fallback for when user tabs anchors within element#nav-menu Edge completely ignores the fact that it does not support :focus-within and the CSS within the statement is ignored even though it is a class appended with javascript. God help us all....

      • Azure Dan commented  ·   ·  Flag as inappropriate

        This feature would be very helpful in implementing accessibility within the browser

      • Martin commented  ·   ·  Flag as inappropriate

        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.

      • Jiří Thiemel commented  ·   ·  Flag as inappropriate

        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.

      ← Previous 1

      Feedback and Knowledge Base