From 4f1211a5860b32cd1db9d7ba406f6b2fc158099f Mon Sep 17 00:00:00 2001
From: Bryan Culver <me@bryanculver.com>
Date: Mon, 21 Oct 2019 16:01:17 -0400
Subject: [PATCH] MM-19328 | Add accessibility label to channel drawer button.
 (#3448)

* MM-19328 | Add accessibility label to channel drawer button.

* MM-19328 | Add accessibility hint and role to channel drawer button.
---
 .../channel_drawer_button.test.js.snap        |  8 ++++++
 .../channel_drawer_button.js                  | 26 +++++++++++++++++++
 .../channel_drawer_button.test.js             | 12 ++++-----
 assets/base/i18n/en.json                      |  2 ++
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/app/screens/channel/channel_nav_bar/channel_drawer_button/__snapshots__/channel_drawer_button.test.js.snap b/app/screens/channel/channel_nav_bar/channel_drawer_button/__snapshots__/channel_drawer_button.test.js.snap
index df71b3cb8..42aec1dc8 100644
--- a/app/screens/channel/channel_nav_bar/channel_drawer_button/__snapshots__/channel_drawer_button.test.js.snap
+++ b/app/screens/channel/channel_nav_bar/channel_drawer_button/__snapshots__/channel_drawer_button.test.js.snap
@@ -2,6 +2,10 @@
 
 exports[`ChannelDrawerButton should match, full snapshot 1`] = `
 <TouchableOpacity
+  accessibilityHint="Opens the channels and teams drawer"
+  accessibilityLabel="Channels and teams"
+  accessibilityRole="button"
+  accessible={true}
   activeOpacity={0.2}
   onPress={[Function]}
   style={
@@ -38,6 +42,10 @@ exports[`ChannelDrawerButton should match, full snapshot 1`] = `
 
 exports[`ChannelDrawerButton should match, full snapshot 2`] = `
 <TouchableOpacity
+  accessibilityHint="Opens the channels and teams drawer"
+  accessibilityLabel="Channels and teams"
+  accessibilityRole="button"
+  accessible={true}
   activeOpacity={0.2}
   onPress={[Function]}
   style={
diff --git a/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.js b/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.js
index 9de6e7955..d1e9b7192 100644
--- a/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.js
+++ b/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.js
@@ -14,6 +14,8 @@ import Badge from 'app/components/badge';
 import PushNotifications from 'app/push_notifications';
 import {preventDoubleTap} from 'app/utils/tap';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import {t} from 'app/utils/i18n';
+import {intlShape} from 'react-intl';
 
 import telemetry from 'app/telemetry';
 
@@ -25,6 +27,10 @@ export default class ChannelDrawerButton extends PureComponent {
         visible: PropTypes.bool,
     };
 
+    static contextTypes = {
+        intl: intlShape.isRequired,
+    };
+
     static defaultProps = {
         badgeCount: 0,
         currentChannel: {},
@@ -61,6 +67,22 @@ export default class ChannelDrawerButton extends PureComponent {
             visible,
         } = this.props;
 
+        const {formatMessage} = this.context.intl;
+
+        const buttonDescriptor = {
+            id: t('navbar.channel_drawer.button'),
+            defaultMessage: 'Channels and teams',
+            description: 'Accessibility helper for channel drawer button.',
+        };
+        const accessibilityLabel = formatMessage(buttonDescriptor);
+
+        const buttonHint = {
+            id: t('navbar.channel_drawer.hint'),
+            defaultMessage: 'Opens the channels and teams drawer',
+            description: 'Accessibility helper for explaining what the channel drawer button will do.',
+        };
+        const accessibilityHint = formatMessage(buttonHint);
+
         const style = getStyleFromTheme(theme);
 
         let badge;
@@ -95,6 +117,10 @@ export default class ChannelDrawerButton extends PureComponent {
 
         return (
             <TouchableOpacity
+                accessible={true}
+                accessibilityHint={accessibilityHint}
+                accessibilityLabel={accessibilityLabel}
+                accessibilityRole='button'
                 onPress={this.handlePress}
                 style={containerStyle}
             >
diff --git a/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.test.js b/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.test.js
index cd9eef22a..499cf4a22 100644
--- a/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.test.js
+++ b/app/screens/channel/channel_nav_bar/channel_drawer_button/channel_drawer_button.test.js
@@ -2,13 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
 import NotificationsIOS from 'react-native-notifications';
 
 import Preferences from 'mattermost-redux/constants/preferences';
 
 import Badge from 'app/components/badge';
 import PushNotification from 'app/push_notifications/push_notifications.ios';
+import {shallowWithIntl} from 'test/intl-test-helper';
 
 import ChannelDrawerButton from './channel_drawer_button';
 
@@ -48,7 +48,7 @@ describe('ChannelDrawerButton', () => {
     afterEach(() => NotificationsIOS.setBadgesCount(0));
 
     test('should match, full snapshot', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelDrawerButton {...baseProps}/>
         );
 
@@ -69,7 +69,7 @@ describe('ChannelDrawerButton', () => {
             badgeCount: 0,
         };
 
-        shallow(
+        shallowWithIntl(
             <ChannelDrawerButton {...props}/>
         );
         expect(setApplicationIconBadgeNumber).not.toBeCalled();
@@ -83,7 +83,7 @@ describe('ChannelDrawerButton', () => {
             badgeCount: 1,
         };
 
-        shallow(
+        shallowWithIntl(
             <ChannelDrawerButton {...props}/>
         );
         expect(setApplicationIconBadgeNumber).toHaveBeenCalledTimes(1);
@@ -97,7 +97,7 @@ describe('ChannelDrawerButton', () => {
             badgeCount: 0,
         };
 
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelDrawerButton {...props}/>
         );
         NotificationsIOS.getBadgesCount((count) => expect(count).toBe(0));
@@ -115,7 +115,7 @@ describe('ChannelDrawerButton', () => {
             badgeCount: 0,
         };
 
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelDrawerButton {...props}/>
         );
         wrapper.setProps({badgeCount: 2});
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index 61fad8f9c..bf311153b 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -486,6 +486,8 @@
   "msg_typing.areTyping": "{users} and {last} are typing...",
   "msg_typing.isTyping": "{user} is typing...",
   "navbar_dropdown.logout": "Logout",
+  "navbar.channel_drawer.button": "Channels and teams",
+  "navbar.channel_drawer.hint": "Opens the channels and teams drawer",
   "navbar.leave": "Leave Channel",
   "password_form.title": "Password Reset",
   "password_send.checkInbox": "Please check your inbox.",