This PR is a new take on "fixing" the screenreader utilities by improving upon the previously existing .sr-only and .sr-only-focusable classes instead of removing anything.
So this is not a breaking change any more 😄 and I've closed the old PR without merging.
With this .sr-only can be used as before for visually hiding content, but now making it focusable if it's on an interactive element, like an <a> tag. So no need to always use .sr-only-focusable for single focusable elements, they all work with .sr-only.
The utility has been updated to use the clip-path property which is the preferred way to hide content in modern browsers.
Now any style can be applied to the previously hidden element when it becomes visible: padding, borders, size, positioning without need to add additional CSS fighting the utility. When the utility is off it is now very off, it has no effect whatsoever. Before it had residual effects when using .sr-only-focusable (and before .sr-only could not be used at all for interactive elements).
Then .sr-only-focusable can be used for hiding a container element until any of it's descendants is focused. But this only works in modern browsers. A use case for this would be to create a menu of many jump-to-section links, that are all hidden and displayed together whenever any of the links in the section has focus.
This PR also updates the positioning of the skip-to-content link, making it stick with a little offset to the top of the viewport.
This PR is a new take on "fixing" the screenreader utilities by improving upon the previously existing
.sr-onlyand.sr-only-focusableclasses instead of removing anything.So this is not a breaking change any more 😄 and I've closed the old PR without merging.
With this
.sr-onlycan be used as before for visually hiding content, but now making it focusable if it's on an interactive element, like an<a>tag. So no need to always use.sr-only-focusablefor single focusable elements, they all work with.sr-only.The utility has been updated to use the
clip-pathproperty which is the preferred way to hide content in modern browsers.Now any style can be applied to the previously hidden element when it becomes visible: padding, borders, size, positioning without need to add additional CSS fighting the utility. When the utility is off it is now very off, it has no effect whatsoever. Before it had residual effects when using
.sr-only-focusable(and before.sr-onlycould not be used at all for interactive elements).See https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html#hiding-content-visually
Then
.sr-only-focusablecan be used for hiding a container element until any of it's descendants is focused. But this only works in modern browsers. A use case for this would be to create a menu of many jump-to-section links, that are all hidden and displayed together whenever any of the links in the section has focus.This PR also updates the positioning of the skip-to-content link, making it stick with a little offset to the top of the viewport.
Closes #141