diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 9356e39dec59..da2809aa01f9 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 d6314b264577..a3ab52702b91 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 29fe6772c1f5..ea55530d68ba 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}