From e7302fa6cc6bb75dd347a8952f37afd19001659c Mon Sep 17 00:00:00 2001 From: Soo Hwan Kim <44601888+josephk96@users.noreply.github.com> Date: Thu, 17 Sep 2020 14:46:43 +0900 Subject: [PATCH] MM-11302 Add accessibility to channel header buttons (#4768) * Add accessibility to channel header - search & more options buttons * Add unit tests for channel_nav_bar accessibility * Update snapshot for settings_drawer_button.js --- .../settings_drawer_button.test.js.snap | 35 +++++++++++++ .../channel_drawer_button.test.js | 21 ++++++++ .../channel_search_button.test.js.snap | 49 +++++++++++++++++++ .../channel_search_button.js | 26 ++++++++++ .../channel_search_button.test.js | 47 ++++++++++++++++++ .../channel_nav_bar/settings_drawer_button.js | 29 ++++++++++- .../settings_drawer_button.test.js | 44 +++++++++++++++++ assets/base/i18n/en.json | 4 ++ 8 files changed, 254 insertions(+), 1 deletion(-) create mode 100644 app/screens/channel/channel_nav_bar/__snapshots__/settings_drawer_button.test.js.snap create mode 100644 app/screens/channel/channel_nav_bar/channel_search_button/__snapshots__/channel_search_button.test.js.snap create mode 100644 app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.test.js create mode 100644 app/screens/channel/channel_nav_bar/settings_drawer_button.test.js diff --git a/app/screens/channel/channel_nav_bar/__snapshots__/settings_drawer_button.test.js.snap b/app/screens/channel/channel_nav_bar/__snapshots__/settings_drawer_button.test.js.snap new file mode 100644 index 000000000..16a6ac1b2 --- /dev/null +++ b/app/screens/channel/channel_nav_bar/__snapshots__/settings_drawer_button.test.js.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SettingDrawerButton should match, full snapshot 1`] = ` + + + + + +`; 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 6f19f1da3..14254e2cc 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 @@ -126,4 +126,25 @@ describe('ChannelDrawerButton', () => { expect(setApplicationIconBadgeNumber).toHaveBeenCalledWith(-1); NotificationsIOS.getBadgesCount((count) => expect(count).toBe(0)); }); + + test('Should be accessible', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.props().accessible).toBeTruthy(); + }); + + test('Should have the correct accessibilityHint', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.props().accessibilityHint).toEqual('Opens the channels and teams drawer'); + }); + + test('Should have the correct accessibilityLabel', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.props().accessibilityLabel).toEqual('Channels and teams'); + }); }); diff --git a/app/screens/channel/channel_nav_bar/channel_search_button/__snapshots__/channel_search_button.test.js.snap b/app/screens/channel/channel_nav_bar/channel_search_button/__snapshots__/channel_search_button.test.js.snap new file mode 100644 index 000000000..1c675501e --- /dev/null +++ b/app/screens/channel/channel_nav_bar/channel_search_button/__snapshots__/channel_search_button.test.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChannelSearchButton should match, full snapshot 1`] = ` + + + + + + + +`; diff --git a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js index c2ac871e1..03caf8018 100644 --- a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js +++ b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js @@ -13,6 +13,8 @@ import AwesomeIcon from 'react-native-vector-icons/FontAwesome'; import {preventDoubleTap} from 'app/utils/tap'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; import {showSearchModal} from 'app/actions/navigation'; +import {t} from 'app/utils/i18n'; +import {intlShape} from 'react-intl'; export default class ChannelSearchButton extends PureComponent { static propTypes = { @@ -22,6 +24,10 @@ export default class ChannelSearchButton extends PureComponent { theme: PropTypes.object, }; + static contextTypes = { + intl: intlShape.isRequired, + }; + handlePress = preventDoubleTap(async () => { const {actions} = this.props; @@ -35,11 +41,31 @@ export default class ChannelSearchButton extends PureComponent { theme, } = this.props; + const {formatMessage} = this.context.intl; + + const buttonDescriptor = { + id: t('navbar.search.button'), + defaultMessage: 'Search', + description: 'Accessibility helper for search button in channel header.', + }; + const accessibilityLabel = formatMessage(buttonDescriptor); + + const buttonHint = { + id: t('navbar.search.hint'), + defaultMessage: 'Opens the channel search modal', + description: 'Accessibility helper for explaining what the search button in the channel header will do.', + }; + const accessibilityHint = formatMessage(buttonHint); + const style = getStyle(theme); return ( diff --git a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.test.js b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.test.js new file mode 100644 index 000000000..253cb87a9 --- /dev/null +++ b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.test.js @@ -0,0 +1,47 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {TouchableOpacity} from 'react-native'; + +import Preferences from '@mm-redux/constants/preferences'; +import ChannelSearchButton from './channel_search_button'; + +import {shallowWithIntl} from 'test/intl-test-helper'; + +describe('ChannelSearchButton', () => { + const baseProps = { + actions: {clearSearch: jest.fn()}, + theme: Preferences.THEMES.default, + }; + + test('should match, full snapshot', () => { + const wrapper = shallowWithIntl( + , + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + expect(wrapper.find(TouchableOpacity).first().exists()).toEqual(true); + }); + + test('Should be accessible', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.find(TouchableOpacity).first().props().accessible).toBeTruthy(); + }); + + test('Should have the correct accessibilityHint', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.find(TouchableOpacity).first().props().accessibilityHint).toEqual('Opens the channel search modal'); + }); + + test('Should have the correct accessibilityLabel', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.find(TouchableOpacity).first().props().accessibilityLabel).toEqual('Search'); + }); +}); diff --git a/app/screens/channel/channel_nav_bar/settings_drawer_button.js b/app/screens/channel/channel_nav_bar/settings_drawer_button.js index c02f6292c..eebfebe46 100644 --- a/app/screens/channel/channel_nav_bar/settings_drawer_button.js +++ b/app/screens/channel/channel_nav_bar/settings_drawer_button.js @@ -14,8 +14,10 @@ import Icon from 'react-native-vector-icons/Ionicons'; import {getTheme} from '@mm-redux/selectors/entities/preferences'; import {preventDoubleTap} from 'app/utils/tap'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; +import {t} from 'app/utils/i18n'; +import {intlShape} from 'react-intl'; -class SettingDrawerButton extends PureComponent { +export class SettingDrawerButton extends PureComponent { static propTypes = { openSidebar: PropTypes.func.isRequired, theme: PropTypes.object, @@ -25,12 +27,33 @@ class SettingDrawerButton extends PureComponent { theme: {}, }; + static contextTypes = { + intl: intlShape.isRequired, + }; + handlePress = preventDoubleTap(() => { this.props.openSidebar(); }); render() { const {theme} = this.props; + + const {formatMessage} = this.context.intl; + + const buttonDescriptor = { + id: t('navbar.more_options.button'), + defaultMessage: 'More Options', + description: 'Accessibility helper for more options button in channel header.', + }; + const accessibilityLabel = formatMessage(buttonDescriptor); + + const buttonHint = { + id: t('navbar.more_options.hint'), + defaultMessage: 'Opens the more options right hand sidebar', + description: 'Accessibility helper for explaining what the more options button in the channel header will do.', + }; + const accessibilityHint = formatMessage(buttonHint); + const style = getStyleFromTheme(theme); const icon = ( @@ -43,6 +66,10 @@ class SettingDrawerButton extends PureComponent { return ( diff --git a/app/screens/channel/channel_nav_bar/settings_drawer_button.test.js b/app/screens/channel/channel_nav_bar/settings_drawer_button.test.js new file mode 100644 index 000000000..e0a1fca62 --- /dev/null +++ b/app/screens/channel/channel_nav_bar/settings_drawer_button.test.js @@ -0,0 +1,44 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import Preferences from '@mm-redux/constants/preferences'; +import {SettingDrawerButton} from './settings_drawer_button'; + +import {shallowWithIntl} from 'test/intl-test-helper'; + +describe('SettingDrawerButton', () => { + const baseProps = { + openSidebar: jest.fn(), + theme: Preferences.THEMES.default, + }; + + test('should match, full snapshot', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('Should be accessible', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.props().accessible).toBeTruthy(); + }); + + test('Should have the correct accessibilityHint', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.props().accessibilityHint).toEqual('Opens the more options right hand sidebar'); + }); + + test('Should have the correct accessibilityLabel', () => { + const wrapper = shallowWithIntl( + , + ); + expect(wrapper.props().accessibilityLabel).toEqual('More Options'); + }); +}); diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 7051bc052..8d709b8a6 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -545,6 +545,10 @@ "navbar.channel_drawer.button": "Channels and teams", "navbar.channel_drawer.hint": "Opens the channels and teams drawer", "navbar.leave": "Leave Channel", + "navbar.more_options.button": "More Options", + "navbar.more_options.hint": "Opens the more options right hand sidebar", + "navbar.search.button": "Channel Search", + "navbar.search.hint": "Opens the channel search modal", "password_form.title": "Password Reset", "password_send.checkInbox": "Please check your inbox.", "password_send.description": "To reset your password, enter the email address you used to sign up",