Mobile: Accessibility: Fix missing label on note actions menu dismiss button (#11954)

.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch

@@ -0,0 +1,55 @@
+# This patch improves the note actions menu (the kebab menu)'s accessibility
+# by labelling its dismiss button.
+diff --git a/build/rnpm.js b/build/rnpm.js
+index 1111c2de99b3d4c5651ca4eee3ba59c0ce8e13e1..d410ee12b38d02c399b0a40973217da0082d73c0 100644
+--- a/build/rnpm.js
++++ b/build/rnpm.js
+@@ -1573,7 +1573,9 @@
+             onPress = _this$props.onPress,
+             style = _this$props.style;
+         return /*#__PURE__*/React__default.createElement(reactNative.TouchableWithoutFeedback, {
+-          onPress: onPress
++          onPress: onPress,
++          accessibilityLabel: _this$props.accessibilityLabel,
++          accessibilityRole: 'button',
+         }, /*#__PURE__*/React__default.createElement(reactNative.Animated.View, {
+           style: [styles.fullscreen, {
+             opacity: this.fadeAnim
+@@ -1588,7 +1590,8 @@
+   }(React.Component);
+ 
+   Backdrop.propTypes = {
+-    onPress: propTypes.func.isRequired
++    onPress: propTypes.func.isRequired,
++    accessibilityLabel: propTypes.string,
+   };
+   var styles = reactNative.StyleSheet.create({
+     fullscreen: {
+@@ -1658,6 +1661,7 @@
+           style: styles$1.placeholder
+         }, /*#__PURE__*/React__default.createElement(Backdrop, {
+           onPress: ctx._onBackdropPress,
++          accessibilityLabel: this.props.closeButtonLabel,
+           style: backdropStyles,
+           ref: ctx.onBackdropRef
+         }), ctx._makeOptions());
+@@ -2090,6 +2094,7 @@
+         }), /*#__PURE__*/React__default.createElement(MenuPlaceholder, {
+           ctx: this,
+           backdropStyles: customStyles.backdrop,
++          closeButtonLabel: this.props.closeButtonLabel,
+           ref: this._onPlaceholderRef
+         }))));
+       }
+diff --git a/src/index.d.ts b/src/index.d.ts
+index 1db1e643a915e4bfb715e33354678ec1be219f50..007157e366d1935368bdd8eff5e7a0773e183d0f 100644
+--- a/src/index.d.ts
++++ b/src/index.d.ts
+@@ -18,6 +18,7 @@ declare module "react-native-popup-menu" {
+       menuProviderWrapper?: StyleProp<ViewStyle>;
+       backdrop?: StyleProp<ViewStyle>;
+     };
++    closeButtonLabel: string;
+     backHandler?: boolean | Function;
+     skipInstanceCheck?: boolean;
+     children: React.ReactNode;

package.json

@@ -116,6 +116,7 @@
     "app-builder-lib@26.0.0-alpha.7": "patch:app-builder-lib@npm%3A26.0.0-alpha.7#./.yarn/patches/app-builder-lib-npm-26.0.0-alpha.7-e1b3dca119.patch",
     "app-builder-lib@24.13.3": "patch:app-builder-lib@npm%3A24.13.3#./.yarn/patches/app-builder-lib-npm-24.13.3-86a66c0bf3.patch",
     "react-native-sqlite-storage@6.0.1": "patch:react-native-sqlite-storage@npm%3A6.0.1#./.yarn/patches/react-native-sqlite-storage-npm-6.0.1-8369d747bd.patch",
-    "react-native-paper@5.13.1": "patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch"
+    "react-native-paper@5.13.1": "patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch",
+    "react-native-popup-menu@0.16.1": "patch:react-native-popup-menu@npm%3A0.16.1#./.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch"
   }
 }

packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.tsx

@@ -7,7 +7,6 @@ import '@testing-library/jest-native/extend-expect';
 
 import NoteBodyViewer from './NoteBodyViewer';
 import Setting from '@joplin/lib/models/Setting';
-import { MenuProvider } from 'react-native-popup-menu';
 import { resourceFetcher, setupDatabaseAndSynchronizer, supportDir, switchClient, synchronizerStart } from '@joplin/lib/testing/test-utils';
 import { MarkupLanguage } from '@joplin/renderer';
 import { HandleMessageCallback, OnMarkForDownloadCallback } from './hooks/useOnMessage';
@@ -16,6 +15,8 @@ import shim from '@joplin/lib/shim';
 import Note from '@joplin/lib/models/Note';
 import { ResourceInfo } from './hooks/useRerenderHandler';
 import getWebViewDomById from '../../utils/testing/getWebViewDomById';
+import TestProviderStack from '../testing/TestProviderStack';
+import createMockReduxStore from '../../utils/testing/createMockReduxStore';
 
 interface WrapperProps {
 	noteBody: string;
@@ -29,6 +30,7 @@ interface WrapperProps {
 const emptyObject = {};
 const emptyArray: string[] = [];
 const noOpFunction = () => {};
+const testStore = createMockReduxStore();
 const WrappedNoteViewer: React.FC<WrapperProps> = (
 	{
 		noteBody,
@@ -39,7 +41,7 @@ const WrappedNoteViewer: React.FC<WrapperProps> = (
 		onMarkForDownload,
 	}: WrapperProps,
 ) => {
-	return <MenuProvider>
+	return <TestProviderStack store={testStore}>
 		<NoteBodyViewer
 			themeId={Setting.THEME_LIGHT}
 			style={emptyObject}
@@ -56,7 +58,7 @@ const WrappedNoteViewer: React.FC<WrapperProps> = (
 			onScroll={onScroll}
 			pluginStates={emptyObject}
 		/>
-	</MenuProvider>;
+	</TestProviderStack>;
 };
 
 const getNoteViewerDom = async () => {

packages/app-mobile/components/testing/TestProviderStack.tsx

@@ -14,7 +14,7 @@ interface Props {
 const TestProviderStack: React.FC<Props> = props => {
 	return <Provider store={props.store}>
 		<FocusControl.Provider>
-			<MenuProvider>
+			<MenuProvider closeButtonLabel='Dismiss'>
 				<PaperProvider>
 					{props.children}
 				</PaperProvider>

packages/app-mobile/root.tsx

@@ -1375,7 +1375,10 @@ class AppComponent extends React.Component {
 					},
 				}}>
 					<DialogManager themeId={this.props.themeId}>
-						<MenuProvider style={{ flex: 1 }}>
+						<MenuProvider
+							style={{ flex: 1 }}
+							closeButtonLabel={_('Dismiss')}
+						>
 							<FocusControl.MainAppContent style={{ flex: 1 }}>
 								{mainContent}
 							</FocusControl.MainAppContent>

yarn.lock

@@ -40022,6 +40022,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-popup-menu@patch:react-native-popup-menu@npm%3A0.16.1#./.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch::locator=root%40workspace%3A.":
+  version: 0.16.1
+  resolution: "react-native-popup-menu@patch:react-native-popup-menu@npm%3A0.16.1#./.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch::version=0.16.1&hash=42fb35&locator=root%40workspace%3A."
+  checksum: 50d91792b3f8cc2584ac22c537eebb8cf771ad1241843dd403395361f8465edb3628c5751671ad55c832a3a217a711dca72497b0bc34b21a3ce37ce1bd720d52
+  languageName: node
+  linkType: hard
+
 "react-native-quick-actions@npm:0.3.13":
   version: 0.3.13
   resolution: "react-native-quick-actions@npm:0.3.13"