Fix page overflow caused by highlights close to borders
Highlights contains two pseudo-elements (`::before` and `::after`) with text for assistive technologies. Because these elements have dimensions, on RTL languages a highlight near the right border of the document, makes the `::after` pseudo-element to overflow the page to the right. Based on similar classes from other popular CSS frameworks, I made these pseudo-elements to have 1 x 1px dimensions. This does not affect negatively the screen readers. Example: - Bootstrap: https://github.com/twbs/bootstrap/blob/c2f67d72e8010307f657b2a55ae93fc5c9cab2a5/scss/mixins/_visually-hidden.scss#L9-L17 - Foundation: https://github.com/foundation/foundation-sites/blob/258d9eb3432d7e497f41b4554f4116d5c59c92a8/scss/util/_mixins.scss#L217-L224 Closes #2811
Showing
Please register or sign in to comment