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'] variant?: RowButtonProps['variant']
kbd?: string kbd?: string
id?: string id?: string
ariaLabel?: string
} }
export function DMCheckboxItem({ export function DMCheckboxItem({
@ -20,6 +21,7 @@ export function DMCheckboxItem({
onCheckedChange, onCheckedChange,
kbd, kbd,
id, id,
ariaLabel,
children, children,
}: DMCheckboxItemProps) { }: DMCheckboxItemProps) {
return ( return (
@ -31,6 +33,7 @@ export function DMCheckboxItem({
disabled={disabled} disabled={disabled}
asChild asChild
id={id} id={id}
aria-label={ariaLabel}
> >
<RowButton kbd={kbd} variant={variant} hasIndicator> <RowButton kbd={kbd} variant={variant} hasIndicator>
{children} {children}

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

@ -61,6 +61,7 @@ export function PreferencesMenu() {
onCheckedChange={toggleDarkMode} onCheckedChange={toggleDarkMode}
kbd="#⇧D" kbd="#⇧D"
id="TD-MenuItem-Preferences-Dark_Mode" id="TD-MenuItem-Preferences-Dark_Mode"
ariaLabel={intl.formatMessage({ id: 'preferences.dark.mode' })}
> >
<FormattedMessage id="preferences.dark.mode" /> <FormattedMessage id="preferences.dark.mode" />
</DMCheckboxItem> </DMCheckboxItem>
@ -69,6 +70,7 @@ export function PreferencesMenu() {
onCheckedChange={toggleFocusMode} onCheckedChange={toggleFocusMode}
kbd="#." kbd="#."
id="TD-MenuItem-Preferences-Focus_Mode" id="TD-MenuItem-Preferences-Focus_Mode"
ariaLabel={intl.formatMessage({ id: 'preferences.focus.mode' })}
> >
<FormattedMessage id="preferences.focus.mode" /> <FormattedMessage id="preferences.focus.mode" />
</DMCheckboxItem> </DMCheckboxItem>
@ -76,6 +78,7 @@ export function PreferencesMenu() {
checked={settings.isDebugMode} checked={settings.isDebugMode}
onCheckedChange={toggleDebugMode} onCheckedChange={toggleDebugMode}
id="TD-MenuItem-Preferences-Debug_Mode" id="TD-MenuItem-Preferences-Debug_Mode"
ariaLabel={intl.formatMessage({ id: 'preferences.debug.mode' })}
> >
<FormattedMessage id="preferences.debug.mode" /> <FormattedMessage id="preferences.debug.mode" />
</DMCheckboxItem> </DMCheckboxItem>
@ -85,6 +88,7 @@ export function PreferencesMenu() {
onCheckedChange={toggleGrid} onCheckedChange={toggleGrid}
kbd="#⇧G" kbd="#⇧G"
id="TD-MenuItem-Preferences-Grid" id="TD-MenuItem-Preferences-Grid"
ariaLabel={intl.formatMessage({ id: 'preferences.show.grid' })}
> >
<FormattedMessage id="preferences.show.grid" /> <FormattedMessage id="preferences.show.grid" />
</DMCheckboxItem> </DMCheckboxItem>
@ -92,6 +96,7 @@ export function PreferencesMenu() {
checked={settings.isCadSelectMode} checked={settings.isCadSelectMode}
onCheckedChange={toggleCadSelectMode} onCheckedChange={toggleCadSelectMode}
id="TD-MenuItem-Preferences-Cad_Selection" id="TD-MenuItem-Preferences-Cad_Selection"
ariaLabel={intl.formatMessage({ id: 'preferences.use.cad.selection' })}
> >
<FormattedMessage id="preferences.use.cad.selection" /> <FormattedMessage id="preferences.use.cad.selection" />
</DMCheckboxItem> </DMCheckboxItem>
@ -99,6 +104,7 @@ export function PreferencesMenu() {
checked={settings.keepStyleMenuOpen} checked={settings.keepStyleMenuOpen}
onCheckedChange={toggleKeepStyleMenuOpen} onCheckedChange={toggleKeepStyleMenuOpen}
id="TD-MenuItem-Preferences-Style_menu" id="TD-MenuItem-Preferences-Style_menu"
ariaLabel={intl.formatMessage({ id: 'preferences.keep.stylemenu.open' })}
> >
<FormattedMessage id="preferences.keep.stylemenu.open" /> <FormattedMessage id="preferences.keep.stylemenu.open" />
</DMCheckboxItem> </DMCheckboxItem>
@ -109,6 +115,7 @@ export function PreferencesMenu() {
checked={settings.dockPosition === position} checked={settings.dockPosition === position}
onCheckedChange={() => handleChangeDockPosition(position as TDDockPosition)} onCheckedChange={() => handleChangeDockPosition(position as TDDockPosition)}
id={`TD-MenuItem-DockPosition-${position}`} id={`TD-MenuItem-DockPosition-${position}`}
ariaLabel={`DockPosition-${position}`}
> >
<StyledText> <StyledText>
<FormattedMessage id={position} /> <FormattedMessage id={position} />
@ -123,6 +130,7 @@ export function PreferencesMenu() {
checked={settings.exportBackground === exportBackground} checked={settings.exportBackground === exportBackground}
onCheckedChange={() => selectExportBackground(exportBackground as TDExportBackground)} onCheckedChange={() => selectExportBackground(exportBackground as TDExportBackground)}
id={`TD-MenuItem-ExportBackground-${exportBackground}`} id={`TD-MenuItem-ExportBackground-${exportBackground}`}
ariaLabel={`ExportBackground-${exportBackground}`}
> >
<StyledText> <StyledText>
<FormattedMessage id={exportBackground as string} /> <FormattedMessage id={exportBackground as string} />