wildcard: Fix missing caret in textarea on Firefox
Created by: fkling
Fixes #34887 (closed)
The Firefox specific styles cause the caret to be transparent in textareas. The comment seems to suggest that this isn't actually intended to be used with textareas, but maybe I'm not understanding it properly. I also inspected our custom and native select components and those styles don't even seem to be applied to them.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring
Before:
https://user-images.githubusercontent.com/179026/166668453-1a917d6c-d3e5-405f-afac-377f0d0ca215.mp4
After:
https://user-images.githubusercontent.com/179026/166668405-87224865-9b27-4787-8b15-4394e317229f.mp4
Note: If anybody is confused what these rules actually did: They made the text (including the caret in textareas) transparent and then made the text visible again by rendering its shadow only...
Test plan
Ran storybook locally, navigated to http://localhost:9001/?path=/story/wildcard-textarea--text-area-examples and verified that the caret is visible.
I also took a before and after screenshot and ran them through imagemagick to find differences. I couldn't find any relevant differences.
App preview:
Check out the client app preview documentation to learn more.