From b60c799645b94748d570d77fe99049bd483341b3 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <54320162+Pragadesh-45@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:22:12 +0530
Subject: [PATCH] fix: accessibility issue in side bar's footer (#3130)

* fix: accessibility issues in side bar footer icons

* small accessibility changes & formatting

* chore: fixed misspell

* chore: code cleanup

* added proper aria-labels and added with the footer as `ul`

* chore: code cleanup

---------

Co-authored-by: Shrilakshmi Shastry <shrilakshmi.shastry@smallcase.com>
---
 .../src/components/Notifications/index.js     |  19 +--
 .../src/components/Sidebar/TitleBar/index.js  |  14 +--
 .../bruno-app/src/components/Sidebar/index.js | 114 +++++++++++++-----
 3 files changed, 101 insertions(+), 46 deletions(-)

diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js
index 245538541..ba257bf48 100644
--- a/packages/bruno-app/src/components/Notifications/index.js
+++ b/packages/bruno-app/src/components/Notifications/index.js
@@ -93,10 +93,12 @@ const Notifications = () => {
           dispatch(fetchNotifications());
           setShowNotificationsModal(true);
         }}
+        aria-label="Check all Notifications"
       >
-        <ToolHint text="Notifications" toolhintId="Notifications" offset={8} >
+        <ToolHint text="Notifications" toolhintId="Notifications" offset={8}>
           <IconBell
             size={18}
+            aria-hidden
             strokeWidth={1.5}
             className={`mr-2 ${unreadNotifications?.length > 0 ? 'bell' : ''}`}
           />
@@ -133,8 +135,9 @@ const Notifications = () => {
                     {notifications?.slice(notificationsStartIndex, notificationsEndIndex)?.map((notification) => (
                       <li
                         key={notification.id}
-                        className={`p-4 flex flex-col justify-center ${selectedNotification?.id == notification.id ? 'active' : notification.read ? 'read' : ''
-                          }`}
+                        className={`p-4 flex flex-col justify-center ${
+                          selectedNotification?.id == notification.id ? 'active' : notification.read ? 'read' : ''
+                        }`}
                         onClick={handleNotificationItemClick(notification)}
                       >
                         <div className="notification-title w-full">{notification?.title}</div>
@@ -144,8 +147,9 @@ const Notifications = () => {
                   </ul>
                   <div className="w-full pagination flex flex-row gap-4 justify-center p-2 items-center text-xs">
                     <button
-                      className={`pl-2 pr-2 py-3 select-none ${pageNumber <= 1 ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
-                        }`}
+                      className={`pl-2 pr-2 py-3 select-none ${
+                        pageNumber <= 1 ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
+                      }`}
                       onClick={handlePrev}
                     >
                       {'Prev'}
@@ -161,8 +165,9 @@ const Notifications = () => {
                       </div>
                     </div>
                     <button
-                      className={`pl-2 pr-2 py-3 select-none ${pageNumber == totalPages ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
-                        }`}
+                      className={`pl-2 pr-2 py-3 select-none ${
+                        pageNumber == totalPages ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
+                      }`}
                       onClick={handleNext}
                     >
                       {'Next'}
diff --git a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
index bec0c92a5..bbd88fbcf 100644
--- a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
@@ -82,16 +82,12 @@ const TitleBar = () => {
       ) : null}
 
       <div className="flex items-center">
-        <div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
-          <Bruno width={30} />
-        </div>
-        <div
-          onClick={handleTitleClick}
-          className="flex items-center font-medium select-none cursor-pointer"
-          style={{ fontSize: 14, paddingLeft: 6, position: 'relative', top: -1 }}
-        >
+        <button className="flex items-center gap-2 text-sm font-medium" onClick={handleTitleClick}>
+          <span aria-hidden>
+            <Bruno width={30} />
+          </span>
           bruno
-        </div>
+        </button>
         <div className="collection-dropdown flex flex-grow items-center justify-end">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
             <div
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index 15d3bdf2b..6fcded698 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -20,7 +20,7 @@ const MAX_LEFT_SIDEBAR_WIDTH = 600;
 const Sidebar = () => {
   const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
   const preferencesOpen = useSelector((state) => state.app.showPreferences);
-  const [goldenEditonOpen, setGoldenEditonOpen] = useState(false);
+  const [goldenEditionOpen, setGoldenEditionOpen] = useState(false);
 
   const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
   const [cookiesOpen, setCookiesOpen] = useState(false);
@@ -83,10 +83,43 @@ const Sidebar = () => {
   return (
     <StyledWrapper className="flex relative h-screen">
       <aside>
-        {goldenEditonOpen && <GoldenEdition onClose={() => setGoldenEditonOpen(false)} />}
+        {goldenEditionOpen && (
+          <GoldenEdition
+            onClose={() => {
+              setGoldenEditionOpen(false);
+              document.querySelector('[data-trigger="golden-edition"]').focus();
+            }}
+            aria-modal="true"
+            role="dialog"
+            aria-labelledby="golden-edition-title"
+            aria-describedby="golden-edition-description"
+          />
+        )}
         <div className="flex flex-row h-screen w-full">
-          {preferencesOpen && <Preferences onClose={() => dispatch(showPreferences(false))} />}
-          {cookiesOpen && <Cookies onClose={() => setCookiesOpen(false)} />}
+          {preferencesOpen && (
+            <Preferences
+              onClose={() => {
+                dispatch(showPreferences(false));
+                document.querySelector('[data-trigger="preferences"]').focus();
+              }}
+              aria-modal="true"
+              role="dialog"
+              aria-labelledby="preferences-title"
+              aria-describedby="preferences-description"
+            />
+          )}
+          {cookiesOpen && (
+            <Cookies
+              onClose={() => {
+                setCookiesOpen(false);
+                document.querySelector('[data-trigger="cookies"]').focus();
+              }}
+              aria-modal="true"
+              role="dialog"
+              aria-labelledby="cookies-title"
+              aria-describedby="cookies-description"
+            />
+          )}
 
           <div className="flex flex-col w-full" style={{ width: asideWidth }}>
             <div className="flex flex-col flex-grow">
@@ -96,30 +129,50 @@ const Sidebar = () => {
 
             <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center select-none">
               <div className="flex items-center ml-1 text-xs ">
-                <a className="mr-2 cursor-pointer" onClick={() => dispatch(showPreferences(true))}>
-                  <ToolHint text="Preferences" toolhintId="Preferences" effect='float' place='top-start' offset={8}>
-                    <IconSettings size={18} strokeWidth={1.5} />
-                  </ToolHint>
-                </a>
-                <a
-                  className="mr-2 cursor-pointer"
-                  onClick={() => setCookiesOpen(true)}
-                >
-                  <ToolHint text="Cookies" toolhintId="Cookies" offset={8}>
-                    <IconCookie size={18} strokeWidth={1.5} />
-                  </ToolHint>
-                </a>
-                <a
-                  className="mr-2 cursor-pointer"
-                  onClick={() => setGoldenEditonOpen(true)}
-                >
-                  <ToolHint text="Golden Edition" toolhintId="Golden Edition"  offset={8} >
-                    <IconHeart size={18} strokeWidth={1.5} />
-                  </ToolHint>
-                </a>
-                <a>
-                  <Notifications />
-                </a>
+                <ul role="menubar" className="flex space-x-2">
+                  <li role="menuitem">
+                    <a
+                      className="cursor-pointer"
+                      data-trigger="preferences"
+                      onClick={() => dispatch(showPreferences(true))}
+                      tabIndex={0}
+                      aria-label="Open Preferences"
+                    >
+                      <ToolHint text="Preferences" toolhintId="Preferences" effect="float" place="top-start" offset={8}>
+                        <IconSettings size={18} strokeWidth={1.5} aria-hidden="true" />
+                      </ToolHint>
+                    </a>
+                  </li>
+                  <li role="menuitem">
+                    <a
+                      className="cursor-pointer"
+                      data-trigger="cookies"
+                      onClick={() => setCookiesOpen(true)}
+                      tabIndex={0}
+                      aria-label="Open Cookies Settings"
+                    >
+                      <ToolHint text="Cookies" toolhintId="Cookies" offset={8}>
+                        <IconCookie size={18} strokeWidth={1.5} aria-hidden="true" />
+                      </ToolHint>
+                    </a>
+                  </li>
+                  <li role="menuitem">
+                    <a
+                      className="cursor-pointer"
+                      data-trigger="golden-edition"
+                      onClick={() => setGoldenEditionOpen(true)}
+                      tabIndex={0}
+                      aria-label="Open Golden Edition"
+                    >
+                      <ToolHint text="Golden Edition" toolhintId="Golden Edition" offset={8}>
+                        <IconHeart size={18} strokeWidth={1.5} aria-hidden="true" />
+                      </ToolHint>
+                    </a>
+                  </li>
+                  <li role="menuitem">
+                      <Notifications />
+                  </li>
+                </ul>
               </div>
               <div className="pl-1" style={{ position: 'relative', top: '3px' }}>
                 {/* This will get moved to home page */}
@@ -129,7 +182,7 @@ const Sidebar = () => {
                   data-show-count="true"
                   aria-label="Star usebruno/bruno on GitHub"
                 >
-                  Star 
+                  Star
                 </GitHubButton> */}
               </div>
               <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.29.1</div>
@@ -137,10 +190,11 @@ const Sidebar = () => {
           </div>
         </div>
       </aside>
+
       <div className="absolute drag-sidebar h-full" onMouseDown={handleDragbarMouseDown}>
         <div className="drag-request-border" />
       </div>
-    </StyledWrapper >
+    </StyledWrapper>
   );
 };