Mobile: Accessibility: View/edit toggle: Improve screen reader accessibility

[personalizedrefrigerator]

Problem

When using a screen reader, the view/edit toggle was announced as "toggle view/edit". This could be confusing, as the user lacks information about whether the app is currently in view or edit mode.

Solution

Replace the "toggle view/edit" label with "Edit" and "Stop editing" (depending on whether the user is currently editing the note). When switching between view and edit modes, announce "Viewing" or "Editing".

Testing

iOS

This pull request has been tested on iOS 26 by:

1. With VoiceOver enabled, opening the note editor.
2. Verifying that, when viewing, the toggle button is labelled "edit".
3. Switching between editing and viewing modes.
4. Verifying that TalkBack announces "editing" while switching.
5. Moving focus away from and back to the view/edit toggle.
6. Verifying that the view/edit toggle is labelled "stop editing".
7. Switching between viewing and editing modes.
8. Verifying that TalkBack announces "viewing" while switching.
9. Verifying that the view/edit toggle is labelled "edit".

ios-simulator-after.mov

Android

This pull request has been tested on Android by:

1. With TalkBack enabled, opening the note editor.
2. Verifying that, when editing, the toggle button is labelled "stop editing".
3. Switching between viewing and editing modes.
4. Verifying that when switching from viewing to editing, TalkBack announces "editing".
5. Switching between viewing and editing modes.
6. Verifying that when switching from editing to viewing, TalkBack announces "viewing".

android-talkback--toggle-a11y.mov

[coderabbitai]

🧹 Nitpick comments (1)

packages/app-mobile/components/screens/Note/Note.test.tsx (1)

386-405: Consider tightening the mode-switch selector.

findByLabelText(/Edit|Stop editing/) will also match 'Edit' when already in edit mode, so the test does not strictly verify that the label flipped to 'Stop editing' after entering edit mode. Since each parametrised case knows its initialEditing, you could assert the expected label explicitly:

♻️ Suggested refinement

-		const toggleButton = await screen.findByLabelText(/Edit|Stop editing/);
+		const toggleButton = await screen.findByLabelText(initialEditing ? 'Stop editing' : 'Edit');

Not blocking — the current assertion via expectToBeEditing already covers the behavioural outcome.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/app-mobile/components/screens/Note/Note.test.tsx` around lines 386 -
405, The test uses a loose selector findByLabelText(/Edit|Stop editing/) in the
'should switch modes when toggle button is pressed' case; tighten it by
asserting the exact label expected for the toggle after
setupNoteWithPanes(panes) and after pressing the button: use
findByLabelText('Edit') or findByLabelText('Stop editing') depending on
initialEditing, then press the button and assert the opposite exact label and
call expectToBeEditing(expectedEditing) as done now to verify behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/app-mobile/components/screens/Note/Note.test.tsx`:
- Around line 386-405: The test uses a loose selector findByLabelText(/Edit|Stop
editing/) in the 'should switch modes when toggle button is pressed' case;
tighten it by asserting the exact label expected for the toggle after
setupNoteWithPanes(panes) and after pressing the button: use
findByLabelText('Edit') or findByLabelText('Stop editing') depending on
initialEditing, then press the button and assert the opposite exact label and
call expectToBeEditing(expectedEditing) as done now to verify behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2d7dac55-bc0a-4db3-b919-26022e457667

📥 Commits

Reviewing files that changed from the base of the PR and between 5e0829d and 5399008.

📒 Files selected for processing (4)

• packages/app-mobile/components/ScreenHeader/index.tsx
• packages/app-mobile/components/screens/Note/Note.test.tsx
• packages/app-mobile/components/screens/Note/Note.tsx
• packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.ts