fix(tldraw): expose UI to mobile screen readers via role=document (tldraw#8901)

In order to make the tldraw UI reachable to mobile screen readers, this
PR marks the `tlui-layout` wrapper with `role="document"`. The outer
`tl-container` has `role="application"`, which VoiceOver (iOS) and
TalkBack (Android) do not announce at all, leaving the toolbar, menus,
and dialogs effectively invisible to mobile assistive tech. Per the [MDN
guidance](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/application_role#description),
interspersing `role="document"` inside an `application` region restores
normal document semantics for non-application UI while leaving the
application's keyboard-interaction model on the outer container
untouched. Closes tldraw#8849.

### Change type

- [x] `bugfix`

### Test plan

1. Open the examples app with VoiceOver enabled on iOS Safari and
confirm the toolbar, page menu, and dialogs are announced and navigable.
2. Repeat on Android Chrome with TalkBack.
3. With a desktop screen reader (NVDA or macOS VoiceOver), confirm the
canvas is still announced as an application and shapes are still
keyboard-interactive.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Mark the tldraw UI layer with `role="document"` so toolbars, menus,
and dialogs stay reachable to mobile screen readers like VoiceOver and
TalkBack, which do not announce the outer canvas `role="application"`.

### Code changes

| Section       | LOC change |
| ------------- | ---------- |
| Core code     | +6 / -0    |
| Documentation | +1 / -0    |

Author: mimecuvalo

apps/docs/content/releases/next.mdx

@@ -25,3 +25,4 @@ The page menu no longer has an explicit edit mode. Reorder pages by dragging a r
 - Fix a misleading "license expired" console warning for perpetual licenses on covered versions. ([#8791](https://github.com/tldraw/tldraw/pull/8791))
 - Fix inconsistent tooltip behavior on the video toolbar by using `TldrawUiToolbarButton` for the replace and download buttons. ([#8794](https://github.com/tldraw/tldraw/pull/8794))
 - Fix the missing open-state hint on the page menu and zoom menu triggers when rendered outside the main toolbar. ([#8813](https://github.com/tldraw/tldraw/pull/8813))
+- Mark the tldraw UI layer with `role="document"` so toolbars, menus, and dialogs stay reachable to mobile screen readers like VoiceOver and TalkBack, which do not announce the outer canvas `role="application"`. ([#8849](https://github.com/tldraw/tldraw/issues/8849))

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -184,6 +184,12 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 			className={classNames('tlui-layout', {
 				'tlui-layout__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 			})}
+			// The outer editor container has role="application" so that desktop screen readers treat
+			// the canvas as an interactive surface. Mark the UI layer as role="document" so that the
+			// toolbar, menus, and dialogs stay navigable to assistive tech — especially mobile screen
+			// readers like VoiceOver and TalkBack that do not announce role="application". See
+			// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/application_role
+			role="document"
 			// When the virtual keyboard is opening we want it to hide immediately.
 			// But when the virtual keyboard is closing we want to wait a bit before showing it again.
 			data-iseditinganything={hideToolbarWhileEditing}