• sacbuntchris@lemmy.world
    link
    fedilink
    English
    arrow-up
    24
    ·
    7 months ago

    Interestingly, focus states are used in accessibility. So while this code isn’t to cure cancer, it likely does improve the lives of those with different needs.

    • Skullgrid@lemmy.world
      link
      fedilink
      arrow-up
      5
      ·
      7 months ago

      it’s starting to make sense, what exactly does the meme want me to do about focus states so it can be read properly by screen reader software/used by keyboard navigation?

      • Strawberry@lemmy.blahaj.zoneOP
        link
        fedilink
        arrow-up
        17
        ·
        edit-2
        7 months ago

        CSS has a pseudo-class, :focus-visible, that matches when an element is focused using keyboard navigation. It also has :focus-within, which matches when the current focused element is the selected element or one of its descendents. However, this applies not only for keyboard navigation but also mouse and tap focus. A pseudo-class that combines the two, :focus-visible-within, would be useful, but does not currently exist. Here’s an article about it: https://larsmagnus.co/blog/focus-visible-within-the-missing-pseudo-class

        The code in the meme implements the logic of :focus-visible-within using the new :has() functional pseudo-class, and has a snippet of fallback behavior for slightly older browsers