Component: Tree nav keyboard navigation

influxdata · Oct 20, 2021 · 2bd40c8 · 2bd40c8
1 parent 0f39f54
commit 2bd40c8
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 46 deletions.
diff --git a/src/Components/TreeNav/TreeNav.scss b/src/Components/TreeNav/TreeNav.scss
@@ -22,6 +22,14 @@
   a:active {
     color: inherit;
   }
+
+  button {
+    text-align: left;
+
+    &:focus {
+      outline: none;
+    }
+  }
 }
 
 $cf-tree-nav__header-height: 60px;
@@ -152,35 +160,6 @@ a.cf-tree-nav--header:active {
   align-items: stretch;
   height: $cf-tree-nav__header-height;
 
-  &:after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    content: '';
-    z-index: 0;
-    transition: opacity $cf-transition-default;
-    opacity: 0;
-  }
-
-  &:hover {
-    cursor: default;
-  }
-
-  &.cf-tree-nav--header__clickable {
-    transition: background-color $cf-transition-default,
-      color $cf-transition-default;
-
-    &:hover {
-      cursor: pointer;
-
-      &:after {
-        opacity: 0.5;
-      }
-    }
-  }
-
   .cf-tree-nav--label,
   .cf-tree-nav--square {
     z-index: 1;
@@ -226,6 +205,15 @@ a.cf-tree-nav--header:active {
 .cf-tree-nav--header {
   color: $cf-white;
   background: rgba($cf-grey-95, 0.05);
+
+  &:after {
+    @include createOverlayBase();
+  }
+
+  &:focus:after,
+  &:hover:after {
+    opacity: $cf-hover-active-opacity;
+  }
 }
 
 /*
@@ -259,7 +247,8 @@ a.cf-tree-nav--header:active {
   }
 
   .cf-tree-nav:not(.cf-tree-nav__collapsed) &.cf-tree-nav--item__active:after,
-  &:hover:after {
+  &:hover:after,
+  &:focus-within:after {
     opacity: 1;
   }
 }
@@ -271,7 +260,8 @@ a.cf-tree-nav--item-block:active {
   @extend %cf-tree-nav--block;
   color: $cf-tree-nav__text;
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: $cf-tree-nav__text-hover;
   }
 }
@@ -374,7 +364,8 @@ a.cf-tree-nav--item-block:active {
     border-radius: $cf-radius;
   }
 
-  &:hover:after,
+  &:hover,
+  &:focus:after,
   &:focus-within:after {
     opacity: $cf-hover-active-opacity;
   }
@@ -427,6 +418,15 @@ $cf-tree-nav--user-padding: (
     rgba($cf-grey-95, 0.05);
   border-radius: $cf-radius;
   position: relative;
+
+  &:after {
+    @include createOverlayBase();
+  }
+
+  &:hover:after,
+  &:focus:after {
+    opacity: $cf-hover-active-opacity;
+  }
 }
 
 .cf-tree-nav--avatar {
@@ -461,12 +461,14 @@ $cf-tree-nav--user-padding: (
   transition: background-color $cf-transition-default,
     color $cf-transition-default, border-color $cf-transition-default;
 
-  .cf-tree-nav--user__expandable &:hover {
+  .cf-tree-nav--user__expandable &:hover,
+  &:focus {
     cursor: pointer;
   }
 
   .cf-tree-nav--user__expanded &,
-  .cf-tree-nav--user__expanded &:hover {
+  .cf-tree-nav--user__expanded &:hover,
+  &:focus {
     position: relative;
     z-index: $cf-z--nav-menu;
   }
@@ -623,7 +625,8 @@ a.cf-tree-nav--user-item:hover {
       @include createOverlayBase();
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       cursor: pointer;
 
       &:after {

diff --git a/src/Components/TreeNav/TreeNavHeader.tsx b/src/Components/TreeNav/TreeNavHeader.tsx
@@ -27,7 +27,7 @@ export interface TreeNavHeaderProps extends Omit<StandardFunctionProps, 'id'> {
   linkElement?: RenderLinkElement
 }
 
-export type TreeNavHeaderRef = HTMLDivElement
+export type TreeNavHeaderRef = HTMLButtonElement
 
 export const TreeNavHeader = forwardRef<TreeNavHeaderRef, TreeNavHeaderProps>(
   (
@@ -75,7 +75,8 @@ export const TreeNavHeader = forwardRef<TreeNavHeaderRef, TreeNavHeaderProps>(
     }
 
     return (
-      <div
+      <button
+        type="button"
         id={id}
         ref={ref}
         style={style}
@@ -85,7 +86,7 @@ export const TreeNavHeader = forwardRef<TreeNavHeaderRef, TreeNavHeaderProps>(
       >
         {icon && <div className="cf-tree-nav--square">{icon}</div>}
         <div className="cf-tree-nav--label">{label}</div>
-      </div>
+      </button>
     )
   }
 )

diff --git a/src/Components/TreeNav/TreeNavItem.tsx b/src/Components/TreeNav/TreeNavItem.tsx
@@ -22,7 +22,7 @@ export interface TreeNavItemProps extends Omit<StandardFunctionProps, 'id'> {
   linkElement?: RenderLinkElement
 }
 
-export type TreeNavItemRef = HTMLDivElement
+export type TreeNavItemRef = HTMLButtonElement
 
 export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
   (
@@ -74,7 +74,8 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
 
     return (
       <div className={treeNavItemClass}>
-        <div
+        <button
+          type="button"
           id={id}
           ref={ref}
           style={style}
@@ -84,7 +85,7 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
         >
           <div className="cf-tree-nav--square">{icon}</div>
           <div className="cf-tree-nav--label">{label}</div>
-        </div>
+        </button>
         {children}
       </div>
     )

diff --git a/src/Components/TreeNav/TreeNavSubItem.tsx b/src/Components/TreeNav/TreeNavSubItem.tsx
@@ -40,13 +40,14 @@ export const TreeNavSubItem: FunctionComponent<TreeNavSubItemProps> = ({
   }
 
   let labelElement = (
-    <div
+    <button
       className="cf-tree-nav--sub-item-label"
       onClick={handleClick}
       data-testid={testID}
+      type="button"
     >
       {label}
-    </div>
+    </button>
   )
 
   if (linkElement) {

diff --git a/src/Components/TreeNav/TreeNavUser.tsx b/src/Components/TreeNav/TreeNavUser.tsx
@@ -15,7 +15,7 @@ export interface TreeNavUserProps extends StandardFunctionProps {
   team?: string
 }
 
-export type TreeNavUserRef = HTMLDivElement
+export type TreeNavUserRef = HTMLButtonElement
 
 export const TreeNavUser = forwardRef<TreeNavUserRef, TreeNavUserProps>(
   (
@@ -51,7 +51,8 @@ export const TreeNavUser = forwardRef<TreeNavUserRef, TreeNavUserProps>(
 
     return (
       <ClickOutside onClickOutside={handleCollapseMenu}>
-        <div
+        <button
+          type="button"
           id={id}
           ref={ref}
           style={style}
@@ -71,7 +72,7 @@ export const TreeNavUser = forwardRef<TreeNavUserRef, TreeNavUserProps>(
             </div>
           </div>
           {childWrapper}
-        </div>
+        </button>
       </ClickOutside>
     )
   }