Keyboard shortcuts and accessibility

This commit is contained in:
Scott Nonnenberg 2019-11-07 13:36:16 -08:00
parent 8590a047c7
commit 20a892247f
87 changed files with 3652 additions and 711 deletions

View file

@ -35,6 +35,23 @@ interface Props {
}
export class MessageDetail extends React.Component<Props> {
private readonly focusRef: React.RefObject<HTMLDivElement>;
constructor(props: Props) {
super(props);
this.focusRef = React.createRef();
}
public componentDidMount() {
// When this component is created, it's initially not part of the DOM, and then it's
// added off-screen and animated in. This ensures that the focus takes.
setTimeout(() => {
if (this.focusRef.current) {
this.focusRef.current.focus();
}
});
}
public renderAvatar(contact: Contact) {
const { i18n } = this.props;
const { avatarPath, color, phoneNumber, name, profileName } = contact;
@ -144,7 +161,7 @@ export class MessageDetail extends React.Component<Props> {
const { errors, message, receivedAt, sentAt, i18n } = this.props;
return (
<div className="module-message-detail">
<div className="module-message-detail" tabIndex={0} ref={this.focusRef}>
<div className="module-message-detail__message-container">
<Message i18n={i18n} {...message} />
</div>