[#173701927] Improve accessibility for top bar

locales/en/index.yml

@@ -11,6 +11,10 @@ global:
       open:
         label: Contextual Help
         hint: Access information about the contents of the current screen
+    chat:
+      description: "IO assistance messages"
+      unread_singular: "{{message}} new message"
+      unread_plural: "{{message}} new messages"
   ioWebSite: https://io.italia.it
   symbols:
     question: "?"
@@ -50,6 +54,7 @@ global:
     close: Close
     exit: Exit
     saveSelection: Save the selection
+    search: Search
   navigator:
     messages: messages
     wallet: payments

locales/it/index.yml

@@ -11,6 +11,10 @@ global:
       open:
         label: Aiuto contestuale
         hint: Accedi alle informazioni sul contenuto della schermata corrente
+    chat:
+      description: "Messaggi assistenza IO"
+      unread_singular: "{{messages}} nuovo messaggio"
+      unread_plural: "{{messages}} nuovi messaggi"
   ioWebSite: https://io.italia.it
   symbols:
     question: "?"
@@ -50,6 +54,7 @@ global:
     close: Chiudi
     exit: Esci
     saveSelection: Salva la selezione
+    search: Ricerca
   navigator:
     messages: messaggi
     wallet: pagamenti

ts/components/ButtonDefaultOpacity.tsx

@@ -16,6 +16,7 @@ const ButtonDefaultOpacity = (
         activeOpacity: props.activeOpacity || defaultActiveOpacity
       }}
       accessible={true} // allows with TalkBack the feedback request to touch for button activation
+      accessibilityRole={"button"}
     >
       {props.children}
     </Button>

ts/components/GoBackButton.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { BackHandler } from "react-native";
 import { NavigationInjectedProps, withNavigation } from "react-navigation";
+import I18n from "../i18n";
 import variables from "../theme/variables";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import IconFont from "./ui/IconFont";
@@ -49,7 +50,10 @@ class GoBackButton extends React.PureComponent<Props> {
     };
 
     return (
-      <ButtonDefaultOpacity {...buttonProps}>
+      <ButtonDefaultOpacity
+        {...buttonProps}
+        accessibilityLabel={I18n.t("global.buttons.back")}
+      >
         <IconFont
           name={"io-back"}
           style={{ color: white ? variables.colorWhite : variables.colorBlack }}

ts/components/InstabugChatsComponent.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import { connect } from "react-redux";
 import { openInstabugChat } from "../boot/configureInstabug";
+import I18n from "../i18n";
 import {
   instabugReportClosed,
   instabugReportOpened
@@ -105,23 +106,36 @@ class InstabugChatsComponent extends React.PureComponent<Props, State> {
     this.checkInstabugChats();
   }
 
+  private getUnreadMessagesDescription = () => {
+    if (this.props.badge === 0) {
+      return "";
+    }
+    return this.props.badge === 1
+      ? I18n.t("global.accessibility.chat.unread_singular", {
+          messages: this.props.badge
+        })
+      : I18n.t("global.accessibility.chat.unread_plural", {
+          messages: this.props.badge
+        });
+  };
+
   public render() {
     // we render the chat icon if the user has previous or new chats with the support team
     const canRenderChatsIcon = this.state.hasChats || this.props.badge > 0;
+    const accessibilityHint = this.getUnreadMessagesDescription();
     return (
       <React.Fragment>
         {canRenderChatsIcon && (
           <View>
             <ButtonDefaultOpacity
               onPress={this.handleIBChatPress}
               transparent={true}
+              accessibilityLabel={I18n.t(
+                "global.accessibility.chat.description"
+              )}
+              accessibilityHint={accessibilityHint}
             >
-              <IconFont
-                name="io-chat"
-                color={this.props.color}
-                accessible={true}
-                accessibilityLabel="io-chat"
-              />
+              <IconFont name="io-chat" color={this.props.color} />
             </ButtonDefaultOpacity>
             <CustomBadge
               badgeStyle={styles.badgeStyle}

ts/components/screens/BaseHeader.tsx

@@ -74,6 +74,7 @@ class BaseHeaderComponent extends React.PureComponent<Props> {
           numberOfLines={1}
           accessible={false}
           accessibilityElementsHidden={true}
+          accessibilityRole={"header"}
           importantForAccessibility="no-hide-descendants"
         >
           {headerTitle}
@@ -91,6 +92,7 @@ class BaseHeaderComponent extends React.PureComponent<Props> {
           white={isWhite}
           numberOfLines={1}
           accessibilityElementsHidden={true}
+          accessibilityRole={"header"}
           importantForAccessibility="no-hide-descendants"
         >
           {headerTitle}
@@ -175,13 +177,7 @@ class BaseHeaderComponent extends React.PureComponent<Props> {
     ) : (
       goBack && (
         <Left>
-          <GoBackButton
-            testID={"back-button"}
-            onPress={goBack}
-            accessible={true}
-            accessibilityLabel={I18n.t("global.buttons.back")}
-            white={dark}
-          />
+          <GoBackButton testID={"back-button"} onPress={goBack} white={dark} />
         </Left>
       )
     );

ts/components/search/SearchButton.tsx

@@ -62,26 +62,18 @@ class SearchButton extends React.Component<Props, State> {
             <ButtonDefaultOpacity
               onPress={this.onSearchDisable}
               transparent={true}
+              accessibilityLabel={I18n.t("global.buttons.close")}
             >
-              <IconFont
-                name="io-close"
-                color={this.props.color}
-                accessible={true}
-                accessibilityLabel={I18n.t("global.buttons.close")}
-              />
+              <IconFont name="io-close" color={this.props.color} />
             </ButtonDefaultOpacity>
           </Item>
         ) : (
           <ButtonDefaultOpacity
             onPress={this.handleSearchPress}
             transparent={true}
+            accessibilityLabel={I18n.t("global.buttons.search")}
           >
-            <IconFont
-              name="io-search"
-              color={this.props.color}
-              accessible={true}
-              accessibilityLabel={I18n.t("global.actions.search")}
-            />
+            <IconFont name="io-search" color={this.props.color} />
           </ButtonDefaultOpacity>
         )}
       </React.Fragment>

ts/components/ui/CustomBadge.tsx

@@ -19,7 +19,12 @@ export default class CustomBadge extends React.PureComponent<Props> {
     return (
       this.props.badgeValue > 0 && (
         <Badge style={this.props.badgeStyle}>
-          <Text badge={true} style={this.props.textStyle}>
+          <Text
+            badge={true}
+            style={this.props.textStyle}
+            accessible={false}
+            importantForAccessibility={"no-hide-descendants"}
+          >
             {Math.min(this.props.badgeValue, MAX_BADGE_VALUE)}
           </Text>
         </Badge>