Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
Per the Angular Material Icon Guide, "Indicator" icons should include a span.cdk-visually-hidden element as a sibling to the mat-icon to ensure the indication is communicated via screen readers.
When using this technique within an Angular Material Table, it's having an effect on the browser's scroll behavior. In my replication, you'll see that the CSS is styled to fill the vertical viewport with the "page component". Within the page, there is a fixed-height table that has enough rows to necessitate a scroll bar.
Given the above layout, when the span.cdk-visually-hidden is included in a td, an extra scrollbar is added to the page. In my testing, I've only observed this behavior on Chrome (98.0.4758.102 ) and Edge (99.0.1150.39). Firefox (98.0.1) does not exhibit this behavior.
Reproduction
Steps to reproduce:
- In a Chromium-based browser, open this Stackblitz, which was forked from the Material docs
- Toggle the flag that adds/removes the
span.cdk-visually-hidden, and an extra scrollbar will be added/removed from the app
Expected Behavior
I would expect that the CDK's cdk-visually-hidden CSS class does not affect the scroll structure of the page. I would also expect the behavior of the CSS utility to be the same across browsers.
Actual Behavior
On Chromium Based browsers, the cdk-visually-hidden CSS utility can affect scroll behavior. On Firefox, the CSS class does not affect scroll behavior, and the inconsistent behavior can be confusing. I do not have access to Safari to test the behavior there.
Environment
- Angular:
~13.0.0 - CDK/Material:
~13.0.0 - Browser(s): Chrome 98, Edge 99
- Operating System (e.g. Windows, macOS, Ubuntu): Windows and Ubuntu