a11y: add preference to show labels/tooltips (tldraw#6444)

This is to address these issues:
- https://linear.app/tldraw/issue/ACC-72/add-labels-to-the-inputs
-
https://linear.app/tldraw/issue/ACC-4/the-light-grey-states-in-the-panel-on-the-right-side-dont-have-enough


https://github.com/user-attachments/assets/3e4f68f0-1468-4e77-98d4-5a10c904ac4a

<img width="952" height="1016" alt="Screenshot 2025-07-11 at 12 43 39"
src="https://github.com/user-attachments/assets/e21b2ddd-513d-44db-aa4e-908a68104383"
/>
<img width="314" height="854" alt="Screenshot 2025-07-11 at 12 43 48"
src="https://github.com/user-attachments/assets/c1442ff2-6ec5-4429-b7d7-a647868719e8"
/>
<img width="424" height="396" alt="Screenshot 2025-07-11 at 13 35 45"
src="https://github.com/user-attachments/assets/8eb4e7dd-5dab-4091-92ba-05a189aace17"
/>
<img width="1090" height="236" alt="Screenshot 2025-07-11 at 13 35 59"
src="https://github.com/user-attachments/assets/b93b0a9c-9f94-4040-b9c6-ebfdf16c5282"
/>

Focus ring for selected items:
<img width="382" height="404" alt="Screenshot 2025-07-14 at 15 07 02"
src="https://github.com/user-attachments/assets/451cac56-6d4b-4438-9be0-298aa5d16675"
/>


### Change type

- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`

### Release notes

- a11y: add preference to show labels/tooltips

### API changes

- add `showUiLabels` as a preference
- add `TldrawUiTooltip` as a new component

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alex <alex@tldraw.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
Co-authored-by: Nakul Sharma <110083584+nakul-bigpi@users.noreply.github.com>

Author: 10 people

apps/dotcom/client/e2e/fixtures/Database.ts

@@ -37,6 +37,7 @@ const defaultUser = {
 	isWrapMode: null,
 	isDynamicSizeMode: null,
 	isPasteAtCursorMode: null,
+	showUiLabels: null,
 }
 
 export class Database {

apps/dotcom/client/e2e/tests/sharing.spec.ts

@@ -241,7 +241,7 @@ test.describe('signed in user on someone elses file', () => {
 		await expect(newPage.getByTestId('tla-error-icon')).not.toBeVisible()
 		// We should also see the file in the sidebar and a guest badge icon next to it
 		await expect(newPage.getByTestId('tla-sidebar').getByText(newName)).toBeVisible()
-		await expect(newPage.getByTestId(`guest-badge-${newName}`).getByRole('button')).toBeVisible()
+		await expect(newPage.getByTestId(`guest-badge-${newName}`)).toBeVisible()
 	})
 
 	test('tabs work correctly', async ({ browser, sidebar, shareMenu }) => {

apps/dotcom/client/src/tla/app/TldrawApp.ts

@@ -709,6 +709,7 @@ export class TldrawApp {
 			isWrapMode: restOfPreferences.isWrapMode ?? null,
 			isDynamicSizeMode: restOfPreferences.isDynamicSizeMode ?? null,
 			isPasteAtCursorMode: restOfPreferences.isPasteAtCursorMode ?? null,
+			showUiLabels: restOfPreferences.showUiLabels ?? null,
 		})
 		if (didCreate) {
 			opts.trackEvent('create-user', { source: 'app' })

apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarFileLink.tsx

@@ -5,8 +5,8 @@ import { KeyboardEvent, MouseEvent, useCallback, useEffect, useRef, useState } f
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import {
 	TldrawUiMenuContextProvider,
+	TldrawUiTooltip,
 	preventDefault,
-	useContainer,
 	useMenuIsOpen,
 	useValue,
 } from 'tldraw'
@@ -20,13 +20,6 @@ import { F, defineMessages, useIntl } from '../../../utils/i18n'
 import { toggleMobileSidebar, useIsSidebarOpenMobile } from '../../../utils/local-session-state'
 import { FileItems, FileItemsWrapper } from '../../TlaFileMenu/TlaFileMenu'
 import { TlaIcon } from '../../TlaIcon/TlaIcon'
-import {
-	TlaTooltipArrow,
-	TlaTooltipContent,
-	TlaTooltipPortal,
-	TlaTooltipRoot,
-	TlaTooltipTrigger,
-} from '../../TlaTooltip/TlaTooltip'
 import styles from '../sidebar.module.css'
 import { TlaSidebarFileLinkMenu } from './TlaSidebarFileLinkMenu'
 import { TlaSidebarRenameInline } from './TlaSidebarRenameInline'
@@ -213,7 +206,6 @@ export function TlaSidebarFileLinkInner({
 }
 
 function GuestBadge({ file, href }: { file: TlaFile; href: string }) {
-	const container = useContainer()
 	const ownerName = file.ownerName.trim()
 	const testId = `guest-badge-${file.name}`
 	const navigate = useNavigate()
@@ -232,29 +224,26 @@ function GuestBadge({ file, href }: { file: TlaFile; href: string }) {
 
 	return (
 		<div className={styles.sidebarFileListItemGuestBadge} data-testid={testId}>
-			<TlaTooltipRoot disableHoverableContent>
-				<TlaTooltipTrigger
+			<TldrawUiTooltip
+				content={
+					<>
+						{ownerName ? (
+							<F defaultMessage={`Shared by {ownerName}`} values={{ ownerName }} />
+						) : (
+							<F defaultMessage="Shared with you" />
+						)}
+					</>
+				}
+			>
+				<div
 					dir="ltr"
 					// this is needed to prevent the tooltip from closing when clicking the badge
 					onClick={handleToolTipClick}
 					className={styles.sidebarFileListItemGuestBadgeTrigger}
 				>
 					<TlaIcon icon="group" className="tlui-guest-icon" />
-				</TlaTooltipTrigger>
-				<TlaTooltipPortal container={container}>
-					<TlaTooltipContent
-						// this is also needed to prevent the tooltip from closing when clicking the badge
-						onPointerDownOutside={preventDefault}
-					>
-						{ownerName ? (
-							<F defaultMessage={`Shared by {ownerName}`} values={{ ownerName }} />
-						) : (
-							<F defaultMessage="Shared with you" />
-						)}
-						<TlaTooltipArrow />
-					</TlaTooltipContent>
-				</TlaTooltipPortal>
-			</TlaTooltipRoot>
+				</div>
+			</TldrawUiTooltip>
 		</div>
 	)
 }

apps/dotcom/client/src/tla/components/TlaTooltip/TlaTooltip.tsx

@@ -10,16 +10,9 @@ import {
 	useEffect,
 	useState,
 } from 'react'
-import { TldrawUiButton, TldrawUiIcon } from 'tldraw'
+import { TldrawUiButton, TldrawUiIcon, TldrawUiTooltip } from 'tldraw'
 import { defineMessages, useMsg } from '../../utils/i18n'
 import { TlaIcon } from '../TlaIcon/TlaIcon'
-import {
-	TlaTooltipArrow,
-	TlaTooltipContent,
-	TlaTooltipPortal,
-	TlaTooltipRoot,
-	TlaTooltipTrigger,
-} from '../TlaTooltip/TlaTooltip'
 import styles from './menu.module.css'
 
 const messages = defineMessages({
@@ -59,30 +52,22 @@ export function TlaMenuControlInfoTooltip({
 
 	return (
 		<div className={styles.menuInfoTriggerContainer}>
-			<TlaTooltipRoot>
-				<TlaTooltipTrigger dir="ltr" asChild>
-					{href ? (
-						<a
-							onClick={onClick}
-							href={href}
-							target="_blank nofollow noreferrer"
-							className={styles.menuInfoTrigger}
-						>
-							<TldrawUiIcon label={helpMsg} icon="help-circle" small />
-						</a>
-					) : (
-						<TldrawUiButton type="icon" className={styles.menuInfoTrigger}>
-							<TldrawUiIcon label={helpMsg} icon="help-circle" small />
-						</TldrawUiButton>
-					)}
-				</TlaTooltipTrigger>
-				<TlaTooltipPortal>
-					<TlaTooltipContent>
-						{children}
-						<TlaTooltipArrow />
-					</TlaTooltipContent>
-				</TlaTooltipPortal>
-			</TlaTooltipRoot>
+			<TldrawUiTooltip content={children}>
+				{href ? (
+					<a
+						onClick={onClick}
+						href={href}
+						target="_blank nofollow noreferrer"
+						className={styles.menuInfoTrigger}
+					>
+						<TldrawUiIcon label={helpMsg} icon="help-circle" small />
+					</a>
+				) : (
+					<TldrawUiButton type="icon" className={styles.menuInfoTrigger}>
+						<TldrawUiIcon label={helpMsg} icon="help-circle" small />
+					</TldrawUiButton>
+				)}
+			</TldrawUiTooltip>
 		</div>
 	)
 }