Merge pull request #827 from KamiKillertO/fix-aside-menu

Fix aside menu
chrislopresto · Sep 12, 2022 · 69f84c4 · 69f84c4
2 parents 721e431 + 38fe417
commit 69f84c4
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 6 deletions.
diff --git a/addon/components/freestyle-guide/index.hbs b/addon/components/freestyle-guide/index.hbs
@@ -13,14 +13,13 @@
       <h1 class="FreestyleGuide-title">{{@title}}</h1>
       <div class="FreestyleGuide-subtitle">{{@subtitle}}</div>
     </div>
-    <a
+    <button
       class="FreestyleGuide-cta FreestyleGuide-cta--aside {{unless this.showAside 'FreestyleGuide-cta--active'}}"
-      href="#"
-      title="Show Aside"
+      type="button"
       {{on 'click' this.toggleAside}}
     >
       <svg xmlns="http://www.w3.org/2000/svg" class="FreestyleGuide-ctaIcon" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 340.274 340.274" style="enable-background:new 0 0 340.274 340.274;" xml:space="preserve"><path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937 c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765 c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032 c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127 l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516 l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74 c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702 c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474 c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315 C229.552,202.287,202.902,228.474,170.128,228.474z"/></svg>
-    </a>
+    </button>
   </header>
   <main class="FreestyleGuide-body">
     <article class="FreestyleGuide-content">
@@ -39,9 +38,17 @@
       </nav>
     {{/if}}
     {{#if this.showAside}}
-      <aside class="FreestyleGuide-aside">
+      <aside class="FreestyleGuide-aside"
+        {{focus-trap
+          focusTrapOptions=(hash
+            onDeactivate=(fn (mut this.showAside) false)
+            allowOutsideClick=true
+            escapeDeactivates=true
+          )
+        }}
+      >
         <FreestyleUsageControls />
       </aside>
     {{/if}}
   </main>
-</div>
+</div>
diff --git a/app/styles/components/freestyle-guide.scss b/app/styles/components/freestyle-guide.scss
@@ -39,6 +39,12 @@ $FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1,
     text-align: center;
   }
 
+  &-cta--aside {
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+
   &-ctaIcon {
     &:hover {
       fill: $FreestyleGuide-color--primary;
@@ -113,6 +119,7 @@ $FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1,
     display: flex;
     height: 100%;
     font-size: 1.4rem;
+
     & > span {
       margin: auto;
     }

diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "ember-auto-import": "^2.4.2",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.0",
+    "ember-focus-trap": "^1.0.1",
     "ember-modifier": "^3.2.7",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-truth-helpers": "^3.1.1",

diff --git a/vendor/ember-freestyle.css b/vendor/ember-freestyle.css
@@ -22,6 +22,11 @@
   font-size: 1.4rem;
   text-align: center;
 }
+.FreestyleGuide-cta--aside {
+  background: none;
+  border: 0;
+  padding: 0;
+}
 .FreestyleGuide-ctaIcon:hover {
   fill: #00bcd4;
 }

diff --git a/yarn.lock b/yarn.lock
@@ -1428,6 +1428,14 @@
     ember-cli-version-checker "^5.1.2"
     semver "^7.3.5"
 
+"@embroider/addon-shim@^1.0.0":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@embroider/addon-shim/-/addon-shim-1.8.3.tgz#2368510b8ce42d50d02cb3289c32e260dfa34bd9"
+  integrity sha512-7pyHwzT6ESXc3nZsB8rfnirLkUhQWdvj6CkYH+0MUPN74mX4rslf7pnBqZE/KZkW3uBIaBYvU8fxi0hcKC/Paw==
+  dependencies:
+    "@embroider/shared-internals" "^1.8.3"
+    semver "^7.3.5"
+
 "@embroider/macros@1.8.1", "@embroider/macros@^1.0.0", "@embroider/macros@^1.6.0":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@embroider/macros/-/macros-1.8.1.tgz#a74a36ae092213c82d9848a568fbbe9dbf08a110"
@@ -1469,6 +1477,20 @@
     semver "^7.3.5"
     typescript-memoize "^1.0.1"
 
+"@embroider/shared-internals@^1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@embroider/shared-internals/-/shared-internals-1.8.3.tgz#52d868dc80016e9fe983552c0e516f437bf9b9f9"
+  integrity sha512-N5Gho6Qk8z5u+mxLCcMYAoQMbN4MmH+z2jXwQHVs859bxuZTxwF6kKtsybDAASCtd2YGxEmzcc1Ja/wM28824w==
+  dependencies:
+    babel-import-util "^1.1.0"
+    ember-rfc176-data "^0.3.17"
+    fs-extra "^9.1.0"
+    js-string-escape "^1.0.1"
+    lodash "^4.17.21"
+    resolve-package-path "^4.0.1"
+    semver "^7.3.5"
+    typescript-memoize "^1.0.1"
+
 "@embroider/test-setup@^1.8.3":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@embroider/test-setup/-/test-setup-1.8.3.tgz#445b9fe5a363ce50367ac2114750597f98d7806d"
@@ -5975,6 +5997,19 @@ ember-destroyable-polyfill@^2.0.3:
     ember-cli-version-checker "^5.1.1"
     ember-compatibility-helpers "^1.2.1"
 
+ember-export-application-global@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"
+  integrity sha512-B7wiurPgsxsSGzJuPFkpBWnaeuCu2PGpG2BjyrfA1VcL7//o+5RSnZqiCEY326y7qmxb2GoCgo0ft03KBU0rRw==
+
+ember-focus-trap@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ember-focus-trap/-/ember-focus-trap-1.0.1.tgz#a99565f6ce55d500b92a0965e79e3ad04219f157"
+  integrity sha512-ZUyq5ZkIuXp+ng9rCMkqBh36/V95PltL7iljStkma4+651xlAy3Z84L9WOu/uOJyVpNUxii8RJBbAySHV6c+RQ==
+  dependencies:
+    "@embroider/addon-shim" "^1.0.0"
+    focus-trap "^6.7.1"
+
 ember-load-initializers@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.2.tgz#8a47a656c1f64f9b10cecdb4e22a9d52ad9c7efa"
@@ -7130,6 +7165,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-trap@^6.7.1:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.4.tgz#436da1a1d935c48b97da63cd8f361c6f3aa16444"
+  integrity sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==
+  dependencies:
+    tabbable "^5.3.3"
+
 follow-redirects@^1.0.0:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
@@ -12136,6 +12178,11 @@ sync-disk-cache@^2.0.0:
     rimraf "^3.0.0"
     username-sync "^1.0.2"
 
+tabbable@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
+  integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
+
 table@^6.0.9, table@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"