Fix Avatar and Badge accessibility (#580)

* Fix Avatar and Badge accessibility

* Prevent red screen when label = ''

* Move accessibility fix

* Remove unused const

Author: M-i-k-e-l

src/components/avatar/index.js

@@ -314,17 +314,17 @@ export default class Avatar extends PureBaseComponent {
         style={[this.getContainerStyle(), containerStyle]}
         testID={testID}
         onPress={onPress}
-        accessible
+        accessible={!_.isUndefined(onPress)}
         accessibilityLabel={'Avatar'}
         accessibilityRole={onPress ? 'button' : 'image'}
         {...this.extractAccessibilityProps()}
       >
         <View
           style={[this.getInitialsContainer(), {backgroundColor}, hasImage && this.styles.initialsContainerWithInset]}
         >
-          <Text numberOfLines={1} style={[{fontSize}, this.styles.initials, {color}]}>
+          {!_.isUndefined(label) && <Text numberOfLines={1} style={[{fontSize}, this.styles.initials, {color}]}>
             {label}
-          </Text>
+          </Text>}
         </View>
         {this.renderImage()}
         {this.renderBadge()}

src/components/badge/index.js

@@ -103,7 +103,7 @@ export default class Badge extends PureBaseComponent {
     return {
       accessibilityLabel: icon ? 'badge' : label ? `${label} new items` : undefined,
       ...this.extractAccessibilityProps(),
-      accessible: true,
+      accessible: !_.isUndefined(label),
       accessibilityRole: onPress ? 'button' : icon ? 'image' : 'text'
     };
   }
@@ -173,17 +173,20 @@ export default class Badge extends PureBaseComponent {
   }
 
   renderLabel() {
-    const {labelStyle} = this.props;
-    return (
-      <Text
-        style={[this.styles.label, this.isSmallBadge() && this.styles.labelSmall, labelStyle]}
-        allowFontScaling={false}
-        numberOfLines={1}
-        testID="badge"
-      >
-        {this.getFormattedLabel()}
-      </Text>
-    );
+    const {labelStyle, label} = this.props;
+
+    if (label) {
+      return (
+        <Text
+          style={[this.styles.label, this.isSmallBadge() && this.styles.labelSmall, labelStyle]}
+          allowFontScaling={false}
+          numberOfLines={1}
+          testID="badge"
+        >
+          {this.getFormattedLabel()}
+        </Text>
+      );
+    }
   }
 
   renderIcon() {