[IOAPPX-403] Action in banner is not announced by screen reader on Android

[RiccardoMolinari95]

Short description

This PR resolves an accessibility issue where the action in the Banner component was not properly announced by Screen Readers on Android devices. The changes introduced propose a solution while ensuring that existing functionality remains unaffected

List of changes proposed in this pull request

• Introduced fallbackAccessibilityLabel, a dynamically generated label combining the title, content, and action if they are present.
• If accessibilityLabel is not provided, fallbackAccessibilityLabel is used as a default

How to test

To test the changes, import the updated library containing the modifications into the IO app and ensure that the Screen Reader announces the title, content, and action accurately, even when one of these elements is missing.

Warning: This solution has been tested on an Android device and on an iOS simulator. Remains to be tested on iOS device

[dmnplb]

Hi @RiccardoMolinari95,
I read the description, but something doesn't click in my brain.
First of all, two things:

• renderMainBlock is used in both the static and interactive versions, but from what I can see we're also editing the behaviour of the static one
• Why can't we generate the complete accessibility label by checking if action is present?

Assuming I'm right, this is what I'm proposing:

• Remove the actionAccessibility prop by dynamically generating the fallback accessibilityLabel based on the presence/absence of the action prop
• Rename completeAccessibilityLabel to fallbackAccessibilityLabel
• Change the statement in the renderMainBlock to accessibilityLabel ?? fallbackAccessibilityLabel, so that if we don't provide a valid accessibilityLabel, the component will use the generated fallback.

What do you think?

[RiccardoMolinari95]

Hi @RiccardoMolinari95, I read the description, but something doesn't click in my brain. First of all, two things:

• renderMainBlock is used in both the static and interactive versions, but from what I can see we're also editing the behaviour of the static one
• Why can't we generate the complete accessibility label by checking if action is present?

Assuming I'm right, this is what I'm proposing:

• Remove the actionAccessibility prop by dynamically generating the fallback accessibilityLabel based on the presence/absence of the action prop
• Rename completeAccessibilityLabel to fallbackAccessibilityLabel
• Change the statement in the renderMainBlock to accessibilityLabel ?? fallbackAccessibilityLabel, so that if we don't provide a valid accessibilityLabel, the component will use the generated fallback.

What do you think?

Hi @dmnplb, yes you’re right! Removing actionAccessibility and using fallbackAccessibilityLabel does make the flow smoother and simplifies managing the accessibility label. Thanks