From 67ddec65d912ec90a3307f20566c191b153b74eb Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Mon, 25 Jul 2022 17:19:00 -0700
Subject: [PATCH] Message.tsx: Use role=row for container, not role=button

---
 stylesheets/_modules.scss               | 2 +-
 stylesheets/components/MessageBody.scss | 3 ++-
 ts/components/conversation/Message.tsx  | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 9356e39de..da2809aa0 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -356,7 +356,7 @@ $message-padding-horizontal: 12px;
   }
 }
 
-.module-message:focus {
+.module-message:focus-within {
   @include keyboard-mode {
     background: $color-selected-message-background-light;
   }
diff --git a/stylesheets/components/MessageBody.scss b/stylesheets/components/MessageBody.scss
index d6314b264..a3ab52702 100644
--- a/stylesheets/components/MessageBody.scss
+++ b/stylesheets/components/MessageBody.scss
@@ -13,7 +13,8 @@
 
     &:focus {
       @include keyboard-mode {
-        color: $color-ultramarine;
+        border: 1px solid $color-black;
+        outline: none;
       }
     }
   }
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 29fe6772c..ea55530d6 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -2999,9 +2999,9 @@ export class Message extends React.PureComponent<Props, State> {
           expiring ? 'module-message--expired' : null
         )}
         tabIndex={0}
-        // We pretend to be a button because we sometimes contain buttons and a button
-        //   cannot be within another button
-        role="button"
+        // We need to have a role because screenreaders need to be able to focus here to
+        //   read the message, but we can't be a button; that would break inner buttons.
+        role="row"
         onKeyDown={this.handleKeyDown}
         onFocus={this.handleFocus}
         ref={this.focusRef}