Keyboard shortcuts and accessibility
This commit is contained in:
parent
8590a047c7
commit
20a892247f
87 changed files with 3652 additions and 711 deletions
|
@ -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',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue