fix(cdk/a11y): visually hidden element affecting scrolling

[crisbeto]

We had a position: absolute on the visually-hidden element, but it didn't have an actual position which can cause unnecessary scrolling in some cases.

Fixes #24597.

[crisbeto]

Caretaker note: we should keep an eye out for any scrollbar changes in screenshot tests.

[andrewseguin]

This impacted a single screenshot but it seems to indicate an edge case where the visually hidden element is in an overflow: auto element. I think that this should be left: 1px to offset the margin: -1px, otherwise it attempts to escape the parent container.

[crisbeto]

Overflows on the left shouldn't affect the scrollbar though.

[andrewseguin]

Normally yes, but in RTL it will: https://stackblitz.com/edit/web-platform-5zqxay?file=index.html

Just learned this myself. The test itself was testing RTL mode

[crisbeto]

Ah, that makes sense. I've changed it to left: 1px.

[andrewseguin]

Turns out that caused about a dozen applications to fail due to screenshot failures showing the scrollbar changing. I locally debugged them and it did seem to be making it worse.

If we go back to the original left: 0, we can fix that one test with:

@mixin a11y-visually-hidden() {
    ...
    left: 0;

    [dir=rtl] & {
      left: auto;
      right: 0;
    }
}

[crisbeto]

Changed again.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}