Brand Context visually hidden mixin has browser scroll issue

[benjclark]

Further to #823 (comment)

I have noticed that the existing u-visually-hidden mixin has an issue whereby if you tab through the content of a page and tab onto an element that has those styles, the browser scrolls to the top of the page. Presumably this is because that is effectively where the element is located (out of view) with that styling applied.

Global Forms and Global Ratings Survey have not used the mixin and instead use this technique:

clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;

which achieves the same thing but does not have the same scroll issue upon tab.

It feels to me like we should:

1. Investigate the issue I described with the current visually-hidden mixin
2. Assess whether we should replace the existing mixin code with the code above
3. (if and when we update the mixin) Update components that use the new technique to use @include u-visually-hidden instead

For a demonstration of this issue, edit the Global Forms component Sass locally to use the mixin and generate the demo html. Then tab through the demo page until you reach the radio inputs.

[sturobson]

There has been no update on this issue for 30 days. It is now marked as "stale". If you think this issue is still relevant and needs attention then reply with an update. If there is no update in 14 days, this issue will be closed.