mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Scott Nonnenberg 2022-07-25 17:19:00 -07:00 committed by GitHub
parent 78ad890a20
commit 67ddec65d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
stylesheets/_modules.scss
View file

@ -356,7 +356,7 @@ $message-padding-horizontal: 12px;
} }
} }
.module-message:focus { .module-message:focus-within {
@include keyboard-mode { @include keyboard-mode {
background: $color-selected-message-background-light; background: $color-selected-message-background-light;
} }

3
stylesheets/components/MessageBody.scss
View file

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

6
ts/components/conversation/Message.tsx
View file

@ -2999,9 +2999,9 @@ export class Message extends React.PureComponent<Props, State> {
expiring ? 'module-message--expired' : null expiring ? 'module-message--expired' : null
)} )}
tabIndex={0} tabIndex={0}
// We pretend to be a button because we sometimes contain buttons and a button // We need to have a role because screenreaders need to be able to focus here to
// cannot be within another button // read the message, but we can't be a button; that would break inner buttons.
role="button" role="row"
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
onFocus={this.handleFocus} onFocus={this.handleFocus}
ref={this.focusRef} ref={this.focusRef}