From 9963f6b242dcc578b1afc9dfd47bdd1b2e516bfb Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Thu, 19 Oct 2023 12:10:42 +0200
Subject: [PATCH] [IOPLT-195] Fixes the accessibility issue preventing to
 intercept the 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 <damiano.plebani@pagopa.it>
---
 src/components/banner/Banner.tsx                  | 15 +++++++++------
 .../__test__/__snapshots__/banner.test.tsx.snap   |  5 +++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
index 01414e1e..c7e4f810 100644
--- a/src/components/banner/Banner.tsx
+++ b/src/components/banner/Banner.tsx
@@ -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={[
diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
index 4d34f752..97691c40 100644
--- a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
+++ b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -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={
         [
           {