Skip to content

Commit

Permalink
[IOPLT-195] Fixes the accessibility issue preventing to intercept the…
Browse files Browse the repository at this point in the history
… closing button on banner (#109)

## Short description
This PR aims to fix the accessibility on the Banner component

## List of changes proposed in this pull request
- Changes the accessibility attributes on Banner component

## How to test
Check how voiceover intercepts each element of a banner

---------

Co-authored-by: Damiano Plebani <[email protected]>
CrisTofani and dmnplb authored Oct 19, 2023
1 parent 826b9a9 commit 9963f6b
Showing 2 changed files with 12 additions and 8 deletions.
15 changes: 9 additions & 6 deletions src/components/banner/Banner.tsx
Original file line number Diff line number Diff line change
@@ -197,7 +197,14 @@ export const Banner = ({

const renderMainBlock = () => (
<>
<View style={[IOStyles.flex, IOStyles.selfCenter]}>
<View
style={[IOStyles.flex, IOStyles.selfCenter]}
accessible={true}
// A11y related props
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole={action !== undefined ? "button" : undefined}
>
{title && (
<>
{/* Once we get 'gap' property, we can get rid of
@@ -250,11 +257,7 @@ export const Banner = ({
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
// A11y related props
accessible={true}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole={"button"}
accessible={false}
>
<Animated.View
style={[
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@

exports[`Test Banner Components Banner Snapshot 1`] = `
<View
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
@@ -20,7 +19,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
"text": undefined,
}
}
accessible={true}
accessible={false}
collapsable={false}
focusable={true}
onBlur={[Function]}
@@ -58,6 +57,8 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
}
>
<View
accessibilityRole="button"
accessible={true}
style={
[
{

0 comments on commit 9963f6b

Please sign in to comment.