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

@ -17,6 +17,7 @@ export type Props = {
} & AvatarProps;
export const AvatarPopup = (props: Props) => {
const focusRef = React.useRef<HTMLButtonElement>(null);
const {
i18n,
profileName,
@ -28,6 +29,22 @@ export const AvatarPopup = (props: Props) => {
const hasProfileName = !isEmpty(profileName);
// Note: mechanisms to dismiss this view are all in its host, MainHeader
// Focus first button after initial render, restore focus on teardown
React.useEffect(() => {
const lastFocused = document.activeElement as any;
if (focusRef.current) {
focusRef.current.focus();
}
return () => {
if (lastFocused && lastFocused.focus) {
lastFocused.focus();
}
};
}, []);
return (
<div style={style} className="module-avatar-popup">
<div className="module-avatar-popup__profile">
@ -44,7 +61,11 @@ export const AvatarPopup = (props: Props) => {
</div>
</div>
<hr className="module-avatar-popup__divider" />
<button className="module-avatar-popup__item" onClick={onViewPreferences}>
<button
ref={focusRef}
className="module-avatar-popup__item"
onClick={onViewPreferences}
>
<div
className={classNames(
'module-avatar-popup__item__icon',