tldraw 3.16.0-canary.e5e61b17cef3 → 3.16.0-canary.e618c2fbc95d

package/src/lib/ui/components/InputModeMenu.tsx

@@ -0,0 +1,65 @@
+import { useEditor, useValue } from '@tldraw/editor'
+import { useUiEvents } from '../context/events'
+import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'
+import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
+
+const MODES = ['auto', 'trackpad', 'mouse'] as const
+
+/** @public @react */
+export function InputModeMenu() {
+	const editor = useEditor()
+	const trackEvent = useUiEvents()
+
+	const inputMode = useValue('inputMode', () => editor.user.getUserPreferences().inputMode, [
+		editor,
+	])
+	const wheelBehavior = useValue('wheelBehavior', () => editor.getCameraOptions().wheelBehavior, [
+		editor,
+	])
+
+	const isModeChecked = (mode: string) => {
+		if (mode === 'auto') {
+			return inputMode === null
+		}
+		return inputMode === mode
+	}
+
+	const getLabel = (mode: string, wheelBehavior: 'zoom' | 'pan' | 'none') => {
+		if (mode === 'auto') {
+			return `action.toggle-auto-${wheelBehavior}`
+		}
+
+		return mode === 'trackpad' ? 'action.toggle-trackpad' : 'action.toggle-mouse'
+	}
+
+	return (
+		<TldrawUiMenuSubmenu id="help menu input-mode" label="menu.input-mode">
+			<TldrawUiMenuGroup id="peripheral-mode">
+				{MODES.map((mode) => (
+					<TldrawUiMenuCheckboxItem
+						id={`peripheral-mode-${mode}`}
+						key={mode}
+						label={getLabel(mode, wheelBehavior)}
+						checked={isModeChecked(mode)}
+						readonlyOk
+						onSelect={() => {
+							trackEvent('input-mode', { source: 'menu', value: mode })
+							switch (mode) {
+								case 'auto':
+									editor.user.updateUserPreferences({ inputMode: null })
+									break
+								case 'trackpad':
+									editor.user.updateUserPreferences({ inputMode: 'trackpad' })
+									break
+								case 'mouse':
+									editor.user.updateUserPreferences({ inputMode: 'mouse' })
+									break
+							}
+						}}
+					/>
+				))}
+			</TldrawUiMenuGroup>
+		</TldrawUiMenuSubmenu>
+	)
+}

package/src/lib/ui/components/LanguageMenu.tsx

@@ -18,6 +18,7 @@ export function LanguageMenu() {
 				{LANGUAGES.map(({ locale, label }) => (
 					<TldrawUiMenuCheckboxItem
 						id={`language-${locale}`}
+						lang={locale}
 						key={locale}
 						title={locale}
 						label={label}

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -2,6 +2,7 @@ import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'
 import { AccessibilityMenu } from '../AccessibilityMenu'
 import { ColorSchemeMenu } from '../ColorSchemeMenu'
 import { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'
+import { InputModeMenu } from '../InputModeMenu'
 import { LanguageMenu } from '../LanguageMenu'
 import {
 	ClipboardMenuGroup,
@@ -164,6 +165,9 @@ export function PreferencesGroup() {
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
 				</TldrawUiMenuGroup>
+				<TldrawUiMenuGroup id="input-mode">
+					<InputModeMenu />
+				</TldrawUiMenuGroup>
 				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
 				</TldrawUiMenuGroup>

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -159,7 +159,7 @@ export function DefaultMinimap() {
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_move',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 				point: screenPoint,
 				isPen: editor.getInstanceState().isPenMode,
 			}
@@ -204,6 +204,7 @@ export function DefaultMinimap() {
 			<canvas
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
+				data-testid="minimap.canvas"
 				ref={rCanvas}
 				className="tlui-minimap__canvas"
 				onDoubleClick={onDoubleClick}

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -3,7 +3,6 @@ import {
 	TLPageId,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -451,7 +450,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											if (e.key === 'Enter') {
 												if (page.id === currentPage.id) {
 													toggleEditing()
-													stopEventPropagation(e)
+													editor.markEventAsHandled(e)
 												}
 											}
 										}}

package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx

@@ -24,7 +24,9 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [
+		editor,
+	])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -62,7 +64,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 				data-testid="style.panel"
 				className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
 				data-ismobile={isMobile}
-				data-show-ui-labels={showUiLabels}
+				data-enhanced-a11y-mode={enhancedA11yMode}
 				onPointerLeave={handlePointerOut}
 			>
 				<StylePanelContextProvider styles={styles}>

package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -91,7 +91,7 @@ const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
 /** @public @react */
 export function StylePanelOpacityPicker() {
 	const editor = useEditor()
-	const { onHistoryMark, showUiLabels } = useStylePanelContext()
+	const { onHistoryMark, enhancedA11yMode } = useStylePanelContext()
 
 	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()
@@ -126,7 +126,9 @@ export function StylePanelOpacityPicker() {
 
 	return (
 		<>
-			{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}
+			{enhancedA11yMode && (
+				<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>
+			)}
 			<TldrawUiSlider
 				data-testid="style.opacity"
 				value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}

package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx

@@ -127,7 +127,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 
 	return (
 		<>
-			{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
 			<TldrawUiToolbar label={title}>
 				<TldrawUiToolbarToggleGroup
 					data-testid={`style.${uiType}`}
@@ -137,6 +137,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 				>
 					<Layout>
 						{items.map((item) => {
+							const isActive = value.type === 'shared' && value.value === item.value
 							const label =
 								title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
 							return (
@@ -145,10 +146,16 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 									key={item.value}
 									data-id={item.value}
 									data-testid={`style.${uiType}.${item.value}`}
-									aria-label={label}
+									aria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+									tooltip={
+										<>
+											<div>{label}</div>
+											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+										</>
+									}
 									value={item.value}
 									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-									data-isactive={value.type === 'shared' && value.value === item.value}
+									data-isactive={isActive}
 									title={label}
 									style={
 										style === (DefaultColorStyle as StyleProp<unknown>)

package/src/lib/ui/components/StylePanel/StylePanelContext.tsx

@@ -5,7 +5,7 @@ import { useUiEvents } from '../../context/events'
 /** @public */
 export interface StylePanelContext {
 	styles: ReadonlySharedStyleMap
-	showUiLabels: boolean
+	enhancedA11yMode: boolean
 	onHistoryMark(id: string): void
 	onValueChange<T>(style: StyleProp<T>, value: T): void
 }
@@ -23,7 +23,9 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex
 	const trackEvent = useUiEvents()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [
+		editor,
+	])
 	const onValueChange = useCallback(
 		function <T>(style: StyleProp<T>, value: T) {
 			editor.run(() => {
@@ -43,7 +45,7 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex
 		<StylePanelContext.Provider
 			value={{
 				styles: styles,
-				showUiLabels,
+				enhancedA11yMode,
 				onHistoryMark,
 				onValueChange,
 			}}

package/src/lib/ui/components/Toolbar/AltTextEditor.tsx

@@ -2,9 +2,9 @@ import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
-import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface AltTextEditorProps {
@@ -70,13 +70,14 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 				data-testid="media-toolbar.alt-text-input"
 				value={altText}
 				placeholder={msg('tool.media-alt-text-desc')}
+				aria-label={msg('tool.media-alt-text-desc')}
 				onValueChange={handleValueChange}
 				onComplete={handleComplete}
 				onCancel={handleAltTextCancel}
 				disabled={isReadonly}
 			/>
 			{!isReadonly && (
-				<TldrawUiToolbarButton
+				<TldrawUiButton
 					title={msg('tool.media-alt-text-confirm')}
 					data-testid="tool.media-alt-text-confirm"
 					type="icon"
@@ -84,7 +85,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 					onClick={handleConfirm}
 				>
 					<TldrawUiButtonIcon small icon="check" />
-				</TldrawUiToolbarButton>
+				</TldrawUiButton>
 			)}
 		</>
 	)

package/src/lib/ui/components/Toolbar/LinkEditor.tsx

@@ -2,9 +2,9 @@ import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
-import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface LinkEditorProps {
@@ -75,8 +75,9 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onComplete={handleLinkComplete}
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
+				aria-label="example.com"
 			/>
-			<TldrawUiToolbarButton
+			<TldrawUiButton
 				className="tlui-rich-text__toolbar-link-visit"
 				title={msg('tool.rich-text-link-visit')}
 				type="icon"
@@ -85,8 +86,8 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				disabled={!value}
 			>
 				<TldrawUiButtonIcon small icon="external-link" />
-			</TldrawUiToolbarButton>
-			<TldrawUiToolbarButton
+			</TldrawUiButton>
+			<TldrawUiButton
 				className="tlui-rich-text__toolbar-link-remove"
 				title={msg('tool.rich-text-link-remove')}
 				data-testid="rich-text.link-remove"
@@ -95,7 +96,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onClick={handleRemoveLink}
 			>
 				<TldrawUiButtonIcon small icon="trash" />
-			</TldrawUiToolbarButton>
+			</TldrawUiButton>
 		</>
 	)
 }

package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -101,7 +101,7 @@ export function OverflowingToolbar({
 						items: collectItems(child.children),
 						element: child as HTMLElement,
 					})
-				} else {
+				} else if (!child.hasAttribute('data-radix-popper-content-wrapper')) {
 					items.push({ type: 'item', element: child as HTMLElement })
 				}
 			}

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -1,8 +1,10 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { useActions } from '../../context/actions'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { kbdStr } from '../../kbd-utils'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
@@ -17,6 +19,7 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
 	const msg = useTranslation()
+	const actions = useActions()
 
 	const isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [
 		editor,
@@ -25,11 +28,15 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 
 	if (!activeToolId || !tool.isLockable) return null
 
+	const toggleLockAction = actions['toggle-tool-lock']
+	const tooltipContent = toggleLockAction?.kbd
+		? `${msg('action.toggle-tool-lock')} ${kbdStr(toggleLockAction.kbd)}`
+		: msg('action.toggle-tool-lock')
+
 	return (
-		<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>
+		<TldrawUiTooltip content={tooltipContent}>
 			<TldrawUiButton
 				type="normal"
-				title={msg('action.toggle-tool-lock')}
 				data-testid="tool-lock"
 				className={classNames('tlui-main-toolbar__lock-button', {
 					'tlui-main-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,

package/src/lib/ui/components/menu-items.tsx

@@ -652,11 +652,13 @@ export function ToggleKeyboardShortcutsItem() {
 }
 
 /** @public @react */
-export function ToggleUiLabelsItem() {
+export function ToggleEnhancedA11yModeItem() {
 	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [
+		editor,
+	])
 
-	return <TldrawUiMenuActionCheckboxItem actionId="toggle-ui-labels" checked={showUiLabels} />
+	return <TldrawUiMenuActionCheckboxItem actionId="enhanced-a11y-mode" checked={enhancedA11yMode} />
 }
 
 /** @public @react */

package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx

@@ -4,7 +4,6 @@ import {
 	clamp,
 	Editor,
 	react,
-	stopEventPropagation,
 	useAtom,
 	useEditor,
 	usePassThroughMouseOverEvents,
@@ -170,7 +169,7 @@ export const TldrawUiContextualToolbar = ({
 			data-visible={false}
 			data-testid="contextual-toolbar"
 			className={classNames('tlui-contextual-toolbar', className)}
-			onPointerDown={stopEventPropagation}
+			onPointerDown={editor.markEventAsHandled}
 		>
 			<TldrawUiToolbar
 				orientation="horizontal"

package/src/lib/ui/components/primitives/TldrawUiInput.tsx

@@ -1,4 +1,4 @@
-import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
+import { tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -35,6 +35,7 @@ export interface TLUiInputProps {
 	shouldManuallyMaintainScrollPositionWhenFocused?: boolean
 	value?: string
 	'data-testid'?: string
+	'aria-label'?: string
 }
 
 /** @public @react */
@@ -60,6 +61,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 			value,
 			'data-testid': dataTestId,
 			disabled,
+			'aria-label': ariaLabel,
 		},
 		ref
 	) {
@@ -118,7 +120,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						// `onChange` with a duplicated text value.
 						if (isComposing.current) return
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						onComplete?.(e.currentTarget.value)
 						break
 					}
@@ -126,7 +128,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						e.currentTarget.value = rInitialValue.current
 						onCancel?.(e.currentTarget.value)
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						break
 					}
 				}
@@ -198,6 +200,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 					onCompositionStart={handleCompositionStart}
 					onCompositionEnd={handleCompositionEnd}
 					autoFocus={autoFocus}
+					aria-label={ariaLabel}
 					placeholder={placeholder}
 					value={value}
 					data-testid={dataTestId}

package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx

@@ -71,6 +71,7 @@ export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToo
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				aria-label={props.title}
 				// The tooltip takes care of this.
 				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
@@ -127,7 +128,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
-	tooltip?: string
+	tooltip?: React.ReactNode
 }
 
 /** @public @react */

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -171,6 +171,20 @@ function TooltipSingleton() {
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip && isOpen) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				event.stopPropagation()
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown, { capture: true })
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown, { capture: true })
+		}
+	}, [editor, currentTooltip, isOpen])
+
 	// Update open state and trigger position
 	useEffect(() => {
 		let timer: ReturnType<typeof setTimeout> | null = null
@@ -253,7 +267,11 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
-		const showUiLabels = useValue('showUiLabels', () => editor?.user.getShowUiLabels(), [editor])
+		const enhancedA11yMode = useValue(
+			'enhancedA11yMode',
+			() => editor?.user.getEnhancedA11yMode(),
+			[editor]
+		)
 
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
@@ -279,13 +297,13 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
 
-		// Don't show tooltip if disabled, no content, or UI labels are disabled
+		// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
 		let delayDurationToUse
-		if (showUiLabels) {
+		if (enhancedA11yMode) {
 			delayDurationToUse = 0
 		} else {
 			delayDurationToUse =
@@ -293,9 +311,12 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		// Fallback to old behavior if no provider
-		if (!hasProvider) {
+		if (!hasProvider || enhancedA11yMode) {
 			return (
-				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
+				<_Tooltip.Root
+					delayDuration={delayDurationToUse}
+					disableHoverableContent={!enhancedA11yMode}
+				>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>

package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx

@@ -19,6 +19,7 @@ export interface TLUiMenuCheckboxItemProps<
 	kbd?: string
 	title?: string
 	label?: TranslationKey | { [key: string]: TranslationKey }
+	lang?: string
 	readonlyOk?: boolean
 	onSelect(source: TLUiEventSource): Promise<void> | void
 	toggle?: boolean
@@ -34,6 +35,7 @@ export function TldrawUiMenuCheckboxItem<
 	id,
 	kbd,
 	label,
+	lang,
 	readonlyOk,
 	onSelect,
 	toggle = false,
@@ -55,6 +57,7 @@ export function TldrawUiMenuCheckboxItem<
 			return (
 				<_DropdownMenu.CheckboxItem
 					dir="ltr"
+					lang={lang}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					title={labelStr}
 					onSelect={(e) => {
@@ -84,6 +87,7 @@ export function TldrawUiMenuCheckboxItem<
 					key={id}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					dir="ltr"
+					lang={lang}
 					title={labelStr}
 					onSelect={(e) => {
 						onSelect(sourceId)

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -333,7 +333,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_down',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -345,7 +345,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_move',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -365,7 +365,7 @@ function useDraggableEvents(
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 

package/src/lib/ui/context/actions.tsx

@@ -1270,16 +1270,16 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				checkbox: true,
 			},
 			{
-				id: 'toggle-ui-labels',
+				id: 'enhanced-a11y-mode',
 				label: {
-					default: 'action.toggle-ui-labels',
-					menu: 'action.toggle-ui-labels.menu',
+					default: 'action.enhanced-a11y-mode',
+					menu: 'action.enhanced-a11y-mode.menu',
 				},
 				readonlyOk: true,
 				onSelect(source) {
-					trackEvent('toggle-ui-labels', { source })
+					trackEvent('enhanced-a11y-mode', { source })
 					editor.user.updateUserPreferences({
-						showUiLabels: !editor.user.getShowUiLabels(),
+						enhancedA11yMode: !editor.user.getEnhancedA11yMode(),
 					})
 				},
 				checkbox: true,
@@ -1344,28 +1344,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					}
 				},
 			},
-			{
-				id: 'toggle-focus-mode',
-				label: {
-					default: 'action.toggle-focus-mode',
-					menu: 'action.toggle-focus-mode.menu',
-				},
-				readonlyOk: true,
-				kbd: 'cmd+.,ctrl+.',
-				checkbox: true,
-				onSelect(source) {
-					// this needs to be deferred because it causes the menu
-					// UI to unmount which puts us in a dodgy state
-					editor.timers.requestAnimationFrame(() => {
-						editor.run(() => {
-							trackEvent('toggle-focus-mode', { source })
-							helpers.clearDialogs()
-							helpers.clearToasts()
-							editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
-						})
-					})
-				},
-			},
 			{
 				id: 'toggle-grid',
 				label: {
@@ -1584,6 +1562,19 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
 
+					const onlySelectedShape = editor.getOnlySelectedShape()
+					if (
+						onlySelectedShape &&
+						(editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image') ||
+							editor.isShapeOfType<TLVideoShape>(onlySelectedShape, 'video'))
+					) {
+						const firstToolbarButton = editor
+							.getContainer()
+							.querySelector('.tlui-contextual-toolbar button:first-child') as HTMLElement | null
+						firstToolbarButton?.focus()
+						return
+					}
+
 					const firstButton = editor
 						.getContainer()
 						.querySelector('.tlui-style-panel button') as HTMLElement | null