tldraw 3.16.0-next.6611943ca24a → 3.16.0-next.8eb6d5c2d8f4

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

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

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/TldrawUiSlider.tsx

@@ -1,7 +1,9 @@
+import { tltime } from '@tldraw/editor'
 import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -11,7 +13,7 @@ export interface TLUiSliderProps {
 	label: string
 	title: string
 	onValueChange(value: number): void
-	onHistoryMark(id: string): void
+	onHistoryMark?(id: string): void
 	'data-testid'?: string
 	ariaValueModifier?: number
 }
@@ -32,6 +34,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	ref
 ) {
 	const msg = useTranslation()
+	const [titleAndLabel, setTitleAndLabel] = useState('')
 
 	// XXX: Radix starts out our slider with a tabIndex of 0
 	// This causes some tab focusing issues, most prevelant in MobileStylePanel,
@@ -49,9 +52,25 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		onHistoryMark('click slider')
+		tooltipManager.hideAllTooltips()
+		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 
+	// N.B. This is a bit silly. The Radix slider auto-focuses which
+	// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,
+	// which in turn makes the tooltip display prematurely.
+	// This makes it wait until we've focused to show the tooltip.
+	useEffect(() => {
+		const timeout = tltime.setTimeout(
+			'set title and label',
+			() => {
+				setTitleAndLabel(title + ' — ' + msg(label as TLUiTranslationKey))
+			},
+			0
+		)
+		return () => clearTimeout(timeout)
+	}, [label, msg, title])
+
 	// N.B. Annoying. For a11y purposes, we need Tab to work.
 	// For some reason, Radix has some custom behavior here
 	// that interferes with tabbing past the slider and then
@@ -64,36 +83,37 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 
 	return (
 		<div className="tlui-slider__container">
-			<_Slider.Root
-				data-testid={testId}
-				className="tlui-slider"
-				dir="ltr"
-				min={min ?? 0}
-				max={steps}
-				step={1}
-				value={value !== null ? [value] : undefined}
-				onPointerDown={handlePointerDown}
-				onValueChange={handleValueChange}
-				onKeyDownCapture={handleKeyEvent}
-				onKeyUpCapture={handleKeyEvent}
-				title={title + ' — ' + msg(label as TLUiTranslationKey)}
-			>
-				<_Slider.Track className="tlui-slider__track" dir="ltr">
-					{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
-				</_Slider.Track>
-				{value !== null && (
-					<_Slider.Thumb
-						aria-valuemin={(min ?? 0) * ariaValueModifier}
-						aria-valuenow={value * ariaValueModifier}
-						aria-valuemax={steps * ariaValueModifier}
-						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
-						className="tlui-slider__thumb"
-						dir="ltr"
-						ref={ref}
-						tabIndex={tabIndex}
-					/>
-				)}
-			</_Slider.Root>
+			<TldrawUiTooltip content={titleAndLabel}>
+				<_Slider.Root
+					data-testid={testId}
+					className="tlui-slider"
+					dir="ltr"
+					min={min ?? 0}
+					max={steps}
+					step={1}
+					value={value !== null ? [value] : undefined}
+					onPointerDown={handlePointerDown}
+					onValueChange={handleValueChange}
+					onKeyDownCapture={handleKeyEvent}
+					onKeyUpCapture={handleKeyEvent}
+				>
+					<_Slider.Track className="tlui-slider__track" dir="ltr">
+						{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
+					</_Slider.Track>
+					{value !== null && (
+						<_Slider.Thumb
+							aria-valuemin={(min ?? 0) * ariaValueModifier}
+							aria-valuenow={value * ariaValueModifier}
+							aria-valuemax={steps * ariaValueModifier}
+							aria-label={titleAndLabel}
+							className="tlui-slider__thumb"
+							dir="ltr"
+							ref={ref}
+							tabIndex={tabIndex}
+						/>
+					)}
+				</_Slider.Root>
+			</TldrawUiTooltip>
 		</div>
 	)
 })

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)}
@@ -94,6 +95,7 @@ export interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDi
 	// TODO: fix up this type later
 	defaultValue?: any
 	type: 'single' | 'multiple'
+	asChild?: boolean
 }
 
 /** @public @react */
@@ -101,10 +103,12 @@ export const TldrawUiToolbarToggleGroup = ({
 	children,
 	className,
 	type,
+	asChild,
 	...props
 }: TLUiToolbarToggleGroupProps) => {
 	return (
 		<_Toolbar.ToggleGroup
+			asChild={asChild}
 			type={type}
 			{...props}
 			// TODO: this fixes a bug in Radix until they fix it.
@@ -124,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

@@ -6,6 +6,7 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -24,18 +25,20 @@ export interface TldrawUiTooltipProps {
 	delayDuration?: number
 }
 
+interface CurrentTooltip {
+	id: string
+	content: ReactNode
+	side: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset: number
+	showOnMobile: boolean
+	targetElement: HTMLElement
+	delayDuration: number
+}
+
 // Singleton tooltip manager
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltip = atom<{
-		id: string
-		content: ReactNode
-		side: 'top' | 'right' | 'bottom' | 'left'
-		sideOffset: number
-		showOnMobile: boolean
-		targetElement: HTMLElement
-		delayDuration: number | undefined
-	} | null>('current tooltip', null)
+	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
 
 	static getInstance(): TooltipManager {
@@ -52,7 +55,7 @@ class TooltipManager {
 		side: 'top' | 'right' | 'bottom' | 'left',
 		sideOffset: number,
 		showOnMobile: boolean,
-		delayDuration: number | undefined
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -72,6 +75,15 @@ class TooltipManager {
 		})
 	}
 
+	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
+		this.currentTooltip.update((tooltip) => {
+			if (tooltip?.id === tooltipId) {
+				return update(tooltip)
+			}
+			return tooltip
+		})
+	}
+
 	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
 		const hide = () => {
 			// Only hide if this is the current tooltip
@@ -139,11 +151,10 @@ export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderPro
 
 // The singleton tooltip component that renders once
 function TooltipSingleton() {
-	const editor = useMaybeEditor()
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
 	const isFirstShowRef = useRef(true)
-	const showTimeoutRef = useRef<number | null>(null)
+	const editor = useMaybeEditor()
 
 	const currentTooltip = useValue(
 		'current tooltip',
@@ -151,14 +162,32 @@ function TooltipSingleton() {
 		[]
 	)
 
-	// Update open state and trigger position
+	const cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])
+
+	// Hide tooltip when camera is moving (panning/zooming)
+	useEffect(() => {
+		if (cameraState === 'moving' && isOpen && currentTooltip) {
+			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
+		}
+	}, [cameraState, isOpen, currentTooltip, editor])
+
 	useEffect(() => {
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
+		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
 		if (currentTooltip && triggerRef.current) {
 			// Position the invisible trigger element over the active element
 			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
@@ -173,11 +202,12 @@ function TooltipSingleton() {
 			trigger.style.zIndex = '9999'
 
 			// Handle delay for first show
-			if (isFirstShowRef.current && editor) {
-				showTimeoutRef.current = editor.timers.setTimeout(() => {
+			if (isFirstShowRef.current) {
+				// eslint-disable-next-line no-restricted-globals
+				timer = setTimeout(() => {
 					setIsOpen(true)
 					isFirstShowRef.current = false
-				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
@@ -188,7 +218,13 @@ function TooltipSingleton() {
 			// Reset first show state after tooltip is hidden
 			isFirstShowRef.current = true
 		}
-	}, [editor, currentTooltip])
+
+		return () => {
+			if (timer !== null) {
+				clearTimeout(timer)
+			}
+		}
+	}, [currentTooltip])
 
 	if (!currentTooltip) {
 		return null
@@ -231,6 +267,11 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
+		const enhancedA11yMode = useValue(
+			'enhancedA11yMode',
+			() => editor?.user.getEnhancedA11yMode(),
+			[editor]
+		)
 
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
@@ -244,19 +285,37 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [editor, hasProvider])
 
-		// Don't show tooltip if disabled, no content, or UI labels are disabled
+		useLayoutEffect(() => {
+			if (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {
+				tooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({
+					...tooltip,
+					content,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+				}))
+			}
+		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
+
+		// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
+		let delayDurationToUse
+		if (enhancedA11yMode) {
+			delayDurationToUse = 0
+		} else {
+			delayDurationToUse =
+				delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		}
+
 		// Fallback to old behavior if no provider
-		if (!hasProvider) {
+		if (!hasProvider || enhancedA11yMode) {
 			return (
 				<_Tooltip.Root
-					delayDuration={
-						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
-					}
-					disableHoverableContent
+					delayDuration={delayDurationToUse}
+					disableHoverableContent={!enhancedA11yMode}
 				>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
@@ -288,7 +347,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 
@@ -306,7 +365,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 

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

@@ -213,7 +213,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -247,7 +247,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -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),
 			})
 		}
 
@@ -392,7 +392,7 @@ function useDraggableEvents(
 
 function DraggableToolbarButton({
 	id,
-	labelToUse,
+	labelStr,
 	titleStr,
 	disabled,
 	isSelected,
@@ -403,7 +403,7 @@ function DraggableToolbarButton({
 }: {
 	id: string
 	disabled: boolean
-	labelToUse?: string
+	labelStr?: string
 	titleStr?: string
 	isSelected?: boolean
 	icon: TLUiMenuItemProps['icon']
@@ -416,7 +416,7 @@ function DraggableToolbarButton({
 	if (overflow) {
 		return (
 			<TldrawUiToolbarButton
-				aria-label={labelToUse}
+				aria-label={labelStr}
 				aria-pressed={isSelected ? 'true' : 'false'}
 				isActive={isSelected}
 				className="tlui-button-grid__button"
@@ -434,7 +434,7 @@ function DraggableToolbarButton({
 
 	return (
 		<TldrawUiToolbarButton
-			aria-label={labelToUse}
+			aria-label={labelStr}
 			aria-pressed={isSelected ? 'true' : 'false'}
 			data-testid={`tools.${id}`}
 			data-value={id}

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

@@ -225,7 +225,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-as', { format: 'svg', source })
-					helpers.exportAs(ids, 'svg', getExportName(editor, defaultDocumentName))
+					helpers.exportAs(ids, { format: 'svg', name: getExportName(editor, defaultDocumentName) })
 				},
 			},
 			{
@@ -241,7 +241,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-as', { format: 'png', source })
-					helpers.exportAs(ids, 'png', getExportName(editor, defaultDocumentName))
+					helpers.exportAs(ids, { format: 'png', name: getExportName(editor, defaultDocumentName) })
 				},
 			},
 			{
@@ -257,11 +257,10 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-all-as', { format: 'svg', source })
-					helpers.exportAs(
-						Array.from(editor.getCurrentPageShapeIds()),
-						'svg',
-						getExportName(editor, defaultDocumentName)
-					)
+					helpers.exportAs(Array.from(editor.getCurrentPageShapeIds()), {
+						format: 'svg',
+						name: getExportName(editor, defaultDocumentName),
+					})
 				},
 			},
 			{
@@ -276,7 +275,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-all-as', { format: 'png', source })
-					helpers.exportAs(ids, 'png', getExportName(editor, defaultDocumentName))
+					helpers.exportAs(ids, { format: 'png', name: getExportName(editor, defaultDocumentName) })
 				},
 			},
 			{
@@ -1271,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,
@@ -1345,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: {
@@ -1585,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