From 7785e2c71738c9eba1cf9149c691f33de30f5ac0 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 6 May 2022 11:38:11 +0200
Subject: [PATCH] refactor: improve header button ARIA attrs (#957)

* refactor: fix header docs icon color

* refactor: improve header button ARIA attrs
---
 .../common/DropdownMenu/DropdownMenu.tsx      |  2 +-
 frontend/src/component/menu/Header/Header.tsx | 36 +++++++++++--------
 .../user/UserProfile/UserProfile.tsx          |  5 +++
 .../UserProfileContent/UserProfileContent.tsx |  3 ++
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx b/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx
index d9fe383015..32f773ff4d 100644
--- a/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx
+++ b/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx
@@ -55,7 +55,7 @@ const DropdownMenu: VFC<IDropdownMenuProps> = ({
                 onClick={handleOpen}
                 style={style}
                 aria-controls={id}
-                aria-haspopup="true"
+                aria-expanded={Boolean(anchor)}
                 icon={icon}
                 {...rest}
             />
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index ae54800d79..cb3740008a 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -22,12 +22,14 @@ import { filterByFlags } from 'component/common/util';
 import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
 import { useStyles } from './Header.styles';
 import classNames from 'classnames';
+import { useId } from 'hooks/useId';
 
 const Header: VFC = () => {
     const theme = useTheme();
-    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-    const [anchorElAdvanced, setAnchorElAdvanced] =
-        useState<HTMLButtonElement | null>(null);
+    const adminId = useId();
+    const configId = useId();
+    const [adminRef, setAdminRef] = useState<HTMLButtonElement | null>(null);
+    const [configRef, setConfigRef] = useState<HTMLButtonElement | null>(null);
 
     const [admin, setAdmin] = useState(false);
     const { permissions } = useAuthPermissions();
@@ -40,8 +42,8 @@ const Header: VFC = () => {
     const [openDrawer, setOpenDrawer] = useState(false);
 
     const toggleDrawer = () => setOpenDrawer(prev => !prev);
-    const handleClose = () => setAnchorEl(null);
-    const handleCloseAdvanced = () => setAnchorElAdvanced(null);
+    const onAdminClose = () => setAdminRef(null);
+    const onConfigureClose = () => setConfigRef(null);
 
     useEffect(() => {
         const admin = permissions?.find(
@@ -119,16 +121,18 @@ const Header: VFC = () => {
                         </Link>
                         <button
                             className={styles.advancedNavButton}
-                            onClick={e => setAnchorElAdvanced(e.currentTarget)}
+                            onClick={e => setConfigRef(e.currentTarget)}
+                            aria-controls={configRef ? configId : undefined}
+                            aria-expanded={Boolean(configRef)}
                         >
                             Configure
                             <KeyboardArrowDown className={styles.icon} />
                         </button>
                         <NavigationMenu
-                            id="settings-navigation"
+                            id={configId}
                             options={filteredMainRoutes.mainNavRoutes}
-                            anchorEl={anchorElAdvanced}
-                            handleClose={handleCloseAdvanced}
+                            anchorEl={configRef}
+                            handleClose={onConfigureClose}
                             style={{ top: 10 }}
                         />
                     </div>
@@ -142,7 +146,7 @@ const Header: VFC = () => {
                                 disableRipple
                                 className={themeStyles.focusable}
                             >
-                                <MenuBookIcon className={styles.icon} />
+                                <MenuBookIcon />
                             </IconButton>
                         </Tooltip>
                         <ConditionallyRender
@@ -151,12 +155,16 @@ const Header: VFC = () => {
                                 <Tooltip title="Settings">
                                     <IconButton
                                         onClick={e =>
-                                            setAnchorEl(e.currentTarget)
+                                            setAdminRef(e.currentTarget)
                                         }
                                         className={classNames(
                                             styles.wideButton,
                                             themeStyles.focusable
                                         )}
+                                        aria-controls={
+                                            adminRef ? adminId : undefined
+                                        }
+                                        aria-expanded={Boolean(adminRef)}
                                         size="large"
                                         disableRipple
                                     >
@@ -169,10 +177,10 @@ const Header: VFC = () => {
                             }
                         />
                         <NavigationMenu
-                            id="admin-navigation"
+                            id={adminId}
                             options={filteredMainRoutes.adminRoutes}
-                            anchorEl={anchorEl}
-                            handleClose={handleClose}
+                            anchorEl={adminRef}
+                            handleClose={onAdminClose}
                             style={{ top: 5, left: -100 }}
                         />{' '}
                         <UserProfile />
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index f2b945415a..0d2aa0b0ac 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -9,6 +9,7 @@ import { IUser } from 'interfaces/user';
 import { ILocationSettings } from 'hooks/useLocationSettings';
 import { HEADER_USER_AVATAR } from 'utils/testIds';
 import unknownUser from 'assets/icons/unknownUser.png';
+import { useId } from 'hooks/useId';
 
 interface IUserProfileProps {
     profile: IUser;
@@ -25,6 +26,7 @@ const UserProfile = ({
 }: IUserProfileProps) => {
     const [showProfile, setShowProfile] = useState(false);
     const [currentLocale, setCurrentLocale] = useState<string>();
+    const modalId = useId();
 
     const { classes: styles } = useStyles();
     const { classes: themeStyles } = useThemeStyles();
@@ -67,6 +69,8 @@ const UserProfile = ({
                         styles.button
                     )}
                     onClick={() => setShowProfile(prev => !prev)}
+                    aria-controls={showProfile ? modalId : undefined}
+                    aria-expanded={showProfile}
                     color="secondary"
                     disableRipple
                 >
@@ -78,6 +82,7 @@ const UserProfile = ({
                     <KeyboardArrowDownIcon className={styles.icon} />
                 </Button>
                 <UserProfileContent
+                    id={modalId}
                     showProfile={showProfile}
                     imageUrl={imageUrl}
                     profile={profile}
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
index bae7a91789..8bad716152 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
@@ -22,6 +22,7 @@ import { IUser } from 'interfaces/user';
 import { ILocationSettings } from 'hooks/useLocationSettings';
 
 interface IUserProfileContentProps {
+    id: string;
     showProfile: boolean;
     profile: IUser;
     possibleLocales: string[];
@@ -34,6 +35,7 @@ interface IUserProfileContentProps {
 }
 
 const UserProfileContent = ({
+    id,
     showProfile,
     profile,
     possibleLocales,
@@ -67,6 +69,7 @@ const UserProfileContent = ({
             condition={showProfile}
             show={
                 <Paper
+                    id={id}
                     className={classnames(
                         styles.profile,
                         themeStyles.flexColumn,