Mobile: Accessibility: Improve sidemenu notebook list accessibility

[personalizedrefrigerator]

Summary

This pull request fixes several accessibility issues:

• Notebooks header: Previously, the notebooks header wasn't marked as a header.
  • Marking the notebook header as a header allows the "next header" shortcut to jump to the beginning of the notebooks list.
• Icon in the notebooks header: Previously, the folder icon in the notebooks header was focusable on iOS, but lacked a label. The folder icon (and other similar hidden icons) have been marked as not important for accessibility on iOS.
• Notebook long-press menu: It was very difficult to open the notebook long-press menu on mobile with a screen reader.
  • Long-press and right-click options are now added to notebook items with useOnLongPressProps. On Android and iOS, this notifies accessibility tools that a long-press/context menu action is available.
  • To allow the useOnLongPressProps hook to be used, renderFolderItem is converted to a separate React component.
• Notebook toggles: The "Expand"/"Collapse" notebook dropdowns were previously always read as off on Android.
  • Accessibility state is now set to better describe the state of the dropdowns.
• Notebook depth: When using a screen reader, it was difficult to determine whether one notebook was a subnotebook of another.
  • (level <depth>) is appended to the description of subnotebooks folder items. For example, level-1 subnotebook might be described as Notebook title (level 1). This change does not affect toplevel notebooks.
• Separators: The separator above the sync/config/tags actions is given the separator role (only supported on web).

Testing plan

Android 13:

1. Enable TalkBack and open the sidebar.
2. Verify that "All Notes" is described as a button.
3. Verify that "Notebooks" is described as a heading.
4. Verify that the selected notebook is described as "selected" and "Opens notebook". Verify that TalkBack also reads "Double-tap and hold to show notebook options".
5. Double-tap and hold.
6. Verify that the edit dialog for the current notebook is shown.
7. Click "Cancel".
8. Move focus to a button that shows/hides subnotebooks.
9. Show subnotebooks if hidden.
10. Verify that the toggle is described as on, Expand <notebook name> switch for some <notebook name>.
11. Hide subnotebooks by double-tapping.
12. Verify that TalkBack reads "off".

Web (Chromium):

1. Set up an environment where the first notebook in the notebooks list has subnotebooks.
2. Open the dropdown for the first notebook.
3. Enable a screen reader (Orca) and open the sidebar.
4. Press h. Verify that Orca navigates to the "Notebooks" heading.
5. Press the down arrow key.
6. Verify that Orca reads the title of the first notebook after the "Notebooks" heading.
7. Press enter.
8. Verify that this opens the first notebook.
9. Re-open the sidebar and move focus back to the first notebook.
10. Press tab.
11. Verify that this focuses the subnotebook toggle for the first notebook.
12. Verify that Orca reads Expand <notebook name>, toggle button pressed (replacing <notebook name> with the title of the notebook).
13. Press enter.
14. Verify that Orca reads "not pressed".
15. Press space.
16. Verify that Orca reads "pressed".
17. Press the down arrow key.
18. Verify that the next notebook is read as "(level 1), pushbutton".

iOS 18.2:

1. Set up an environment where the first notebook in the notebooks list has subnotebooks.
2. Enable VoiceOver.
3. Show the sidemenu.
4. Use the "next heading" shortcut to jump to the notebooks heading.
   • For me, this involved 1) a rotate gesture to set up/down swipes to navigate by headings 2) swiping down.
5. Verify that VoiceOver reads "Notebooks, heading".
6. Move focus to the previous item.
7. Verify that VoiceOver reads "All notes, button".
8. Move focus to the next item, then the next.
9. Verify that VoiceOver reads the name of the first notebook, then "button, opens notebook, actions available".
10. Double-tap.
11. Verify that VoiceOver reads "side menu closed", then "sidebar button, show/hide the sidebar".
12. Double-tap.
13. Verify that VoiceOver reads "sidemenu open".
14. Swipe down.
15. Verify that VoiceOver reads "notebooks, heading".
16. Move focus to the next item.
17. Verify that VoiceOver reads "selected", then the first notebook title, then "button, opens notebook, actions available".
18. Move focus to the next item.
19. Verify that VoiceOver reads "Expand", then the name of the notebook, then "checked, button".
20. Double-tap.
21. Verify that VoiceOver reads "Expand", then the name of the notebook, then "unchecked".
22. Double-tap.
23. Verify that VoiceOver reads "Expand", then the name of the notebook, then "checked".
24. Move focus to the next item.
25. Verify that VoiceOver reads the title of the first subnotebook, then "level 1", then "button, opens notebook, actions available".

[personalizedrefrigerator]

This fixes an issue where the folder icon to the left of the "Notebooks" heading was accessibility focusable on iOS (with no label or description). On Android and Web, the same icon is hidden for accessibility.

[personalizedrefrigerator]

Relevant documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#description