From e6a281beda5c0bd0a331071605a498a5771b844a Mon Sep 17 00:00:00 2001
From: maro <maro@delightlabs.io>
Date: Mon, 26 Feb 2024 01:21:27 +0900
Subject: [PATCH] feat: improve header's a11y (#223)

---
 src/components/NavBar/index.tsx |  24 +++++---
 src/layout/Main/Header.tsx      | 102 ++++++++++++++------------------
 2 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 53248cb3..581f8250 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import Tippy, { TippyProps } from "@tippyjs/react/headless";
 import { NavLink } from "react-router-dom";
 
 const Wrapper = styled.div`
@@ -30,7 +31,7 @@ const NavItem = styled(NavLink, {
       flex: 1;
     `}
 
-  &.active:not(.disabled), &:hover:not(.disabled) {
+  &.active:not(.disabled), &:hover:not(.disabled), &[aria-expanded="true"] {
     opacity: 1;
   }
 
@@ -43,6 +44,7 @@ interface NavBarProps {
   items: (React.ComponentProps<typeof NavItem> & {
     key?: React.Key;
     disabled?: boolean;
+    tippyProps?: TippyProps;
   })[];
   flex?: boolean;
 }
@@ -50,14 +52,18 @@ interface NavBarProps {
 function NavBar({ items, flex = true }: NavBarProps) {
   return (
     <Wrapper>
-      {items.map(({ key, disabled, to, ...navLink }) => (
-        <NavItem
-          className={`${navLink.className ?? ""} ${disabled ? "disabled" : ""}`}
-          key={key ?? `${to.toString()}`}
-          to={disabled ? "#" : to}
-          {...navLink}
-          flex={flex}
-        />
+      {items.map(({ key, disabled, to, tippyProps, ...navItemProps }) => (
+        <Tippy {...tippyProps}>
+          <NavItem
+            className={`${navItemProps.className ?? ""} ${
+              disabled ? "disabled" : ""
+            }`}
+            key={key ?? `${to.toString()}`}
+            to={disabled ? "#" : to}
+            {...navItemProps}
+            flex={flex}
+          />
+        </Tippy>
       ))}
     </Wrapper>
   );
diff --git a/src/layout/Main/Header.tsx b/src/layout/Main/Header.tsx
index bf939a04..75d8de5e 100644
--- a/src/layout/Main/Header.tsx
+++ b/src/layout/Main/Header.tsx
@@ -164,12 +164,12 @@ const SubLink = styled(Link)`
     background-color: ${({ theme }) => theme.colors.text.background};
   }
 
-  &:first-child {
+  &:first-of-type {
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
   }
 
-  &:last-child {
+  &:last-of-type {
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
   }
@@ -377,68 +377,54 @@ function Header() {
                     items={navLinks.map((item) => ({
                       key: item.path,
                       to: item.path,
-                      css: css`
-                        .sub-menu {
-                          display: none;
-                        }
-                        &:hover {
-                          .sub-menu {
-                            display: block;
-                          }
-                        }
-                      `,
-                      children: (
-                        <Typography size={18} weight={900} color="primary">
-                          {item.label}
-                          {item.children && (
-                            <div
-                              className="sub-menu"
+                      tippyProps: {
+                        disabled: !item.children,
+                        placement: "bottom",
+                        interactive: true,
+                        offset: [0, 3],
+                        render: (attrs) => (
+                          <div {...attrs}>
+                            <Panel
+                              border
+                              noPadding
                               css={css`
-                                position: absolute;
-                                padding-top: 3px;
-                                left: 50%;
-                                z-index: 6000;
-                                transform: translateX(-50%);
-                                top: 100%;
+                                min-width: 138px;
                               `}
                             >
-                              <Panel
-                                border
-                                noPadding
-                                css={css`
-                                  min-width: 138px;
-                                `}
-                              >
-                                {item.children.map((child) => (
-                                  <Tooltip
+                              {item?.children?.map((child) => (
+                                <Tooltip
+                                  key={child.path}
+                                  disabled={!child.disabled}
+                                  content="Coming soon"
+                                >
+                                  <SubLink
                                     key={child.path}
-                                    disabled={!child.disabled}
-                                    content="Coming soon"
+                                    to={!child.disabled ? child.path : "#"}
+                                    css={
+                                      child.disabled
+                                        ? css`
+                                            cursor: default;
+                                          `
+                                        : undefined
+                                    }
                                   >
-                                    <SubLink
-                                      key={child.path}
-                                      to={!child.disabled ? child.path : "#"}
-                                      css={
-                                        child.disabled
-                                          ? css`
-                                              cursor: default;
-                                            `
-                                          : undefined
-                                      }
+                                    <Typography
+                                      size={16}
+                                      weight={900}
+                                      color="primary"
                                     >
-                                      <Typography
-                                        size={16}
-                                        weight={900}
-                                        color="primary"
-                                      >
-                                        {child.label}
-                                      </Typography>
-                                    </SubLink>
-                                  </Tooltip>
-                                ))}
-                              </Panel>
-                            </div>
-                          )}
+                                      {child.label}
+                                    </Typography>
+                                  </SubLink>
+                                </Tooltip>
+                              ))}
+                            </Panel>
+                          </div>
+                        ),
+                      },
+                      children: (
+                        <Typography size={18} weight={900} color="primary">
+                          {item.label}
                         </Typography>
                       ),
                     }))}