Suggestion for the Joplin app on iOS when using VoiceOver:
The process of adding a note or task can be confusing, particularly for first-time users. While it's something users can adapt to, it still causes unnecessary delays. Pressing the "new note" or "new task" buttons doesn't yield any result unless the "Add" button is activated first. This action opens a menu, but initially appears empty. To make the buttons work, users have to navigate back to them, which adds an unnecessary step:
It’s unclear why these buttons are detectable by VoiceOver when the "Add" menu is not expanded. They should ideally be hidden.
A more streamlined approach would be to keep the "new note" and "new task" buttons hidden from VoiceOver until the "Add" menu is opened. Selecting the "Add" button could then present a pop-up menu where users can simply choose between "New Note" or "New Task."
Implementing these changes would likely provide users with a more straightforward and efficient way to quickly add notes.
Thanks.
1 Like
Thanks for the feedback!
I'm linking to a related pull request:
dev
← personalizedrefrigerator:pr/mobile/redesigned-new-note-menu
opened 03:03AM - 05 Feb 25 UTC
# Summary
**Goals**:
- Implement a redesign of the new note menu.
- Make t… he new note menu more accessible.
This pull request partially implements a redesign of the new note creation process (design by @MartaLC).
In addition to changing the appearance of the "new note" menu, this replaces the `react-native-paper` `FAB.Group` component, which [had accessibility issues](https://discourse.joplinapp.org/t/calling-visually-impaired-users-help-us-improve-accessibility/42094/12?u=personalizedrefriger).
**Trying it**: At the time of this writing, a version of this pull request can be accessed at [personalizedrefrigerator.github.io/joplin/web-client/](https://personalizedrefrigerator.github.io/joplin/web-client/).
# Screenshot
The menu includes shortcuts to creating a new note with a photo, drawing, or file attachment, in addition to "new note" and "new to-do" buttons:

On a wider screen, the menu is pushed to the right edge of the screen, to minimize distance between the menu and the "+" (Add new) button that opens the menu.

# To-do
- [ ] **Accessibility**: Improve focus order.
- Currently, keyboard/screen reader focus visits the "camera"/"attachment"/"drawing" quick actions before visiting the "new to-do" and "new note" buttons.
- I'm running into issues with this. The menu is currently shown in a React Native `Modal`. While the menu is open, the `Modal` prevents accessibility/keyboard focus from reaching items not in the menu. However, it also makes auto-setting focus difficult. On Android, the `Modal` seems to auto-focus the first item several hundred milliseconds **after** the modal opens.
- [x] **Accessibility**: Fix screen readers read "side menu closed" then "side menu opened" when opening the edgemenu.
- [ ] Verify that the menu is shown in the correct place when RTL is enabled.
- [x] iOS: The menu is partially covered by the device notch when in landscape mode.
- [x] Determine how the menu should be positioned on wide screens.
- Ideally, this would minimize the distance between the "new note" button and the "+" button that opened the menu. (Related: [Fitts' Law](https://en.wikipedia.org/wiki/Fitts%27s_law)).
- [x] Change the appearance of the "+" button that opens the menu to match the design.
- [x] Restyle the "new to-do" and "new note" buttons to match the design.
- [x] Fix swiping down to the left of the menu does nothing.
- Swiping down from above the menu dismisses it. Swiping down to the left of the menu should do the same thing.
- [ ] Automated tests.
- [ ] Refactoring.
Edit : Note that the above pull request switches to a custom component for the new note menu.
I'm also linking to a pull request in the library Joplin uses for the "new" menu: pull request: Fix sub items are accessibility focusable when collapsed .
I'm not sure whether the upstream will be merged in the near future, though (it's been open for a while though without a review).
1 Like
Thanks! Sorry, I've walked through all the pull request but didn't pay enough attention to this one.
The pull request linked above still has a few issues and it might be some time until it's ready. For now, I've created a pull request that patches react-native-paper
(the library we use for the new note menu):
dev
← personalizedrefrigerator:pr/mobile/patch-rn-paper
opened 11:58PM - 27 Feb 25 UTC
# Summary
This pull request patches `react-native-paper` to fix a focus issue… that has been reported a few times on the forum and Mastodon.
See also:
- A work-in-progress [pull request that switches to a custom component for the new note menu](https://github.com/laurent22/joplin/pull/11780).
- The [(unmerged) upstream pull request](https://github.com/callstack/react-native-paper/pull/4498), which describes the issue.
> [!NOTE]
>
> This only applies to Android and iOS. This does not fix the issue on web. This also only fixes the focus issue. It does not label the fullscreen close button shown behind the menu items.
# Testing plan
Android 13:
1. Enable TalkBack.
2. Open the sidemenu.
3. Move focus to the "Synchronize" button.
4. Swipe to the right.
5. Verify that this moves focus to the "collapsed, add new, button".
6. Double-tap
7. Verify that TalkBack reads "expanded".
8. Swipe left.
9. Verify that TalkBack moves focus to "New note, button".
- **Note**: It may make more sense for "new note, button" to be **after** the "add new, button" in the focus order. This, however, would require a larger patch. Would it make sense to try to address that here?
10. Swipe left.
11. Verify that TalkBack moves focus to "New to-do, button".
12. Double-tap.
13. Verify that TalkBack reads "editing, add title, edit box"
14. Open a note in view mode.
15. Click the "edit" button.
16. Verify that this switches the note to edit mode.
1 Like