Message.tsx: Use role=row for container, not role=button

Co-authored-by: Scott Nonnenberg <scott@signal.org>

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;
   }

stylesheets/components/MessageBody.scss

@@ -13,7 +13,8 @@
 
     &:focus {
       @include keyboard-mode {
-        color: $color-ultramarine;
+        border: 1px solid $color-black;
+        outline: none;
       }
     }
   }

ts/components/conversation/Message.tsx

@@ -2996,9 +2996,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}