Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Nov 6, 2024
8 changes: 6 additions & 2 deletions src/components/banner/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export const Banner = ({
onClose,
accessibilityHint,
accessibilityLabel,
testID
testID,
}: Banner) => {
const isPressed: Animated.SharedValue<number> = useSharedValue(0);

Expand Down Expand Up @@ -195,13 +195,17 @@ export const Banner = ({
isPressed.value = 0;
}, [isPressed]);

/* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
if they are present. */
const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");

const renderMainBlock = () => (
<>
<View
style={[IOStyles.flex, IOStyles.selfCenter]}
accessible={true}
// A11y related props
accessibilityLabel={accessibilityLabel}
accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole={action !== undefined ? "button" : undefined}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
}
>
<View
accessibilityLabel="Action text"
accessibilityRole="button"
accessible={true}
style={
Expand Down Expand Up @@ -407,6 +408,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
}
>
<View
accessibilityLabel="Action text"
accessibilityRole="button"
accessible={true}
style={
Expand Down
2 changes: 2 additions & 0 deletions src/components/banner/__test__/banner.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ describe("Test Banner Components", () => {
pictogramName="charity"
action="Action text"
onPress={onLinkPress}
accessibilityLabel="Action text"
/>
).toJSON();
expect(advice).toMatchSnapshot();
Expand All @@ -34,6 +35,7 @@ describe("Test Banner Components - Experimental Enabled", () => {
pictogramName="charity"
action="Action text"
onPress={onLinkPress}
accessibilityLabel="Action text"
/>
).toJSON();
expect(advice).toMatchSnapshot();
Expand Down
Loading