D8CORE-3718 Minor a11y issues for decoupled main menu

SU-SWS · Oct 3, 2023 · 014afb4 · 014afb4
1 parent 9325c42
commit 014afb4
Show file tree

Hide file tree

Showing 10 changed files with 6,019 additions and 838 deletions.
diff --git a/themes/stanford_basic/decoupled-menu/dist/islands/main-menu.island.umd.js b/themes/stanford_basic/decoupled-menu/dist/islands/main-menu.island.umd.js
diff --git a/themes/stanford_basic/decoupled-menu/package.json b/themes/stanford_basic/decoupled-menu/package.json
@@ -20,16 +20,16 @@
     "@preact/preset-vite": "^2.3.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/dynamic": "^2.0.2",
-    "@vanilla-extract/recipes": "^0.2.5",
+    "@vanilla-extract/recipes": "^0.5.0",
     "@vanilla-extract/sprinkles": "^1.4.1",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "jsona": "^1.11.0",
     "polished": "^4.2.2",
     "preact": "^10.5.7",
     "preact-island": "^1.1.0",
-    "preact-render-to-string": "^5.1.12",
-    "redaxios": "^0.4.1",
-    "styled-components": "^5.3.11"
+    "preact-render-to-string": "^6.2.1",
+    "redaxios": "^0.5.1",
+    "styled-components": "^6.0.8"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.18.9",
@@ -42,18 +42,18 @@
     "babel-loader": "^8.2.5",
     "brotli-size": "^4.0.0",
     "css-loader": "^6.7.1",
-    "dotenv": "^10.0.0",
-    "glob": "^8.0.3",
+    "dotenv": "^16.3.1",
+    "glob": "^10.3.10",
     "gzip-size": "^6.0.0",
     "html-webpack-plugin": "^5.5.0",
     "kleur": "^4.1.5",
     "prettier": "^2.6.2",
     "pretty-bytes": "^5.0.0",
     "style-loader": "^3.3.1",
     "ts-node": "~10.8.0",
-    "typescript": "^4.6.4",
+    "typescript": "^5.2.2",
     "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.9.3"
   }
 }
diff --git a/themes/stanford_basic/decoupled-menu/src/components/caret.tsx b/themes/stanford_basic/decoupled-menu/src/components/caret.tsx
@@ -1,6 +1,6 @@
 const Caret = ({...props}) => {
   return (
-    <svg role="presentation" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <svg role="presentation" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden={true} {...props}>
       <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4887 5.41566C24.1363 6.00024 24.1737 6.98449 23.5725 7.61404L13.1725 18.5029C12.8697 18.8199 12.4449 19 12 19C11.5551 19 11.1303 18.8199 10.8275 18.5029L0.427538 7.61404C-0.173746 6.98449 -0.136251 6.00024 0.511286 5.41566C1.15882 4.83108 2.17119 4.86753 2.77248 5.49708L12 15.1584L21.2275 5.49708C21.8288 4.86753 22.8412 4.83108 23.4887 5.41566Z" fill="currentColor"/>
     </svg>
   )

diff --git a/themes/stanford_basic/decoupled-menu/src/components/close.tsx b/themes/stanford_basic/decoupled-menu/src/components/close.tsx
@@ -1,6 +1,6 @@
 const Close = ({...props}) => {
   return (
-    <svg width="22px" height="26px" viewBox="0 0 24 24" fill="none" {...props}>
+    <svg width="22px" height="26px" viewBox="0 0 24 24" fill="none" aria-hidden={true} {...props}>
       <g id="Menu / Close_SM">
         <path id="Vector" d="M16 16L12 12M12 12L8 8M12 12L16 8M12 12L8 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </g>

diff --git a/themes/stanford_basic/decoupled-menu/src/components/hamburger.tsx b/themes/stanford_basic/decoupled-menu/src/components/hamburger.tsx
@@ -1,6 +1,6 @@
 const Hamburger = ({...props}) => {
   return (
-    <svg width="30px" height="26px" viewBox="0 0 24 24" fill="none" {...props}>
+    <svg width="30px" height="26px" viewBox="0 0 24 24" fill="none" aria-hidden={true} {...props}>
       <path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
       <path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
       <path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>

diff --git a/themes/stanford_basic/decoupled-menu/src/components/magnifying-glass.tsx b/themes/stanford_basic/decoupled-menu/src/components/magnifying-glass.tsx
@@ -1,7 +1,7 @@
 const MagnifyingGlass = ({...props}) => {
   return (
 
-    <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 390.704 390.704" {...props}>
+    <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 390.704 390.704" aria-hidden={true} {...props}>
       <g>
         <g>
           <path d="M379.711,326.556L265.343,212.188c30.826-54.189,23.166-124.495-23.001-170.663c-55.367-55.366-145.453-55.366-200.818,0

diff --git a/themes/stanford_basic/decoupled-menu/src/main-menu.island.tsx b/themes/stanford_basic/decoupled-menu/src/main-menu.island.tsx
@@ -13,18 +13,28 @@ import MagnifyingGlass from "./components/magnifying-glass";
 
 const islandName = 'main-menu-island'
 
-const TopList = styled.ul<{ open?: boolean }>`
+const MenuWrapper = styled.div<{ open?: boolean }>`
   display: ${props => props.open ? "block" : "none"};
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+
+  @media (min-width: 992px) {
+    display: block;
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+  }
+`
+
+const TopList = styled.ul`
   flex-wrap: wrap;
   justify-content: flex-end;
   list-style: none;
   margin: 0;
-  margin-left: calc(50% - 50vw);
-  margin-right: calc(50% - 50vw);
   background: #2e2d29;
   padding: 24px;
   font-size: 18px;
@@ -33,10 +43,9 @@ const TopList = styled.ul<{ open?: boolean }>`
     display: flex;
     background: transparent;
     padding: 0;
-    position: relative;
     font-size: 19px;
     width: 100%;
-    margin: 0 auto;
+
   }
 `
 
@@ -67,9 +76,10 @@ const MobileMenuButton = styled.button`
   }
 `
 
-const SearchContainer = styled.li`
-  padding: 0;
-  margin: 0 0 20px;
+const SearchContainer = styled.div`
+  padding: 10px 30px 0;
+  margin: 0;
+  background: #2e2d29;
 
   form {
     display: flex;
@@ -155,13 +165,13 @@ export const MainMenu = ({}) => {
   }
 
   return (
-    <nav style={{position: "relative"}}>
+    <OutsideClickHandler component="nav" style={{position: "relative"}} onOutsideFocus={() => setMenuOpen(false)}>
       <MobileMenuButton ref={buttonRef} onClick={() => setMenuOpen(!menuOpen)} aria-expanded={menuOpen}>
         {menuOpen ? <Close/> : <Hamburger/>}
         {menuOpen ? "Close" : "Menu"}
       </MobileMenuButton>
 
-      <TopList open={menuOpen}>
+      <MenuWrapper open={menuOpen}>
         <SearchContainer>
           <form action="/search" method="get">
             <label htmlFor="mobile-search-input">Keyword Search</label>
@@ -180,9 +190,11 @@ export const MainMenu = ({}) => {
           </form>
 
         </SearchContainer>
-        {menuTree.items.map(item => <MenuItem key={item.id} {...item}/>)}
-      </TopList>
-    </nav>
+        <TopList>
+          {menuTree.items.map(item => <MenuItem key={item.id} {...item}/>)}
+        </TopList>
+      </MenuWrapper>
+    </OutsideClickHandler>
   )
 }
 

diff --git a/themes/stanford_basic/decoupled-menu/webpack.config.js b/themes/stanford_basic/decoupled-menu/webpack.config.js
@@ -28,7 +28,7 @@ const getIslands = () => {
     // }
 
     return {
-      path,
+      path: './' + path,
       name,
       elementName,
       layer: name,