improvement: improve a11y

CHANGELOG.md

@@ -53,6 +53,7 @@
 - cancel old message highlight animations when a new message is highlighted #4203
 - fix: packaging: include architecture in filename for all appimages #4202
 - fix: make open external link scheme case insensive #4201
+- improve accessibility a little #4133, #4210
 
 <a id="1_46_8"></a>
 

_locales/_untranslated_en.json

@@ -74,5 +74,8 @@
   },
   "join_group": {
     "message": "Join Group"
+  },
+  "react_more_emojis": {
+    "message": "More emojis…"
   }
 }

packages/frontend/scss/chat/_chat-list-item.scss

@@ -3,6 +3,11 @@
 .chat-list-item,
 .pseudo-chat-list-item {
   height: 64px;
+  width: 100%;
+  text-align: unset;
+  color: var(--globalText);
+  background-color: transparent;
+  border: none;
   display: flex;
   flex-direction: row;
   padding: 0px 10px;

packages/frontend/src/components/AccountListSidebar/AccountItem.tsx

@@ -133,7 +133,7 @@ export default function AccountItem({
     badgeContent = (
       <div
         className={classNames(styles.accountBadgeIcon, styles.bgSyncDisabled)}
-        aria-label='Background sync disabled'
+        aria-label={tx('background_sync_disabled_explaination')}
       >
         ⏻
       </div>
@@ -150,7 +150,7 @@ export default function AccountItem({
     )
   }
 
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLButtonElement>(null)
   useLayoutEffect(() => {
     if (!isSelected) {
       return
@@ -186,7 +186,7 @@ export default function AccountItem({
   }, [isSelected, window.__screen])
 
   return (
-    <div
+    <button
       className={classNames(styles.account, {
         [styles.active]: isSelected,
         [styles['context-menu-active']]: isContextMenuActive,
@@ -232,7 +232,7 @@ export default function AccountItem({
         </div>
       )}
       <div className={classNames(styles.accountBadge)}>{badgeContent}</div>
-    </div>
+    </button>
   )
 }
 

packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx

@@ -24,6 +24,7 @@ import { ScreenContext } from '../../contexts/ScreenContext'
 import useChat from '../../hooks/chat/useChat'
 import { Screens } from '../../ScreenController'
 import { ActionEmitter, KeybindAction } from '../../keybindings'
+import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 type Props = {
   onAddAccount: () => Promise<number>
@@ -38,6 +39,8 @@ export default function AccountListSidebar({
   openAccountDeletionScreen,
   selectedAccountId,
 }: Props) {
+  const tx = useTranslationFunction()
+
   const { openDialog } = useDialog()
   const [accounts, setAccounts] = useState<T.Account[]>([])
   const [{ accounts: noficationSettings }] = useAccountNotificationStore()
@@ -94,7 +97,7 @@ export default function AccountListSidebar({
   const updateHoverInfoPosition = useCallback(() => {
     if (hoverInfo.current && accountForHoverInfo) {
       const elem = document.querySelector(
-        `div[x-account-sidebar-account-id="${accountForHoverInfo.id}"]`
+        `[x-account-sidebar-account-id="${accountForHoverInfo.id}"]`
       )
       if (elem) {
         const rect = elem.getBoundingClientRect()
@@ -138,14 +141,22 @@ export default function AccountListSidebar({
             muted={noficationSettings[account.id]?.muted || false}
           />
         ))}
-        <button className={styles.addButton} onClick={onAddAccount}>
+        <button
+          aria-label={tx('add_account')}
+          className={styles.addButton}
+          onClick={onAddAccount}
+        >
           +
         </button>
       </div>
       {/* The condition is the same as in https://github.com/deltachat/deltachat-desktop/blob/63af023437ff1828a27de2da37bf94ab180ec528/src/renderer/contexts/KeybindingsContext.tsx#L26 */}
       {window.__screen === Screens.Main && (
         <div className={styles.buttonsContainer}>
-          <button className={styles.settingsButton} onClick={openSettings}>
+          <button
+            aria-label={tx('menu_settings')}
+            className={styles.settingsButton}
+            onClick={openSettings}
+          >
             <Icon
               size={38}
               className={styles.settingsButtonIcon}

packages/frontend/src/components/AccountListSidebar/styles.module.scss

@@ -6,7 +6,6 @@
   --local-avatar-vertical-margin: 8px;
   --local-avatar-font-size: 26px;
 
-  cursor: pointer;
   display: inline-block;
   font-weight: normal;
   height: var(--local-avatar-size);
@@ -65,6 +64,11 @@
   }
 
   .account {
+    border: none;
+    background: none;
+    padding: 0;
+    text-align: start; // To align the "active" indicator
+
     height: var(--als-avatar-size);
     margin-bottom: var(--als-avatar-margin);
     margin-top: var(--als-avatar-margin);

packages/frontend/src/components/Dialog/BackButton.tsx

@@ -5,13 +5,16 @@ import HeaderButton from './HeaderButton'
 import type { ButtonHTMLAttributes } from 'react'
 
 import styles from './styles.module.scss'
+import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 export default function BackButton(
   props: ButtonHTMLAttributes<HTMLButtonElement>
 ) {
+  const tx = useTranslationFunction()
+
   return (
     <HeaderButton
-      aria-label='Back'
+      aria-label={tx('back')}
       icon='arrow-left'
       iconSize={24}
       className={styles.backButton}

packages/frontend/src/components/Dialog/CloseButton.tsx

@@ -3,11 +3,19 @@ import React from 'react'
 import HeaderButton from './HeaderButton'
 
 import type { ButtonHTMLAttributes } from 'react'
+import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 export default function CloseButton(
   props: ButtonHTMLAttributes<HTMLButtonElement>
 ) {
+  const tx = useTranslationFunction()
+
   return (
-    <HeaderButton aria-label='Close' icon='cross' iconSize={26} {...props} />
+    <HeaderButton
+      aria-label={tx('close')}
+      icon='cross'
+      iconSize={26}
+      {...props}
+    />
   )
 }

packages/frontend/src/components/Dialog/HeaderButton.tsx

@@ -12,6 +12,7 @@ type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   icon: IconName
   iconSize: number
   rotation?: number
+  'aria-label': string
 }
 
 export default function HeaderButton({

packages/frontend/src/components/ImageSelector/index.tsx

@@ -67,6 +67,7 @@ export default function ImageSelector({
         {!imageUrl && (
           <button
             title={selectLabel ? selectLabel : tx('profile_image_select')}
+            aria-label={selectLabel ? selectLabel : tx('profile_image_select')}
             className={styles.imageSelectorButton}
             onClick={handleSelect}
           >
@@ -76,6 +77,7 @@ export default function ImageSelector({
         {imageUrl && (
           <button
             title={removeLabel ? removeLabel : tx('profile_image_delete')}
+            aria-label={removeLabel ? removeLabel : tx('profile_image_delete')}
             className={styles.imageSelectorButton}
             onClick={handleRemove}
           >

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 [
       {

packages/frontend/src/components/QrReader/index.tsx

@@ -464,7 +464,11 @@ export default function QrReader({ onError, onScan }: Props) {
       {!error && (
         <div className={styles.qrReaderHint}>{tx('qrscan_hint_desktop')}</div>
       )}
-      <button className={styles.qrReaderButton} onClick={handleSelectInput}>
+      <button
+        className={styles.qrReaderButton}
+        onClick={handleSelectInput}
+        aria-label={tx('menu_settings')}
+      >
         <Icon icon='settings' size={24} className={styles.qrReaderButtonIcon} />
       </button>
       <input

packages/frontend/src/components/ReactionsBar/ReactionsBar.tsx

@@ -9,6 +9,7 @@ import EmojiPicker from '../EmojiPicker'
 import styles from './styles.module.scss'
 
 import type { BaseEmoji } from 'emoji-mart/index'
+import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 type Props = {
   messageId: number
@@ -23,6 +24,8 @@ export default function ReactionsBar({
   messageId,
   myReaction,
 }: Props) {
+  const tx = useTranslationFunction()
+
   const [showAllEmojis, setShowAllEmojis] = useState(false)
   const accountId = selectedAccountId()
 
@@ -87,6 +90,7 @@ export default function ReactionsBar({
               styles.showAllEmojis
             )}
             onClick={handleShowAllEmojis}
+            aria-label={tx('react_more_emojis')}
           >
             <Icon className={styles.showAllIcon} icon='more' />
           </button>

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

packages/frontend/src/components/ShortcutMenu/index.tsx

@@ -7,6 +7,7 @@ import Icon from '../Icon'
 import styles from './styles.module.scss'
 
 import type { T } from '@deltachat/jsonrpc-client'
+import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 type OnButtonClick = React.MouseEvent<HTMLButtonElement, MouseEvent>
 
@@ -40,6 +41,8 @@ function ReactButton(props: {
   messageId: number
   reactions: T.Message['reactions']
 }) {
+  const tx = useTranslationFunction()
+
   const { showReactionsBar } = useReactionsBar()
 
   const onClick = (event: OnButtonClick) => {
@@ -60,15 +63,25 @@ function ReactButton(props: {
   }
 
   return (
-    <button className={styles.shortcutMenuButton} onClick={onClick}>
+    <button
+      aria-label={tx('react')}
+      className={styles.shortcutMenuButton}
+      onClick={onClick}
+    >
       <Icon className={styles.shortcutMenuIcon} icon='reaction' />
     </button>
   )
 }
 
 function ContextMenuButton(props: { onClick: (event: OnButtonClick) => void }) {
+  const tx = useTranslationFunction()
+
   return (
-    <button className={styles.shortcutMenuButton} onClick={props.onClick}>
+    <button
+      aria-label={tx('a11y_message_context_menu_btn_label')}
+      className={styles.shortcutMenuButton}
+      onClick={props.onClick}
+    >
       <Icon className={styles.shortcutMenuIcon} icon='more' />
     </button>
   )