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>

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,7 +135,8 @@ 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)}
                       >
@@ -144,7 +147,8 @@ 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}
                     >
@@ -161,7 +165,8 @@ 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}
                     >

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}>
+        <button className="flex items-center gap-2 text-sm font-medium" onClick={handleTitleClick}>
+          <span aria-hidden>
             <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 }}
-        >
+          </span>
           bruno
-        </div>
+        </button>
         <div className="collection-dropdown flex flex-grow items-center justify-end">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
             <div

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} />
+                <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="mr-2 cursor-pointer"
+                      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} />
+                        <IconCookie size={18} strokeWidth={1.5} aria-hidden="true" />
                       </ToolHint>
                     </a>
+                  </li>
+                  <li role="menuitem">
                     <a
-                  className="mr-2 cursor-pointer"
-                  onClick={() => setGoldenEditonOpen(true)}
+                      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} />
+                      <ToolHint text="Golden Edition" toolhintId="Golden Edition" offset={8}>
+                        <IconHeart size={18} strokeWidth={1.5} aria-hidden="true" />
                       </ToolHint>
                     </a>
-                <a>
+                  </li>
+                  <li role="menuitem">
                       <Notifications />
-                </a>
+                  </li>
+                </ul>
               </div>
               <div className="pl-1" style={{ position: 'relative', top: '3px' }}>
                 {/* This will get moved to home page */}
@@ -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>
   );
 };