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.


2,175 votes
Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
You have left! (?) (thinking…)
Lea Verou shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
  • Brian commented  ·   ·  Flag as inappropriate

    Why is this still missing? Will this be fixed with the upcoming switch to chromium?

  • 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