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?
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
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?
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
thanks for the explaination!