Input with text suffix: VoiceOver reads suffix even though aria-hidden is present

[JoviGriske]

Prerequisites

• I have checked the open Issues to see if this has already been raised
• I have searched the closed Issues to see if a similar bug has been fixed in the past

Description

This bug affects:

• GitHub workflows
• Component
• Config
• Performance
• Tooling / Frameworks
• Documentation
• Something else

Steps to Reproduce

1. In Safari, open up Canopy component: Input with text suffix
2. Start VO
3. Tab into the input field with the text suffix

Expected behaviour:

'%' is not announced due to aria-hidden

Actual behaviour:

'%' is announced even though aria-hidden is present

Recurrence frequency:

• Occurs every time
• Occurs intermittently
• Unsure

Package version

• This problem started happening recently
• This problem started happening a while ago
• Unsure

Configuration and environment

• This pertains to local development
• This pertains to the CI
• This pertains to Storybook

Additional Information

Working example can be found here: https://designsystem.digital.gov/components/input-prefix-suffix/

Canopy Input with text suffix:

[elenagarrone]

Hey @JoviGriske 👋
Thanks for creating the issue 👍

Just to recap, from the link you shared, the behaviour should be:

So we need to change the code so that the suffixes and prefixes have an aria-hidden attribute.

I would think this will be a breaking change as applications will have to update their form labels to add a more descriptive label.

[st3fun1]

Hey @elenagarrone,

as you said, we have to add an aria-hidden attribute directly on the directives using @HostBinding or some other approach. The underlying issue is that the directive is slotting in the content in its template and, even if you add aria-hidden="true" to that content, the screen reader doesn't take it into account, and it still reads the content.

[elenagarrone]

Added a discussion for possible solution: #1082

[pauleustice]

@AndreiRosu To pick up again and catch up on what needs doing for this