feat: CE-776 - Keyboard Navigation Improvements - Complaints List Page (

#613) Co-authored-by: afwilcox <[email protected]>
bcgov · Sep 9, 2024 · beb8193 · beb8193
1 parent ba0cfb9
commit beb8193
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 109 deletions.
diff --git a/frontend/cypress/e2e/zone-at-a-glance-setup.cy.ts b/frontend/cypress/e2e/zone-at-a-glance-setup.cy.ts
@@ -9,7 +9,7 @@ describe("COMPENF-137 Zone at a Glance - Page Set Up", () => {
     cy.visit("/");
 
     //-- there should be more than one link in the side bar
-    cy.get(".comp-nav-item-list")
+    cy.get(".comp-sidenav-list")
       .find("a")
       .then(({ length }) => {
         expect(length, "rows N").to.be.gt(1);
@@ -21,7 +21,7 @@ describe("COMPENF-137 Zone at a Glance - Page Set Up", () => {
     cy.visit("/");
 
     //-- sidebar should have link to zone at a glance
-    cy.get(".comp-nav-item-list")
+    cy.get(".comp-sidenav-list")
       .find("a")
       .then((items) => {
         const list = Array.from(items, (item) => {

diff --git a/frontend/src/app/components/containers/complaints/complaint-list-tabs.tsx b/frontend/src/app/components/containers/complaints/complaint-list-tabs.tsx
@@ -74,13 +74,13 @@ export const ComplaintListTabs: FC<props> = ({ complaintType, viewType, complain
             className={`nav-item comp-tab comp-tab-${complaintType === code ? "active" : "inactive"}`}
             key={`${code}-tab-item`}
           >
-            <div
+            <Nav.Link
               className={`nav-link ${complaintType === code ? "active" : "inactive"}`}
               id={id}
               onClick={() => onTabChange(code)}
             >
               {name} {complaintTotal(code)}
-            </div>
+            </Nav.Link>
           </Nav.Item>
         );
       })}

diff --git a/frontend/src/app/components/containers/layout/side-bar.tsx b/frontend/src/app/components/containers/layout/side-bar.tsx
@@ -44,27 +44,20 @@ export const SideBar: FC = () => {
     return isOpen ? (
       <li key={`sb-open-${idx}`}>
         {!route ? (
-          <i className={`comp-nav-item-icon ${icon}`}></i>
+          <div className="comp-sidenav-item comp-sidenav-item-lg">
+            <i className={`comp-sidenav-item-icon ${icon}`}></i>
+            <span className="comp-sidenav-item-name">{name}</span>
+          </div>
         ) : (
           <Link
+            className="comp-sidenav-item comp-sidenav-item-lg"
             to={route}
-            id={`icon-${id}`}
+            id={id}
           >
-            <i className={`comp-nav-item-icon ${icon}`}></i>
+            <i className={`comp-sidenav-item-icon ${icon}`}></i>
+            <span className="comp-sidenav-item-name">{name}</span>
           </Link>
         )}
-        <span className="comp-nav-item-name">
-          {!route ? (
-            <>{name}</>
-          ) : (
-            <Link
-              to={route}
-              id={id}
-            >
-              {name}
-            </Link>
-          )}
-        </span>
       </li>
     ) : (
       <OverlayTrigger
@@ -81,46 +74,40 @@ export const SideBar: FC = () => {
       >
         <li key={`sb-closed-${idx}`}>
           {!route ? (
-            <i className={`comp-nav-item-icon ${icon}`}></i>
+            <div
+              className="comp-sidenav-item comp-sidenav-item-sm"
+              aria-label={name}
+            >
+              <i className={`comp-sidenav-item-icon ${icon}`}></i>
+            </div>
           ) : (
             <Link
+              className="comp-sidenav-item comp-sidenav-item-sm"
               to={route}
               id={`icon-${id}`}
+              aria-label={name}
             >
-              <i className={`comp-nav-item-icon ${icon}`}></i>
+              <i className={`comp-sidenav-item-icon ${icon}`}></i>
             </Link>
           )}
-          <span className="comp-nav-item-name">
-            {!route ? (
-              <>{name}</>
-            ) : (
-              <Link
-                to={route}
-                id={id}
-              >
-                {name}
-              </Link>
-            )}
-          </span>
         </li>
       </OverlayTrigger>
     );
   };
 
   return (
-    <div className={`d-flex flex-column flex-shrink-0 comp-side-bar  ${(!isOpen ? "collapsed" : "").trim()}`}>
+    <div className={`d-flex flex-column flex-shrink-0 comp-sidebar ${(!isOpen ? "collapsed" : "").trim()}`}>
       {/* <!-- organization name --> */}
       <AgencyBanner />
 
       {/* <!-- menu items for the organization --> */}
-      <ul className="nav nav-pills flex-column mb-auto comp-nav-item-list">
+      <ul className="nav nav-pills flex-column mb-auto comp-sidenav-list">
         {menueItems.map((item, idx) => {
-          if (UserService.hasRole(Roles.CEEB) && !item.roles.includes('CEEB'))
-            {
-              // Do not display this hence return null
-              return null;
-            }
-            return renderSideBarMenuItem(idx, item);
+          if (UserService.hasRole(Roles.CEEB) && !item.roles.includes("CEEB")) {
+            // Do not display this hence return null
+            return null;
+          }
+          return renderSideBarMenuItem(idx, item);
         })}
       </ul>
       <div

diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
@@ -1618,18 +1618,35 @@ p {
   display: none;
 }
 
+// COMPLAINT PAGE NAVIGATION TABS
 .comp-tabs {
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
 }
 
-.comp-tab-active {
-  color: $gray-700;
-}
+.comp-tab {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 
-.comp-tab-inactive {
-  color: $bc-gov-shade-300;
+  &-active {
+    color: $gray-700;
+  }
+
+  &-inactive {
+    color: $bc-gov-shade-300;
+  }
+
+  .nav-link {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    transition: all ease-out 0.2s;
+
+    &:focus-visible {
+      outline-color: $bc-brand-links;
+      color: $bc-brand-links;
+    }
+  }
 }
 
 .comp-sub-header {

diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
@@ -1,3 +1,8 @@
+// GLOBAL
+a {
+  color: $bc-brand-links;
+}
+
 // LAYOUT
 .comp-app-container {
   display: flex;
@@ -73,34 +78,103 @@
   }
 }
 
-.fixed-sidebar .comp-side-bar {
+// SIDEBAR
+.fixed-sidebar .comp-sidebar {
   position: fixed;
 }
 
-.comp-side-bar {
+.comp-sidebar {
   background-color: $gray-110;
   width: 220px;
   padding: 16px;
   overflow: hidden;
 
-  ul > li:first-child {
-    margin-top: 0px;
+  .comp-sidebar-toggle > i {
+    float: right;
+    cursor: pointer;
   }
 
-  ul > li:last-child {
-    margin-bottom: 0px;
+  .comp-sidenav-list {
+    gap: 4px;
+    margin-left: -8px;
+    margin-right: -8px;
   }
 
   &.collapsed {
+    align-items: center;
     width: 72px;
+
+    .comp-sidenav-list {
+      gap: 8px;
+    }
   }
 
-  .comp-sidebar-toggle > i {
-    float: right;
-    cursor: pointer;
+  &.collapsed > span > span.comp-organization-nav-name {
+    display: none;
+  }
+
+  &.collapsed > span > span.comp-organization-nav-long-name {
+    display: none;
+  }
+
+  &.collapsed > div.comp-sidebar-toggle > i {
+    float: none;
+    margin-left: 25%;
   }
 }
 
+// SIDE NAVIGATION
+.comp-sidenav-list {
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+
+  li {
+    margin: 0;
+  }
+}
+
+.comp-sidenav-item {
+  display: flex;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  transition: all ease-out 0.2s;
+
+  &:hover {
+    color: $bc-brand-links;
+    background-color: #c1d9f2;
+  }
+
+  &:active {
+    background-color: #c1d9f2;
+    outline-color: $bc-brand-links;
+  }
+
+  &:focus-visible {
+    outline-color: $bc-brand-links;
+  }
+
+  &-lg {
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    text-decoration: none;
+  }
+
+  &-sm {
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    i.bi {
+      font-size: 24px;
+    }
+  }
+}
+
+// ORGANIZATION LOGO
 .comp-organization-nav-logo {
   padding-right: 12px;
 }
@@ -121,24 +195,7 @@
   color: $bc-gov-primary;
 }
 
-.comp-side-bar.collapsed > span > span.comp-organization-nav-name {
-  display: none;
-}
-
-.comp-side-bar.collapsed > span > span.comp-organization-nav-long-name {
-  display: none;
-}
-
-.comp-side-bar.collapsed > div.comp-sidebar-toggle > i {
-  float: none;
-  margin-left: 25%;
-}
-
 // Start of Hyperlink Styles
-a {
-  color: $bc-brand-links;
-}
-
 .comp-nav-item-name {
   color: $bc-brand-links;
 
@@ -148,10 +205,6 @@ a {
   }
 }
 
-.spacer-seperator {
-  height: 12px;
-}
-
 .comp-nav-item-name-underline {
   color: $bc-brand-links;
 
@@ -167,6 +220,7 @@ a {
 
 .comp-nav-item-name-inverted {
   color: $bc-brand-links;
+
   a {
     text-decoration: underline;
     color: $white;
@@ -177,15 +231,6 @@ a {
   }
 }
 
-.comp-nav-item-icon {
-  color: $bc-brand-links;
-
-  a {
-    text-decoration: none;
-    color: $bc-brand-links;
-  }
-}
-
 .comp-nav-item-icon-inverted {
   color: $bc-brand-links;
 
@@ -194,32 +239,8 @@ a {
     color: $white;
   }
 }
-
 // End of Hyperlink Styles
 
-.comp-side-bar.collapsed > ul > li > span.comp-nav-item-name {
-  display: none;
-}
-
-.comp-side-bar.collapsed > ul > li > a > i.bi {
-  margin-left: 25%;
-  font-size: 22px;
-}
-
-.comp-nav-item-list {
-  padding-top: 28px;
-
-  li > a > i.bi {
-    padding-right: 8px;
-    color: $bc-gov-primary;
-  }
-
-  li {
-    margin-top: 12px;
-    margin-bottom: 12px;
-  }
-}
-
 .comp-profile-avatar {
   display: inline;
 }