improvement: a11y: add aria-keyshortcuts

Not adding one for the "Settings" button because I'm lazy + it's already available in the "File" menu as an "accelerator".
deltachat · Sep 16, 2024 · 610f7a6 · 610f7a6
1 parent b7c1422
commit 610f7a6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 1 deletion.
diff --git a/packages/frontend/src/components/KeyboardShortcutHint.tsx b/packages/frontend/src/components/KeyboardShortcutHint.tsx
@@ -159,6 +159,8 @@ export function enterKeySendsKeyboardShortcuts(
   const CtrlOrMetaEnter = isMac ? MetaEnter : CtrlEnter
   const ShiftEnter = ['Shift', 'Enter']
 
+  // FYI the send button's `aria-keyshortcuts` relies on this code,
+  // in a not-so-beautiful way.
   if (enterKeySends) {
     return [
       {

diff --git a/packages/frontend/src/components/SearchInput/index.tsx b/packages/frontend/src/components/SearchInput/index.tsx
@@ -51,6 +51,7 @@ export default function SearchInput(props: Props) {
         className={classNames(styles.searchInput)}
         ref={props.inputRef}
         spellCheck={false}
+        aria-keyshortcuts='Control+K'
       />
       {hasValue && (
         <SearchInputButton

diff --git a/packages/frontend/src/components/composer/Composer.tsx b/packages/frontend/src/components/composer/Composer.tsx
@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   useLayoutEffect,
   useCallback,
+  useMemo,
 } from 'react'
 import { C, T } from '@deltachat/jsonrpc-client'
 
@@ -38,6 +39,7 @@ import { VisualVCardComponent } from '../message/VCard'
 import { KeybindAction } from '../../keybindings'
 import useKeyBindingAction from '../../hooks/useKeyBindingAction'
 import { CloseButton } from '../Dialog'
+import { enterKeySendsKeyboardShortcuts } from '../KeyboardShortcutHint'
 
 const log = getLogger('renderer/composer')
 
@@ -263,6 +265,23 @@ const Composer = forwardRef<
     messageInputRef.current?.focus()
   }, [chatId, messageInputRef])
 
+  const ariaSendShortcut: string = useMemo(() => {
+    if (settingsStore == undefined) {
+      return ''
+    }
+
+    const firstShortcut = enterKeySendsKeyboardShortcuts(
+      settingsStore.desktopSettings.enterKeySends
+    )[0].keyBindings[0]
+
+    if (!Array.isArray(firstShortcut) || !firstShortcut.includes('Enter')) {
+      log.warn('Unexpected shortcut for "Send Message"')
+      return ''
+    }
+
+    return firstShortcut.join('+')
+  }, [settingsStore])
+
   if (chatId === null) {
     return <div ref={ref}>Error, chatid missing</div>
   }
@@ -378,7 +397,10 @@ const Composer = forwardRef<
             <span />
           </button>
           <div className='send-button-wrapper' onClick={composerSendMessage}>
-            <button aria-label={tx('menu_send')} />
+            <button
+              aria-label={tx('menu_send')}
+              aria-keyshortcuts={ariaSendShortcut}
+            />
           </div>
         </div>
         {showEmojiPicker && (

diff --git a/packages/frontend/src/components/composer/ComposerMessageInput.tsx b/packages/frontend/src/components/composer/ComposerMessageInput.tsx
@@ -236,6 +236,7 @@ export default class ComposerMessageInput extends React.Component<
         disabled={this.state.loadingDraft}
         dir='auto'
         spellCheck={true}
+        aria-keyshortcuts='Control+N'
       />
     )
   }

diff --git a/packages/frontend/src/keybindings.ts b/packages/frontend/src/keybindings.ts
@@ -67,6 +67,8 @@ export function keyDownEvent2Action(
   if (window.__contextMenuActive) {
     return
   }
+  // When modifying this, don't forget to also update the corresponding
+  // `aria-keyshortcuts` properties, and the "Keybindings" help window.
   if (!ev.repeat) {
     // fire only on first press
     if (ev.altKey && ev.key === 'ArrowDown') {