netnet's face was off in searchbar in firefox on mac.
im fixing this by using our face svgs -- had to get a little bit hacky with it as to not bloat the js-markup (didn't want to put them inline) and also be able to change fill color as needed. to do this, i'm using the svgs as a mask in css and then setting the background-color of the face element to var(--netizen-meta).
additionally, i changed netnet's face into a <label> to better inform the neighboring <input> element. the descriptive text inside the label takes a class .screen-reader-only to make it invisible unless using a screen reader.
netnet's face was off in searchbar in firefox on mac.
im fixing this by using our face svgs -- had to get a little bit hacky with it as to not bloat the js-markup (didn't want to put them inline) and also be able to change fill color as needed. to do this, i'm using the svgs as a mask in css and then setting the
background-color
of the face element tovar(--netizen-meta)
.additionally, i changed netnet's face into a
<label>
to better inform the neighboring<input>
element. the descriptive text inside the label takes a class.screen-reader-only
to make it invisible unless using a screen reader.