Should the datepicker's close button be using .cdk-visually-hidden?

[SuphalAthlur]

trafficstars

          can this just be .cdk-visually-hidden instead?

Originally posted by @mmalerba in https://github.com/angular/components/pull/20666#discussion_r497775913

Ideally, anything that is not visible on the screen should not be announced to screen readers. But .cdk-visually-hidden keeps it accessible to screen readers which can disorient the users. Should this be the way it is done?

[crisbeto]

Yes, this is meant to function similarly to the "Skip to content" links in some pages. When focus lands on the button, it'll become visible. Also the button is meant as a fallback, the datepicker has the ability to close using the escape key as well.

[SuphalAthlur]

Right, I understand. But currently the issue is that even when the button is not visible, it is read out by the screen reader which seems inconsistent. Attaching a screenshot of NVDA screen reader reading out the button in NVDA+browse mode (despite it being visually hidden and not focused)

As a fix suggestion - perhaps an attribute like .aria-hidden can be toggled along with .cdk-visually-hidden to keep the behaviour consistent for both screen reader users and visual users?

[crisbeto]

I think that having aria-hidden elements which can receive focus is also problematic. Somewhat related issue https://github.com/angular/components/issues/29545

[SuphalAthlur]

When they receive focus, can we not set .aria-hidden to false, just the way .cdk-visually-hidden is being handled? Is the concern that it might result in race conditions if aria-hidden is being toggled while the screen reader is capturing the content to be read out simultaneously?

[SuphalAthlur]

@crisbeto Could we perhaps mark this as an open issue and then explore the possible fix? As visible in the screenshot attached in this thread, the issue is: Calendar close button is read out by screen reader in browse mode despite it being visually hidden making the behavior inconsistent

[crisbeto]

We just talked through it in the meeting and concluded that this is working as expected. Even though it's invisible to sighted users, it is still valid for it to show up in browse mode because the button is still in the tab order.

[angular-automatic-lock-bot[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.}