diff --git a/packages/frontend/src/components/message/EmptyChatMessage.tsx b/packages/frontend/src/components/message/EmptyChatMessage.tsx
index 6434ce30b1..bfefc8e237 100644
--- a/packages/frontend/src/components/message/EmptyChatMessage.tsx
+++ b/packages/frontend/src/components/message/EmptyChatMessage.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { C } from '@deltachat/jsonrpc-client'
 
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 import type { T } from '@deltachat/jsonrpc-client'
+import { useRovingTabindex } from '../../contexts/RovingTabindex'
 
 type Props = {
   chat: T.FullChat
@@ -12,6 +13,9 @@ type Props = {
 export default function EmptyChatMessage({ chat }: Props) {
   const tx = useTranslationFunction()
 
+  const ref = useRef<HTMLLIElement>(null)
+  const rovingTabindex = useRovingTabindex(ref)
+
   let emptyChatMessage = tx('chat_new_one_to_one_hint', [chat.name, chat.name])
 
   if (chat.chatType === C.DC_CHAT_TYPE_BROADCAST) {
@@ -29,7 +33,13 @@ export default function EmptyChatMessage({ chat }: Props) {
   }
 
   return (
-    <li>
+    <li
+      ref={ref}
+      className={rovingTabindex.className}
+      tabIndex={rovingTabindex.tabIndex}
+      onKeyDown={rovingTabindex.onKeydown}
+      onFocus={rovingTabindex.setAsActiveElement}
+    >
       <div className='info-message big'>
         <div className='bubble'>{emptyChatMessage}</div>
       </div>
diff --git a/packages/frontend/src/components/message/Link.tsx b/packages/frontend/src/components/message/Link.tsx
index 7ceda653fb..30fa9aafcb 100644
--- a/packages/frontend/src/components/message/Link.tsx
+++ b/packages/frontend/src/components/message/Link.tsx
@@ -42,9 +42,11 @@ function isDomainTrusted(domain: string): boolean {
 export const LabeledLink = ({
   label,
   destination,
+  tabIndex,
 }: {
   label: string | JSX.Element | JSX.Element[]
   destination: LinkDestination
+  tabIndex: -1 | 0
 }) => {
   const { openDialog } = useDialog()
   const openLinkSafely = useOpenLinkSafely()
@@ -84,6 +86,7 @@ export const LabeledLink = ({
       x-target-url={target}
       title={realUrl}
       onClick={onClick}
+      tabIndex={tabIndex}
       onContextMenu={ev => ((ev as any).t = ev.currentTarget)}
     >
       {label}
@@ -164,7 +167,13 @@ function LabeledLinkConfirmationDialog(
   )
 }
 
-export const Link = ({ destination }: { destination: LinkDestination }) => {
+export const Link = ({
+  destination,
+  tabIndex,
+}: {
+  destination: LinkDestination
+  tabIndex: -1 | 0
+}) => {
   const { openDialog } = useDialog()
   const openLinkSafely = useOpenLinkSafely()
   const accountId = selectedAccountId()
@@ -193,7 +202,13 @@ export const Link = ({ destination }: { destination: LinkDestination }) => {
   }
 
   return (
-    <a href='#' x-target-url={asciiUrl} title={asciiUrl} onClick={onClick}>
+    <a
+      href='#'
+      x-target-url={asciiUrl}
+      title={asciiUrl}
+      onClick={onClick}
+      tabIndex={tabIndex}
+    >
       {target}
     </a>
   )
diff --git a/packages/frontend/src/components/message/Message.tsx b/packages/frontend/src/components/message/Message.tsx
index 3ebc1abb53..549f8bf565 100644
--- a/packages/frontend/src/components/message/Message.tsx
+++ b/packages/frontend/src/components/message/Message.tsx
@@ -54,9 +54,11 @@ import type { PrivateReply } from '../../hooks/chat/usePrivateReply'
 const Avatar = ({
   contact,
   onContactClick,
+  tabIndex,
 }: {
   contact: T.Contact
   onContactClick: (contact: T.Contact) => void
+  tabIndex: -1 | 0
 }) => {
   const { profileImage, color, displayName } = contact
 
@@ -64,7 +66,7 @@ const Avatar = ({
 
   if (profileImage) {
     return (
-      <div className='author-avatar' onClick={onClick}>
+      <div className='author-avatar' onClick={onClick} tabIndex={tabIndex}>
         <img alt={displayName} src={runtime.transformBlobURL(profileImage)} />
       </div>
     )
@@ -78,6 +80,7 @@ const Avatar = ({
         className='author-avatar default'
         aria-label={displayName}
         onClick={onClick}
+        tabIndex={tabIndex}
       >
         <div style={{ backgroundColor: color }} className='label'>
           {initial}
@@ -91,10 +94,12 @@ const AuthorName = ({
   contact,
   onContactClick,
   overrideSenderName,
+  tabIndex,
 }: {
   contact: T.Contact
   onContactClick: (contact: T.Contact) => void
   overrideSenderName: string | null
+  tabIndex: -1 | 0
 }) => {
   const accountId = selectedAccountId()
   const { color, id } = contact
@@ -120,6 +125,7 @@ const AuthorName = ({
       className='author'
       style={{ color }}
       onClick={() => onContactClick(contact)}
+      tabIndex={tabIndex}
     >
       {getAuthorName(displayName, overrideSenderName)}
     </span>
@@ -132,12 +138,14 @@ const ForwardedTitle = ({
   direction,
   conversationType,
   overrideSenderName,
+  tabIndex,
 }: {
   contact: T.Contact
   onContactClick: (contact: T.Contact) => void
   direction: 'incoming' | 'outgoing'
   conversationType: ConversationType
   overrideSenderName: string | null
+  tabIndex: -1 | 0
 }) => {
   const tx = useTranslationFunction()
 
@@ -152,6 +160,7 @@ const ForwardedTitle = ({
           () => (
             <span
               onClick={() => onContactClick(contact)}
+              tabIndex={tabIndex}
               key='displayname'
               style={{ color: color }}
             >
@@ -160,7 +169,7 @@ const ForwardedTitle = ({
           )
         )
       ) : (
-        <span onClick={() => onContactClick(contact)}>
+        <span onClick={() => onContactClick(contact)} tabIndex={tabIndex}>
           {tx('forwarded_message')}
         </span>
       )}
@@ -343,8 +352,9 @@ export default function Message(props: {
   chat: T.FullChat
   message: T.Message
   conversationType: ConversationType
+  tabindexForInteractiveContents: -1 | 0
 }) {
-  const { message, conversationType } = props
+  const { message, conversationType, tabindexForInteractiveContents } = props
   const { id, viewType, text, hasLocation, isSetupmessage, hasHtml } = message
   const direction = getDirection(message)
   const status = mapCoreMsgStatus2String(message.state)
@@ -480,6 +490,9 @@ export default function Message(props: {
         id={String(message.id)}
         onContextMenu={showContextMenu}
         onClick={onClick}
+        // Using tabindex even when `!isInteractive` because it has
+        // a context menu.
+        tabIndex={tabindexForInteractiveContents}
       >
         {(isProtectionBrokenMsg || isProtectionEnabledMsg) && (
           <img
@@ -530,12 +543,17 @@ export default function Message(props: {
         <div className='videochat-icon'>
           <span className='icon videocamera' />
         </div>
-        <AvatarFromContact contact={message.sender} onClick={onContactClick} />
+        <AvatarFromContact
+          contact={message.sender}
+          onClick={onContactClick}
+          // TODO tabIndex={tabindexForInteractiveContents}
+        />
         <div className='break' />
         <div
           className='info-button'
           onContextMenu={showContextMenu}
           onClick={() => joinVideoChat(accountId, id)}
+          tabIndex={tabindexForInteractiveContents}
         >
           {direction === 'incoming'
             ? tx('videochat_contact_invited_hint', message.sender.displayName)
@@ -558,6 +576,7 @@ export default function Message(props: {
             padlock={message.showPadlock}
             onClickError={openMessageInfo.bind(null, openDialog, message)}
             viewType={'VideochatInvitation'}
+            // TODO tabIndex={tabindexForInteractiveContents}
           />
         </div>
       </div>
@@ -568,7 +587,10 @@ export default function Message(props: {
         {message.isSetupmessage ? (
           tx('autocrypt_asm_click_body')
         ) : text !== null ? (
-          <MessageBody text={text} />
+          <MessageBody
+            text={text}
+            tabindexForInteractiveContents={tabindexForInteractiveContents}
+          />
         ) : null}
       </div>
     )
@@ -589,7 +611,10 @@ export default function Message(props: {
           <span key='downloading'>{tx('downloading')}</span>
         )}
         {(downloadState == 'Failure' || downloadState === 'Available') && (
-          <button onClick={downloadFullMessage.bind(null, message.id)}>
+          <button
+            onClick={downloadFullMessage.bind(null, message.id)}
+            tabIndex={tabindexForInteractiveContents}
+          >
             {tx('download')}
           </button>
         )}
@@ -623,7 +648,11 @@ export default function Message(props: {
       id={message.id.toString()}
     >
       {showAuthor && direction === 'incoming' && (
-        <Avatar contact={message.sender} onContactClick={onContactClick} />
+        <Avatar
+          contact={message.sender}
+          onContactClick={onContactClick}
+          tabIndex={tabindexForInteractiveContents}
+        />
       )}
       <div
         onContextMenu={showContextMenu}
@@ -637,6 +666,7 @@ export default function Message(props: {
             direction={direction}
             conversationType={conversationType}
             overrideSenderName={message.overrideSenderName}
+            tabIndex={tabindexForInteractiveContents}
           />
         )}
         {!message.isForwarded && (
@@ -651,6 +681,7 @@ export default function Message(props: {
               contact={message.sender}
               onContactClick={onContactClick}
               overrideSenderName={message.overrideSenderName}
+              tabIndex={tabindexForInteractiveContents}
             />
           </div>
         )}
@@ -659,9 +690,14 @@ export default function Message(props: {
             'msg-body--clickable': onClickMessageBody,
           })}
           onClick={onClickMessageBody}
+          tabIndex={onClickMessageBody ? tabindexForInteractiveContents : -1}
         >
           {message.quote !== null && (
-            <Quote quote={message.quote} msgParentId={message.id} />
+            <Quote
+              quote={message.quote}
+              msgParentId={message.id}
+              tabIndex={tabindexForInteractiveContents}
+            />
           )}
           {showAttachment(message) && (
             <Attachment
@@ -672,7 +708,10 @@ export default function Message(props: {
             />
           )}
           {message.viewType === 'Webxdc' && (
-            <WebxdcMessageContent message={message}></WebxdcMessageContent>
+            <WebxdcMessageContent
+              tabindexForInteractiveContents={tabindexForInteractiveContents}
+              message={message}
+            ></WebxdcMessageContent>
           )}
           {message.viewType === 'Vcard' && (
             <VCardComponent message={message}></VCardComponent>
@@ -682,6 +721,7 @@ export default function Message(props: {
             <div
               onClick={openMessageHTML.bind(null, message.id)}
               className='show-html'
+              tabIndex={tabindexForInteractiveContents}
             >
               {tx('show_full_message')}
             </div>
@@ -702,6 +742,7 @@ export default function Message(props: {
               padlock={message.showPadlock}
               onClickError={openMessageInfo.bind(null, openDialog, message)}
               viewType={message.viewType}
+              // TODO tabIndex={tabindexForInteractiveContents}
             />
             {message.reactions && !isSetupmessage && (
               <Reactions reactions={message.reactions} />
@@ -722,9 +763,11 @@ export default function Message(props: {
 export const Quote = ({
   quote,
   msgParentId,
+  tabIndex,
 }: {
   quote: T.MessageQuote
   msgParentId?: number
+  tabIndex: -1 | 0
 }) => {
   const tx = useTranslationFunction()
   const accountId = selectedAccountId()
@@ -751,6 +794,7 @@ export const Quote = ({
             msgParentId
           )
       }}
+      tabIndex={tabIndex}
     >
       <div
         className={`quote ${hasMessage && 'has-message'}`}
@@ -790,6 +834,7 @@ export const Quote = ({
                 quote.text.slice(0, 3000 /* limit quoted message size */) || ''
               }
               disableJumbomoji
+              tabindexForInteractiveContents={-1}
             />
           </div>
         </div>
@@ -817,7 +862,13 @@ export function getAuthorName(
   return overrideSenderName ? `~${overrideSenderName}` : displayName
 }
 
-function WebxdcMessageContent({ message }: { message: T.Message }) {
+function WebxdcMessageContent({
+  message,
+  tabindexForInteractiveContents,
+}: {
+  message: T.Message
+  tabindexForInteractiveContents: -1 | 0
+}) {
   const tx = useTranslationFunction()
   if (message.viewType !== 'Webxdc') {
     return null
@@ -835,6 +886,8 @@ function WebxdcMessageContent({ message }: { message: T.Message }) {
         src={runtime.getWebxdcIconURL(selectedAccountId(), message.id)}
         alt={`icon of ${info.name}`}
         onClick={() => openWebxdc(message.id)}
+        // Not setting `tabIndex={tabindexForInteractiveContents}` here
+        // because there is a button below that does the same
       />
       <div
         className='name'
@@ -854,6 +907,7 @@ function WebxdcMessageContent({ message }: { message: T.Message }) {
         className={styles.startWebxdcButton}
         styling='primary'
         onClick={() => openWebxdc(message.id)}
+        tabIndex={tabindexForInteractiveContents}
       >
         {tx('start_app')}
       </Button>
diff --git a/packages/frontend/src/components/message/MessageBody.tsx b/packages/frontend/src/components/message/MessageBody.tsx
index 3d1c8c5780..88c21098a0 100644
--- a/packages/frontend/src/components/message/MessageBody.tsx
+++ b/packages/frontend/src/components/message/MessageBody.tsx
@@ -9,9 +9,11 @@ const UPPER_LIMIT_FOR_PARSED_MESSAGES = 20_000
 function MessageBody({
   text,
   disableJumbomoji,
+  tabindexForInteractiveContents,
 }: {
   text: string
   disableJumbomoji?: boolean
+  tabindexForInteractiveContents?: -1 | 0
 }): JSX.Element {
   if (text.length >= UPPER_LIMIT_FOR_PARSED_MESSAGES) {
     return <>{text}</>
@@ -28,7 +30,11 @@ function MessageBody({
       )
     }
   }
-  return message2React(emojifiedText, false)
+  return message2React(
+    emojifiedText,
+    false,
+    tabindexForInteractiveContents ?? 0
+  )
 }
 const trimRegex = /^[\s\uFEFF\xA0\n\t]+|[\s\uFEFF\xA0\n\t]+$/g
 
diff --git a/packages/frontend/src/components/message/MessageList.tsx b/packages/frontend/src/components/message/MessageList.tsx
index da960021a2..ee0b2a5d80 100644
--- a/packages/frontend/src/components/message/MessageList.tsx
+++ b/packages/frontend/src/components/message/MessageList.tsx
@@ -28,6 +28,10 @@ import EmptyChatMessage from './EmptyChatMessage'
 const log = getLogger('render/components/message/MessageList')
 
 import type { T } from '@deltachat/jsonrpc-client'
+import {
+  RovingTabindexProvider,
+  useRovingTabindex,
+} from '../../contexts/RovingTabindex'
 
 type ChatTypes =
   | C.DC_CHAT_TYPE_SINGLE
@@ -717,64 +721,69 @@ export const MessageListInner = React.memo(
     return (
       <div id='message-list' ref={messageListRef} onScroll={onScroll2}>
         <ul>
-          {messageListItems.length === 0 && <EmptyChatMessage chat={chat} />}
-          {activeView.map(messageId => {
-            if (messageId.kind === 'dayMarker') {
-              return (
-                <DayMarker
-                  key={`daymarker-${messageId.timestamp}`}
-                  timestamp={messageId.timestamp}
-                />
-              )
-            }
-
-            if (messageId.kind === 'message') {
-              const message = messageCache[messageId.msg_id]
-              if (message?.kind === 'message') {
+          <RovingTabindexProvider wrapperElementRef={messageListRef}>
+            {messageListItems.length === 0 && <EmptyChatMessage chat={chat} />}
+            {activeView.map(messageId => {
+              if (messageId.kind === 'dayMarker') {
                 return (
-                  <MessageWrapper
-                    key={messageId.msg_id}
-                    key2={`${messageId.msg_id}`}
-                    chat={chat}
-                    message={message}
-                    conversationType={conversationType}
-                    unreadMessageInViewIntersectionObserver={
-                      unreadMessageInViewIntersectionObserver
-                    }
+                  <DayMarker
+                    key={`daymarker-${messageId.timestamp}`}
+                    timestamp={messageId.timestamp}
                   />
                 )
-              } else if (message?.kind === 'loadingError') {
-                return (
-                  <div className='info-message' id={String(messageId.msg_id)}>
-                    <div
-                      className='bubble'
-                      style={{
-                        backgroundColor: 'rgba(55,0,0,0.5)',
-                      }}
-                    >
-                      loading message {messageId.msg_id} failed: {message.error}
+              }
+
+              if (messageId.kind === 'message') {
+                const message = messageCache[messageId.msg_id]
+                if (message?.kind === 'message') {
+                  return (
+                    <MessageWrapper
+                      key={messageId.msg_id}
+                      key2={`${messageId.msg_id}`}
+                      chat={chat}
+                      message={message}
+                      conversationType={conversationType}
+                      unreadMessageInViewIntersectionObserver={
+                        unreadMessageInViewIntersectionObserver
+                      }
+                    />
+                  )
+                } else if (message?.kind === 'loadingError') {
+                  // TODO shall we add `useRovingTabindex` here as well?
+                  return (
+                    <div className='info-message' id={String(messageId.msg_id)}>
+                      <div
+                        className='bubble'
+                        style={{
+                          backgroundColor: 'rgba(55,0,0,0.5)',
+                        }}
+                      >
+                        loading message {messageId.msg_id} failed:{' '}
+                        {message.error}
+                      </div>
                     </div>
-                  </div>
-                )
-              } else {
-                // setTimeout tells it to call method in next event loop iteration, so after rendering
-                // it is debounced later so we can call it here multiple times and it's ok
-                setTimeout(loadMissingMessages)
-                return (
-                  <div className='info-message' id={String(messageId.msg_id)}>
-                    <div
-                      className='bubble'
-                      style={{
-                        backgroundColor: 'rgba(55,0,0,0.5)',
-                      }}
-                    >
-                      Loading Message {messageId.msg_id}
+                  )
+                } else {
+                  // setTimeout tells it to call method in next event loop iteration, so after rendering
+                  // it is debounced later so we can call it here multiple times and it's ok
+                  setTimeout(loadMissingMessages)
+                  // TODO shall we add `useRovingTabindex` here as well?
+                  return (
+                    <div className='info-message' id={String(messageId.msg_id)}>
+                      <div
+                        className='bubble'
+                        style={{
+                          backgroundColor: 'rgba(55,0,0,0.5)',
+                        }}
+                      >
+                        Loading Message {messageId.msg_id}
+                      </div>
                     </div>
-                  </div>
-                )
+                  )
+                }
               }
-            }
-          })}
+            })}
+          </RovingTabindexProvider>
         </ul>
       </div>
     )
@@ -840,9 +849,24 @@ function JumpDownButton({
 export function DayMarker(props: { timestamp: number }) {
   const { timestamp } = props
   const tx = useTranslationFunction()
+
+  const ref = useRef<HTMLDivElement>(null)
+  // Yes, we want daymakers to be focusable.
+  // See https://github.com/deltachat/deltachat-desktop/issues/2141
+  // > Also make the divider items proper list items that can be focused,
+  // > so users know when they traverse to the next/previous date.
+  const rovingTabindex = useRovingTabindex(ref)
+
   return (
     <div className='info-message daymarker'>
-      <div className='bubble' style={{ textTransform: 'capitalize' }}>
+      <div
+        ref={ref}
+        className={`bubble ${rovingTabindex.className}`}
+        style={{ textTransform: 'capitalize' }}
+        tabIndex={rovingTabindex.tabIndex}
+        onKeyDown={rovingTabindex.onKeydown}
+        onFocus={rovingTabindex.setAsActiveElement}
+      >
         {moment.unix(timestamp).calendar(null, {
           sameDay: `[${tx('today')}]`,
           lastDay: `[${tx('yesterday')}]`,
diff --git a/packages/frontend/src/components/message/MessageMarkdown.tsx b/packages/frontend/src/components/message/MessageMarkdown.tsx
index 582b6223a3..ce26814133 100644
--- a/packages/frontend/src/components/message/MessageMarkdown.tsx
+++ b/packages/frontend/src/components/message/MessageMarkdown.tsx
@@ -30,7 +30,13 @@ SettingsStoreInstance.subscribe(newState => {
   }
 })
 
-function renderElement(elm: ParsedElement, key?: number): JSX.Element {
+function renderElement(
+  elm: ParsedElement,
+  tabindexForInteractiveContents: -1 | 0,
+  key?: number
+): JSX.Element {
+  const mapFn = (elm: ParsedElement, index: number) =>
+    renderElement(elm, tabindexForInteractiveContents, index)
   switch (elm.t) {
     case 'CodeBlock':
       return (
@@ -48,20 +54,32 @@ function renderElement(elm: ParsedElement, key?: number): JSX.Element {
       )
 
     case 'StrikeThrough':
-      return <s key={key}>{elm.c.map(renderElement)}</s>
+      return <s key={key}>{elm.c.map(mapFn)}</s>
 
     case 'Italics':
-      return <i key={key}>{elm.c.map(renderElement)}</i>
+      return <i key={key}>{elm.c.map(mapFn)}</i>
 
     case 'Bold':
-      return <b key={key}>{elm.c.map(renderElement)}</b>
+      return <b key={key}>{elm.c.map(mapFn)}</b>
 
     case 'Tag':
-      return <TagLink key={key} tag={elm.c} />
+      return (
+        <TagLink
+          key={key}
+          tag={elm.c}
+          tabIndex={tabindexForInteractiveContents}
+        />
+      )
 
     case 'Link': {
       const { destination } = elm.c
-      return <Link destination={destination} key={key} />
+      return (
+        <Link
+          destination={destination}
+          key={key}
+          tabIndex={tabindexForInteractiveContents}
+        />
+      )
     }
 
     case 'LabeledLink':
@@ -69,18 +87,31 @@ function renderElement(elm: ParsedElement, key?: number): JSX.Element {
         <span key={key}>
           <LabeledLink
             destination={elm.c.destination}
-            label={<>{elm.c.label.map(renderElement)}</>}
+            label={<>{elm.c.label.map(mapFn)}</>}
+            tabIndex={tabindexForInteractiveContents}
           />{' '}
         </span>
       )
 
     case 'EmailAddress': {
       const email = elm.c
-      return <EmailLink key={key} email={email} />
+      return (
+        <EmailLink
+          key={key}
+          email={email}
+          tabIndex={tabindexForInteractiveContents}
+        />
+      )
     }
 
     case 'BotCommandSuggestion':
-      return <BotCommandSuggestion key={key} suggestion={elm.c} />
+      return (
+        <BotCommandSuggestion
+          key={key}
+          suggestion={elm.c}
+          tabIndex={tabindexForInteractiveContents}
+        />
+      )
 
     case 'Linebreak':
       return <span key={key}>{'\n'}</span>
@@ -144,13 +175,25 @@ function renderElementPreview(elm: ParsedElement, key?: number): JSX.Element {
   }
 }
 
-export function message2React(message: string, preview: boolean): JSX.Element {
+export function message2React(
+  message: string,
+  preview: boolean,
+  /**
+   * Has no effect `{@link preview} === true`, because there should be
+   * no interactive elements in the first place
+   */
+  tabindexForInteractiveContents: -1 | 0
+): JSX.Element {
   try {
     const elements = parseMessage(message)
     return preview ? (
       <div className='truncated'>{elements.map(renderElementPreview)}</div>
     ) : (
-      <>{elements.map(renderElement)}</>
+      <>
+        {elements.map((el, index) =>
+          renderElement(el, tabindexForInteractiveContents, index)
+        )}
+      </>
     )
   } catch (error) {
     log.error('parseMessage failed:', { input: message, error })
@@ -158,7 +201,13 @@ export function message2React(message: string, preview: boolean): JSX.Element {
   }
 }
 
-function EmailLink({ email }: { email: string }): JSX.Element {
+function EmailLink({
+  email,
+  tabIndex,
+}: {
+  email: string
+  tabIndex: -1 | 0
+}): JSX.Element {
   const accountId = selectedAccountId()
   const createChatByEmail = useCreateChatByEmail()
   const { selectChat } = useChat()
@@ -176,13 +225,14 @@ function EmailLink({ email }: { email: string }): JSX.Element {
       x-not-a-link='email'
       x-target-email={email}
       onClick={handleClick}
+      tabIndex={tabIndex}
     >
       {email}
     </a>
   )
 }
 
-function TagLink({ tag }: { tag: string }) {
+function TagLink({ tag, tabIndex }: { tag: string; tabIndex: -1 | 0 }) {
   const setSearch = () => {
     log.debug(
       `Clicked on a hastag, this should open search for the text "${tag}"`
@@ -196,13 +246,19 @@ function TagLink({ tag }: { tag: string }) {
   }
 
   return (
-    <a href={'#'} x-not-a-link='tag' onClick={setSearch}>
+    <a href={'#'} x-not-a-link='tag' onClick={setSearch} tabIndex={tabIndex}>
       {tag}
     </a>
   )
 }
 
-function BotCommandSuggestion({ suggestion }: { suggestion: string }) {
+function BotCommandSuggestion({
+  suggestion,
+  tabIndex,
+}: {
+  suggestion: string
+  tabIndex: -1 | 0
+}) {
   const openConfirmationDialog = useConfirmationDialog()
   const messageDisplay = useContext(MessagesDisplayContext)
   const accountId = selectedAccountId()
@@ -278,7 +334,12 @@ function BotCommandSuggestion({ suggestion }: { suggestion: string }) {
   }
 
   return (
-    <a href='#' x-not-a-link='bcs' onClick={applySuggestion}>
+    <a
+      href='#'
+      x-not-a-link='bcs'
+      onClick={applySuggestion}
+      tabIndex={tabIndex}
+    >
       {suggestion}
     </a>
   )
diff --git a/packages/frontend/src/components/message/MessageWrapper.tsx b/packages/frontend/src/components/message/MessageWrapper.tsx
index d578035982..4bd62f84c8 100644
--- a/packages/frontend/src/components/message/MessageWrapper.tsx
+++ b/packages/frontend/src/components/message/MessageWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import { C } from '@deltachat/jsonrpc-client'
 
 import Message from './Message'
@@ -6,6 +6,7 @@ import { ConversationType } from './MessageList'
 import { getLogger } from '../../../../shared/logger'
 
 import type { T } from '@deltachat/jsonrpc-client'
+import { useRovingTabindex } from '../../contexts/RovingTabindex'
 
 type RenderMessageProps = {
   key2: string
@@ -63,9 +64,33 @@ export function MessageWrapper(props: RenderMessageProps) {
     shouldInViewObserve,
   ])
 
+  const ref = useRef<HTMLLIElement>(null)
+  const rovingTabindex = useRovingTabindex(ref)
+
   return (
-    <li id={props.key2} className='message-wrapper'>
-      <Message {...props} />
+    // TODO fix: invoking the context menu with Shift + F10 doesn't work.
+    <li
+      ref={ref}
+      id={props.key2}
+      className={`message-wrapper ${rovingTabindex.className}`}
+      tabIndex={rovingTabindex.tabIndex}
+      onKeyDown={rovingTabindex.onKeydown}
+      onFocus={rovingTabindex.setAsActiveElement}
+    >
+      <Message
+        {...props}
+        // When the message is not the active one
+        // `rovingTabindex.tabIndex === -1`, we need to set `tabindex="-1"`
+        // to all its interactive (otherwise "Tabbable to") elements,
+        // such as links, attachments, "view reactions" button, etc.
+        // Only the contents of the "active" (selected) message
+        // should have tab stops.
+        // See https://github.com/deltachat/deltachat-desktop/issues/2141
+        // WhatsApp appears to behave similarly.
+        // The implementation is similar to the "Grid" pattern:
+        // https://www.w3.org/WAI/ARIA/apg/patterns/grid/#gridNav_inside
+        tabindexForInteractiveContents={rovingTabindex.tabIndex}
+      />
       <div className='message-observer-bottom' id={'bottom-' + props.key2} />
     </li>
   )