PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: add PreferencesMenu aria-label (#1131)

Browse source 
* Add aria-label

* Add DMCheckboxItemProps ariaLabel
This commit is contained in:
Jang Min 2023-03-10 04:59:54 +09:00 committed by GitHub
parent 967efd6b7f
commit 257a7e750c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/tldraw/src/components/Primitives/DropdownMenu/DMCheckboxItem.tsx
View file

@ -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}
>
<RowButton kbd={kbd} variant={variant} hasIndicator>
{children}

8
packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx
View file

@ -61,6 +61,7 @@ export function PreferencesMenu() {
onCheckedChange={toggleDarkMode}
kbd="#⇧D"
id="TD-MenuItem-Preferences-Dark_Mode"
ariaLabel={intl.formatMessage({ id: 'preferences.dark.mode' })}
>
<FormattedMessage id="preferences.dark.mode" />
</DMCheckboxItem>
@ -69,6 +70,7 @@ export function PreferencesMenu() {
onCheckedChange={toggleFocusMode}
kbd="#."
id="TD-MenuItem-Preferences-Focus_Mode"
ariaLabel={intl.formatMessage({ id: 'preferences.focus.mode' })}
>
<FormattedMessage id="preferences.focus.mode" />
</DMCheckboxItem>
@ -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' })}
>
<FormattedMessage id="preferences.debug.mode" />
</DMCheckboxItem>
@ -85,6 +88,7 @@ export function PreferencesMenu() {
onCheckedChange={toggleGrid}
kbd="#⇧G"
id="TD-MenuItem-Preferences-Grid"
ariaLabel={intl.formatMessage({ id: 'preferences.show.grid' })}
>
<FormattedMessage id="preferences.show.grid" />
</DMCheckboxItem>
@ -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' })}
>
<FormattedMessage id="preferences.use.cad.selection" />
</DMCheckboxItem>
@ -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' })}
>
<FormattedMessage id="preferences.keep.stylemenu.open" />
</DMCheckboxItem>
@ -109,6 +115,7 @@ export function PreferencesMenu() {
checked={settings.dockPosition === position}
onCheckedChange={() => handleChangeDockPosition(position as TDDockPosition)}
id={`TD-MenuItem-DockPosition-${position}`}
ariaLabel={`DockPosition-${position}`}
>
<StyledText>
<FormattedMessage id={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}`}
>
<StyledText>
<FormattedMessage id={exportBackground as string} />