search

kontenta / kontour

Admin page manager for Laravel
2 stars 1 forks source link

Change sr-only utility CSS #171

Closed bjuppa closed 4 years ago

bjuppa commented 4 years ago

This PR makes the screenreader-only CSS utilities behave super nice in all modern browsers, but as a downside drops support for IE and pre-chromium Edge.

However, the only effect in those old browsers is that the content is always visible. So every use-case should be functionally working, although sometimes it may look visually wonky.

The benefits are that in modern browsers the content is now visible again after any keyboard action that moves focus to the element itself or any other focusable element within the hidden element. (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.)

Also, 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.

This is a breaking change as the old .sr-only-focusable utility class is removed. It's functionality is now baked into .sr-only.

bjuppa commented 4 years ago

I came up with a better idea in #172 so closing this one!