Fix visually hidden elements still appearing as a 1px item in Firefox

hashicorp / structure

Structure (aka "PDS") [deprecated]

https://hashicorp-structure.vercel.app

Mozilla Public License 2.0

24 stars 5 forks source link

Fix visually hidden elements still appearing as a 1px item in Firefox #68

Closed gregone closed 3 years ago

gregone commented 3 years ago

While working on https://github.com/hashicorp/waypoint/pull/1057, Rae found a bug in Firefox with the hidden radio field input being visible (in addition to the facade). This was even more obvious in dark mode because of the element's contrast.

This is using clip on the visuallyHidden mixin, which seems to be a very common way to keep the element accessible (and it's even used in bootstrap: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss#L15), but I would welcome feedback on that.

before:

after:

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hashicorp/structure/7PxHMmkotw36qqxwqfE5EdzM8u6W
✅ Preview: https://structure-git-fix-radiofield-ff-bug-hashicorp.vercel.app

meirish commented 3 years ago

Huh I would've thought taking it out of the document flow would mean it didn't do this (with the absolute positioning). Is this the screenshot: https://github.com/hashicorp/waypoint/pull/1057#issuecomment-804209670 ?

gregone commented 3 years ago

@meirish yeah, I just added the screenshots here too