From 7b3f1da28ec33843b85315cb56d911913861dd6b Mon Sep 17 00:00:00 2001
From: Devesh Sawant <dsawant@arizona.edu>
Date: Thu, 6 Mar 2025 22:26:19 +0530
Subject: [PATCH] Added support for aria labels in IconButtons & aria roles in
 menus

The dropdown menus on Mobile navbar had no roles,labels. Currently, the
roles are updated as per ARIA guidelines (menu). The snapshot of
MobileNav is also updated with the change in markup. Fixes the lack of
description when accessibility readers are processing the button.
---
 client/common/IconButton.jsx                  |  9 ++--
 .../IDE/components/Header/MobileNav.jsx       | 51 +++++++++++++++----
 .../__snapshots__/Nav.unit.test.jsx.snap      | 14 +++++
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/client/common/IconButton.jsx b/client/common/IconButton.jsx
index 8cf732f91d..6d022fbd2f 100644
--- a/client/common/IconButton.jsx
+++ b/client/common/IconButton.jsx
@@ -13,7 +13,7 @@ const ButtonWrapper = styled(Button)`
 `;
 
 const IconButton = (props) => {
-  const { icon, ...otherProps } = props;
+  const { icon, ariaLabel, ...otherProps } = props;
   const Icon = icon;
 
   return (
@@ -22,17 +22,20 @@ const IconButton = (props) => {
       iconOnly
       display={Button.displays.inline}
       focusable="false"
+      aria-label={ariaLabel}
       {...otherProps}
     />
   );
 };
 
 IconButton.propTypes = {
-  icon: PropTypes.func
+  icon: PropTypes.func,
+  ariaLabel: PropTypes.string
 };
 
 IconButton.defaultProps = {
-  icon: null
+  icon: null,
+  ariaLabel: ''
 };
 
 export default IconButton;
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index 349d3d1709..443a96d22e 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -249,7 +249,7 @@ const MobileNav = () => {
         <Options>
           <div>
             <Link to={editorLink}>
-              <IconButton icon={CrossIcon} />
+              <IconButton ariaLabel="Close button" icon={CrossIcon} />
             </Link>
           </div>
         </Options>
@@ -262,7 +262,7 @@ const MobileNav = () => {
           ) : (
             <div>
               <Link to="/login">
-                <IconButton icon={AccountIcon} />
+                <IconButton ariaLabel="Login button" icon={AccountIcon} />
               </Link>
             </div>
           )}
@@ -271,7 +271,7 @@ const MobileNav = () => {
           ) : (
             <div>
               <Link to={editorLink}>
-                <IconButton icon={EditorIcon} />
+                <IconButton ariaLabel="Editor button" icon={EditorIcon} />
               </Link>
             </div>
           )}
@@ -291,8 +291,19 @@ const StuffMenu = () => {
 
   return (
     <div>
-      <IconButton icon={AddIcon} {...handlers} />
-      <ul className={isOpen ? 'opened' : ''}>
+      <IconButton
+        icon={AddIcon}
+        ariaLabel="Stuff Menu"
+        aria-controls="stuff-menu"
+        id="stuff-menu-button"
+        {...handlers}
+      />
+      <ul
+        className={isOpen ? 'opened' : ''}
+        id="stuff-menu"
+        role="menu"
+        aria-labelledby="stuff-menu-button"
+      >
         <ParentMenuContext.Provider value="stuff">
           <NavMenuItem onClick={() => newSketch()}>
             {t('DashboardView.NewSketch')}
@@ -322,8 +333,19 @@ const AccountMenu = () => {
 
   return (
     <div>
-      <IconButton icon={AccountIcon} {...handlers} />
-      <ul className={isOpen ? 'opened' : ''}>
+      <IconButton
+        icon={AccountIcon}
+        ariaLabel="Account Menu"
+        aria-controls="more-menu"
+        id="account-menu-button"
+        {...handlers}
+      />
+      <ul
+        className={isOpen ? 'opened' : ''}
+        id="account-menu"
+        role="menu"
+        aria-labelledby="account-menu-button"
+      >
         <ParentMenuContext.Provider value="account">
           <li className="user">{user.username}</li>
           <NavMenuItem href={`/${user.username}/sketches`}>
@@ -393,8 +415,19 @@ const MoreMenu = () => {
           </LanguageSelect>
         </Overlay>
       )}
-      <IconButton icon={MoreIcon} {...handlers} />
-      <ul className={isOpen ? 'opened' : ''}>
+      <IconButton
+        icon={MoreIcon}
+        ariaLabel="More Menu"
+        aria-controls="more-menu"
+        id="more-menu-button"
+        {...handlers}
+      />
+      <ul
+        id="more-menu"
+        className={isOpen ? 'opened' : ''}
+        role="menu"
+        aria-labelledby="more-menu-button"
+      >
         <ParentMenuContext.Provider value="more">
           <b>{t('Nav.File.Title')}</b>
           <NavMenuItem onClick={newSketch}>{t('Nav.File.New')}</NavMenuItem>
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index d9140653c1..a63f63fb8e 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -316,6 +316,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           href="/login"
         >
           <button
+            aria-label="Login button"
             class="c4 c5"
             display="inline"
             focusable="false"
@@ -332,9 +333,12 @@ exports[`Nav renders dashboard version for mobile 1`] = `
       </div>
       <div>
         <button
+          aria-controls="more-menu"
+          aria-label="More Menu"
           class="c4 c5"
           display="inline"
           focusable="false"
+          id="more-menu-button"
           kind="primary"
           type="button"
         >
@@ -345,7 +349,10 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           />
         </button>
         <ul
+          aria-labelledby="more-menu-button"
           class=""
+          id="more-menu"
+          role="menu"
         >
           <b>
             File
@@ -1017,6 +1024,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           href="/login"
         >
           <button
+            aria-label="Login button"
             class="c4 c5"
             display="inline"
             focusable="false"
@@ -1033,9 +1041,12 @@ exports[`Nav renders editor version for mobile 1`] = `
       </div>
       <div>
         <button
+          aria-controls="more-menu"
+          aria-label="More Menu"
           class="c4 c5"
           display="inline"
           focusable="false"
+          id="more-menu-button"
           kind="primary"
           type="button"
         >
@@ -1046,7 +1057,10 @@ exports[`Nav renders editor version for mobile 1`] = `
           />
         </button>
         <ul
+          aria-labelledby="more-menu-button"
           class=""
+          id="more-menu"
+          role="menu"
         >
           <b>
             File