sr-only visually clips an element while keeping it in the accessibility tree.
sr-visible restores its positioning, size, clipping and wrapping. These classes
do not supply accessible names or hide content from assistive technology.
<button class="btn look-ring@focus-visible" type="button">
<span class="sr-only">Open settings</span>
<span aria-hidden="true">⚙</span>
</button>TeaCSS 0.8.1 places focus treatments in the Look commons.
Apply look-ring@focus-visible to the focus owner, or use
look-ring@[&:has(>:is(input,textarea,select):focus-visible)] on a wrapper whose
native field is a direct child. Choose one focus treatment and leave enough room
for its outline. Check keyboard focus in both appearances and forced colors.