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.

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={

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}
             >

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});

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.",