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

@ -0,0 +1,52 @@
import React from 'react';
export type PropsType = {
id: string;
conversationId: string;
isSelected: boolean;
selectMessage: (messageId: string, conversationId: string) => unknown;
};
export class InlineNotificationWrapper extends React.Component<PropsType> {
public focusRef: React.RefObject<HTMLDivElement> = React.createRef();
public setFocus = () => {
if (this.focusRef.current) {
this.focusRef.current.focus();
}
};
public setSelected = () => {
const { id, conversationId, selectMessage } = this.props;
selectMessage(id, conversationId);
};
public componentDidMount() {
const { isSelected } = this.props;
if (isSelected) {
this.setFocus();
}
}
public componentDidUpdate(prevProps: PropsType) {
if (!prevProps.isSelected && this.props.isSelected) {
this.setFocus();
}
}
public render() {
const { children } = this.props;
return (
<div
className="module-inline-notification-wrapper"
tabIndex={0}
ref={this.focusRef}
onFocus={this.setSelected}
>
{children}
</div>
);
}
}