From 107996289fe43a7bc8f86bcaada039b51eda1c42 Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Thu, 13 Mar 2025 12:56:19 -0700 Subject: [PATCH] Mobile: Accessibility: Fix missing label on note actions menu dismiss button (#11954) --- ...ive-popup-menu-npm-0.16.1-28fd66ecb5.patch | 55 +++++++++++++++++++ package.json | 3 +- .../NoteBodyViewer/NoteBodyViewer.test.tsx | 8 ++- .../components/testing/TestProviderStack.tsx | 2 +- packages/app-mobile/root.tsx | 5 +- yarn.lock | 7 +++ 6 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 .yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch diff --git a/.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch b/.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch new file mode 100644 index 0000000000..af0442f6d3 --- /dev/null +++ b/.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; + backdrop?: StyleProp; + }; ++ closeButtonLabel: string; + backHandler?: boolean | Function; + skipInstanceCheck?: boolean; + children: React.ReactNode; diff --git a/package.json b/package.json index f8a69010ee..608a62744c 100644 --- a/package.json +++ b/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" } } diff --git a/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.tsx b/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.tsx index 949b717c5c..c7156a48c6 100644 --- a/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.tsx +++ b/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 = ( { noteBody, @@ -39,7 +41,7 @@ const WrappedNoteViewer: React.FC = ( onMarkForDownload, }: WrapperProps, ) => { - return + return = ( onScroll={onScroll} pluginStates={emptyObject} /> - ; + ; }; const getNoteViewerDom = async () => { diff --git a/packages/app-mobile/components/testing/TestProviderStack.tsx b/packages/app-mobile/components/testing/TestProviderStack.tsx index 89a084d86a..97fae9fdfb 100644 --- a/packages/app-mobile/components/testing/TestProviderStack.tsx +++ b/packages/app-mobile/components/testing/TestProviderStack.tsx @@ -14,7 +14,7 @@ interface Props { const TestProviderStack: React.FC = props => { return - + {props.children} diff --git a/packages/app-mobile/root.tsx b/packages/app-mobile/root.tsx index 80d4c46a71..753563fd8f 100644 --- a/packages/app-mobile/root.tsx +++ b/packages/app-mobile/root.tsx @@ -1375,7 +1375,10 @@ class AppComponent extends React.Component { }, }}> - + {mainContent} diff --git a/yarn.lock b/yarn.lock index 5d7ae26fb7..dcf2be5345 100644 --- a/yarn.lock +++ b/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"