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.

[–] Strawberry@lemmy.blahaj.zone 10 points 7 months ago* (last edited 7 months ago)

bingo, i made this meme while doing accessibility improvements at work

[–] Skullgrid@lemmy.world 5 points 7 months ago (1 children)

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.zone 17 points 7 months ago* (last edited 7 months ago) (1 children)

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

[–] Skullgrid@lemmy.world 2 points 7 months ago

thanks for the explaination!