VisuallyHidden

Sometimes there is a need to hide some text visually but keep it accessible for screen readers. This usually happens for some visual elements like symbols or icons. Because visually it makes sense for a user but completely unaccessible for readers.

<Spacings.Inset>
  <Spacings.Inline scale="tiny">
    <span>Fruits</span>
    <span aria-hidden="true"> & </span>
    <VisuallyHidden>and</VisuallyHidden>
    <span>Vegetables</span>
  </Spacings.Inline>
</Spacings.Inset>

Following that method all regular users will see Fruits & Vegetables but screen reader users will hear Fruits and Vegetables