Wednesday, June 26, 2019

CSS :focus-within

Using :hover to display additional information or elements is a very useful technique but a big drawback to using the hover pseudo-class is that they are usually not accessibility-friendly. Not everyone uses a mouse and some users have visual impairments, so they rely on screen readers or the keyboard — two functionality that don’t technically hover.

Luckily the CSS spec gives us a gift to pair with :hover: :focus-within. With :focus-within developers can modify styles of elements when an element or its parent has keyboard focus!

Consider the following HTML template with default CSS styling:

<ul id="sports"> <li> <label> <input type="checkbox" name="sports[]"> Soccer <button class="remove">Remove</button> </label> <!-- ... --> </li>

#sports .remove display: none;
#sports li:hover .remove display: inline-block;

With the code above, hovering over a list item would show the “remove” button. That’s great for mouse users but totally useless for keyboard users. Let’s fix that using :focus-within:

#sports .remove display: none;
#sports li:hover .remove,
#sports li:focus-within .remove display: inline-block;

Once focus hits the checkbox, the focus is technically within the list item and thus we can employ :focus-within to show the “remove” button.

Accessibility is something that gets considered last but shouldn’t be an afterthought; in a way, :focus-within is a useful ally even when accessibility was an afterthought. Even when considering accessibility up front, :focus-within should be in every developer’s toolbox!

  • fetch API

    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn’t really made for what we’ve been using it for.  We’ve done well to create elegant APIs around XHR but we know we can do better.  Our effort to…

  • Regular Expressions for the Rest of Us

    Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…

  • MooTools: Set Style Per Media

    MooTools: Set Style Per Media

    I’d bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools’ setStyle() method is that it sets the specific style for all medias.

  • New MooTools Plugin: ElementFilter

    New MooTools Plugin: ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I’ve used a list for this example…


No comments:

Post a Comment