fix(global): positioned sr-only class to top/left 0 to avoid overflow - #3319
Conversation
|
Preview: https://patternfly-pr-3319.surge.sh
A11y report: https://patternfly-pr-3319-coverage.surge.sh |
jessiehuff
left a comment
jessiehuff
left a comment
There was a problem hiding this comment.
Interesting find @mcoker!! 🙂
So the only thing we should keep in mind when positioning elements when it comes to screen readers is that screen readers typically follow the order of the DOM/HTML structure when reading a document. When CSS is used to position content, the content that appears on the screen could potentially appear to be in a different order from what appears in the code. So for example, if you positioned text to be in the top left, but that div is the last element in the HTML structure, that would be very confusing for screen reader users. Here's an article that explains it further.
However, in this case, I don't see it affecting the order. It seems that we're just positioning the text to its container so I don't imagine it'd have an effect on screen reader users. I also don't mind this being a general fix because if it was having unexpected side effects with notification drawer, I could see it having unexpected side effects down the road with something else.
LGTM! 😄
5 participants
fixes #3318
This fixes a problem found in the notification drawer. One option to fix that is to just apply this change in the notification drawer. That said, a lot of the sr-only classes use positioning like
top: -9999px; left: -9999px;or some variant of that, so it doesn't seem like the positioning plays a role in how the content is read. https://webaim.org/techniques/css/invisiblecontent/This will simply contain the element within the bounding box of its closest ancestor with a coordinate system instead of placing it wherever it is in the document flow, which triggers this bug in chrome.