Screen-reader-only utilities

[jguddas]

Use case 1 (Basic labeling)

Currently reads out ['$279.97', '$350', '20% off']

Solution using tailwindcss

Reads out ['$279.97', 'Used to be $350', '20% off']

  <span>$279.97</span>
- <span>$350</span>
+ <span>
+   <span className="sr-only">Used to be $350</span>
+   <span aria-hidden>$350</span>
+ </span>
  <span>20% off</span>

Use case 2 (Multilingual components)

Using aria will commonly result in the label being read out in the wrong voice.

https://uxdesign.cc/the-troubled-state-of-screen-readers-in-multilingual-situations-f6a9da4ecdf3

Solution using tailwindcss

- <button aria-label="Submit">
-   <Icon name="submit"/>
+ <button>
+   <span className="sr-only">Submit</spant>
+   <span aria-hidden><Icon name="submit"/></span>
  </button>