diff --git a/packages/tldraw/src/components/Primitives/DropdownMenu/DMCheckboxItem.tsx b/packages/tldraw/src/components/Primitives/DropdownMenu/DMCheckboxItem.tsx index 8276a65fa..6877d73b3 100644 --- a/packages/tldraw/src/components/Primitives/DropdownMenu/DMCheckboxItem.tsx +++ b/packages/tldraw/src/components/Primitives/DropdownMenu/DMCheckboxItem.tsx @@ -11,6 +11,7 @@ interface DMCheckboxItemProps { variant?: RowButtonProps['variant'] kbd?: string id?: string + ariaLabel?: string } export function DMCheckboxItem({ @@ -20,6 +21,7 @@ export function DMCheckboxItem({ onCheckedChange, kbd, id, + ariaLabel, children, }: DMCheckboxItemProps) { return ( @@ -31,6 +33,7 @@ export function DMCheckboxItem({ disabled={disabled} asChild id={id} + aria-label={ariaLabel} > {children} diff --git a/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx b/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx index 965b5e53a..9a38df8f3 100644 --- a/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx @@ -61,6 +61,7 @@ export function PreferencesMenu() { onCheckedChange={toggleDarkMode} kbd="#⇧D" id="TD-MenuItem-Preferences-Dark_Mode" + ariaLabel={intl.formatMessage({ id: 'preferences.dark.mode' })} > @@ -69,6 +70,7 @@ export function PreferencesMenu() { onCheckedChange={toggleFocusMode} kbd="#." id="TD-MenuItem-Preferences-Focus_Mode" + ariaLabel={intl.formatMessage({ id: 'preferences.focus.mode' })} > @@ -76,6 +78,7 @@ export function PreferencesMenu() { checked={settings.isDebugMode} onCheckedChange={toggleDebugMode} id="TD-MenuItem-Preferences-Debug_Mode" + ariaLabel={intl.formatMessage({ id: 'preferences.debug.mode' })} > @@ -85,6 +88,7 @@ export function PreferencesMenu() { onCheckedChange={toggleGrid} kbd="#⇧G" id="TD-MenuItem-Preferences-Grid" + ariaLabel={intl.formatMessage({ id: 'preferences.show.grid' })} > @@ -92,6 +96,7 @@ export function PreferencesMenu() { checked={settings.isCadSelectMode} onCheckedChange={toggleCadSelectMode} id="TD-MenuItem-Preferences-Cad_Selection" + ariaLabel={intl.formatMessage({ id: 'preferences.use.cad.selection' })} > @@ -99,6 +104,7 @@ export function PreferencesMenu() { checked={settings.keepStyleMenuOpen} onCheckedChange={toggleKeepStyleMenuOpen} id="TD-MenuItem-Preferences-Style_menu" + ariaLabel={intl.formatMessage({ id: 'preferences.keep.stylemenu.open' })} > @@ -109,6 +115,7 @@ export function PreferencesMenu() { checked={settings.dockPosition === position} onCheckedChange={() => handleChangeDockPosition(position as TDDockPosition)} id={`TD-MenuItem-DockPosition-${position}`} + ariaLabel={`DockPosition-${position}`} > @@ -123,6 +130,7 @@ export function PreferencesMenu() { checked={settings.exportBackground === exportBackground} onCheckedChange={() => selectExportBackground(exportBackground as TDExportBackground)} id={`TD-MenuItem-ExportBackground-${exportBackground}`} + ariaLabel={`ExportBackground-${exportBackground}`} >