From 7025321d76c0159f812e7b5fb6c92ba96bb4e482 Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Fri, 28 Feb 2025 02:30:50 -0800 Subject: [PATCH] Mobile: Accessibility: Fix "new note" and "new to-do" buttons are focusable even while invisible (#11899) --- ...t-native-paper-npm-5.13.1-f153e542e2.patch | 50 +++++++++++++++++++ package.json | 3 +- packages/app-mobile/package.json | 2 +- yarn.lock | 26 ++++++++-- 4 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 .yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch diff --git a/.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch b/.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch new file mode 100644 index 0000000000..8ef27425bc --- /dev/null +++ b/.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch @@ -0,0 +1,50 @@ +# This is a (hopefully temporary) fix for an accessibility issue in the FAB.Group +# component. See https://github.com/callstack/react-native-paper/pull/4498 for details. +diff --git a/lib/commonjs/components/FAB/FABGroup.js b/lib/commonjs/components/FAB/FABGroup.js +index 26933dd7ac6862c0dd95e52b8cd91c8bbd0b6efc..417c91a0257849eb597afb5e339e13b6d1d54486 100644 +--- a/lib/commonjs/components/FAB/FABGroup.js ++++ b/lib/commonjs/components/FAB/FABGroup.js +@@ -209,8 +209,9 @@ const FABGroup = _ref => { + }], + pointerEvents: open ? 'box-none' : 'none', + accessibilityRole: "button", +- importantForAccessibility: "yes", +- accessible: true, ++ importantForAccessibility: open ? 'yes' : 'no-hide-descendants', ++ accessibilityElementsHidden: !open, ++ accessible: open, + accessibilityLabel: accessibilityLabel + }, it.label && /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_Card.default, { + mode: isV3 ? 'contained' : 'elevated', +diff --git a/lib/module/components/FAB/FABGroup.js b/lib/module/components/FAB/FABGroup.js +index ca5c02679539b17b048d4c82f570791dd8b57545..a06902b744b3bfb06b0644930eda0ba2ce2967ca 100644 +--- a/lib/module/components/FAB/FABGroup.js ++++ b/lib/module/components/FAB/FABGroup.js +@@ -200,8 +200,9 @@ const FABGroup = _ref => { + }], + pointerEvents: open ? 'box-none' : 'none', + accessibilityRole: "button", +- importantForAccessibility: "yes", +- accessible: true, ++ importantForAccessibility: open ? 'yes' : 'no-hide-descendants', ++ accessibilityElementsHidden: !open, ++ accessible: open, + accessibilityLabel: accessibilityLabel + }, it.label && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Card, { + mode: isV3 ? 'contained' : 'elevated', +diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx +index af1e85c4cbabfdd05499f9befb9f851be5911835..d010393975b0b31852efba1b7ce9cb09da4feaec 100644 +--- a/src/components/FAB/FABGroup.tsx ++++ b/src/components/FAB/FABGroup.tsx +@@ -383,8 +383,9 @@ const FABGroup = ({ + ]} + pointerEvents={open ? 'box-none' : 'none'} + accessibilityRole="button" +- importantForAccessibility="yes" +- accessible={true} ++ importantForAccessibility={open ? 'yes' : 'no-hide-descendants'} ++ accessibilityElementsHidden={!open} ++ accessible={open} + accessibilityLabel={accessibilityLabel} + > + {it.label && ( diff --git a/package.json b/package.json index e2c93e0925..f8a69010ee 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "rn-fetch-blob@0.12.0": "patch:rn-fetch-blob@npm%3A0.12.0#./.yarn/patches/rn-fetch-blob-npm-0.12.0-cf02e3c544.patch", "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-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" } } diff --git a/packages/app-mobile/package.json b/packages/app-mobile/package.json index 525c92e718..491c9529f7 100644 --- a/packages/app-mobile/package.json +++ b/packages/app-mobile/package.json @@ -62,7 +62,7 @@ "react-native-image-picker": "7.1.1", "react-native-localize": "3.2.1", "react-native-modal-datetime-picker": "17.1.0", - "react-native-paper": "5.12.5", + "react-native-paper": "5.13.1", "react-native-popup-menu": "0.16.1", "react-native-quick-actions": "0.3.13", "react-native-quick-crypto": "0.7.5", diff --git a/yarn.lock b/yarn.lock index 873c81774e..5d7ae26fb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8426,7 +8426,7 @@ __metadata: react-native-image-picker: 7.1.1 react-native-localize: 3.2.1 react-native-modal-datetime-picker: 17.1.0 - react-native-paper: 5.12.5 + react-native-paper: 5.13.1 react-native-popup-menu: 0.16.1 react-native-quick-actions: 0.3.13 react-native-quick-crypto: 0.7.5 @@ -39983,9 +39983,9 @@ __metadata: languageName: node linkType: hard -"react-native-paper@npm:5.12.5": - version: 5.12.5 - resolution: "react-native-paper@npm:5.12.5" +"react-native-paper@npm:5.13.1": + version: 5.13.1 + resolution: "react-native-paper@npm:5.13.1" dependencies: "@callstack/react-theme-provider": ^3.0.9 color: ^3.1.2 @@ -39995,7 +39995,23 @@ __metadata: react-native: "*" react-native-safe-area-context: "*" react-native-vector-icons: "*" - checksum: 35ce56e0bb19c46ce85adc47a504527b7ec455d1a15f3ace0d6fd438abd51b1fe30e1b44351950e16d6376ddbc18ecc94b558e267767d0a9fd886a5f66a4c322 + checksum: ef16fbb57986f09f2080e98ddb7977c494d6accb36767101de32199849bba8764e2bcd528a5d1c08940f4430cb86dabb6baaf5b33a539670221cbbfcc01f2d5e + languageName: node + linkType: hard + +"react-native-paper@patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch::locator=root%40workspace%3A.": + version: 5.13.1 + resolution: "react-native-paper@patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch::version=5.13.1&hash=3fecbb&locator=root%40workspace%3A." + dependencies: + "@callstack/react-theme-provider": ^3.0.9 + color: ^3.1.2 + use-latest-callback: ^0.1.5 + peerDependencies: + react: "*" + react-native: "*" + react-native-safe-area-context: "*" + react-native-vector-icons: "*" + checksum: 381a35e3b26a177e2299fd0ce597e5b7bd0626276dc0116cc3eb1e0217634977c2f957c1985bb5938b1c88b4f1566273fa494c8a6bb6eb2a05c18f9a963e2743 languageName: node linkType: hard