fix(ScreenReaderOnly): Fix ScreenReaderOnly positioning to avoid scrolling issues #942
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit ec771ca. |
| @@ -14,5 +14,8 @@ export const screenReaderOnly = style([ | |||
| height: 1, | |||
| clip: 'rect(0, 0, 0, 0)', | |||
| userSelect: 'none', | |||
| // move the element out of the screen to avoid scrolling issues. See https://github.com/Telefonica/mistica-web/pull/942 | |||
There was a problem hiding this comment.
I'm curious if this doesn't affect other css tools like tailwind, reach-ui, etc:
https://tailwindcss.com/docs/screen-readers
https://github.com/reach/reach-ui/blob/main/packages/visually-hidden/src/reach-visually-hidden.tsx#L29-L42
There was a problem hiding this comment.
can be reproduced using tailwind: https://codepen.io/pladaria/pen/KKJyXjR
|
🎉 This PR is included in version 14.32.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
https://jira.tid.es/browse/WEB-2061 By default, the browser will read text content inside rows one by one (title, description, etc). With the changes in this PR, if an aria-label is provided to the informative row, the whole row will be read as a single text (the one provided in the aria-label prop) This PR also fixes https://jira.tid.es/browse/WEB-1885 which is a basically revert of #942. As part of this PR we allow passing custom styles (via `className` prop) to `ScreenReaderOnly` to workaround possible style issues found (like the one described originally in #942).
Before (note the extra scrollbar):
After (fixed):
