From b4de33dd5f513b75eb886f058fe8bde8698073b2 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Thu, 15 Aug 2019 12:09:55 +0100
Subject: [PATCH 01/14] worked on the navbar to resolve some a11y issues

---
 addon/components/es-navbar.js                |   2 +-
 addon/components/es-navbar/link/component.js |  14 +--
 addon/components/es-navbar/link/template.hbs |  21 ++--
 addon/styles/components/es-navbar.css        | 105 +++++++++++--------
 addon/templates/components/es-navbar.hbs     |  45 +-------
 5 files changed, 83 insertions(+), 104 deletions(-)

diff --git a/addon/components/es-navbar.js b/addon/components/es-navbar.js
index d7d591cf..a2ffbe51 100644
--- a/addon/components/es-navbar.js
+++ b/addon/components/es-navbar.js
@@ -20,7 +20,7 @@ export default class EsNavbar extends Component {
   }
 
   toggleMenu() {
-    let menu = this.element.querySelector('ul[role="menubar"]');
+    let menu = this.element.querySelector('.navbar-list');
 
     menu.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') !== 'true');
   }
diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index 57c4abfb..e4909b8e 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -8,11 +8,7 @@ import { next } from '@ember/runloop';
 export default Component.extend({
   layout,
   tagName: 'li',
-  tabIndex: 0,
-
-  role: 'menuitem',
-
-  attributeBindings: ['role'],
+  classNames: ['navbar-list-item'],
   classNameBindings: ['isDropdown:dropdown'],
   isDropdown: equal('link.type', 'dropdown'),
 
@@ -34,7 +30,7 @@ export default Component.extend({
   navbar: service(),
 
   didInsertElement() {
-    this.element.tabIndex = -1;
+    // this.element.tabIndex = -1;
 
     this.get('navbar').register(this);
     this.domNode = this.element.querySelector('ul[role="menu"]');
@@ -51,8 +47,8 @@ export default Component.extend({
 
   handleBlur() {
     next(this, function() {
-      let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li'));
-      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
+      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list-item'));
+      let focused = subItems.find(item => document.activeElement === item.querySelector('button'));
 
       // debugger
       if(!focused) {
@@ -103,7 +99,7 @@ export default Component.extend({
   }).volatile(),
 
   setFocusToFirstItem() {
-    let element = this.element.querySelector('ul[role="menu"] li a')
+    let element = this.element.querySelector('.navbar-dropdown-list-item-link')
     if (element) {
       element.focus();
     }
diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs
index fb7f6f1e..46cfc2d4 100644
--- a/addon/components/es-navbar/link/template.hbs
+++ b/addon/components/es-navbar/link/template.hbs
@@ -1,30 +1,25 @@
 {{#if (eq link.type "link")}}
   <a
-    class="navbar-link__dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
+    class="navbar-list-item-link"
     href={{link.href}}
-    tabindex={{if (eq index 0) 0 -1}}
   >
     {{link.name}}
   </a>
 {{/if}}
 {{#if (eq link.type "dropdown")}}
-  <a
-    class="navbar-link__dropdown"
-    aria-haspopup="true"
+  <button
+    class="navbar-list-item-dropdown-toggle"
     aria-expanded="false"
-    href="javascript:void(0)"
     tabindex={{if (eq index 0) 0 -1}}
   >
     {{link.name}}
-  </a>
-  <ul class="dropdown" role="menu" aria-label={{link.name}}>
+  </button>
+  <ul class="navbar-dropdown-list">
     {{#each link.items as |item|}}
       {{#if (eq item.type "link")}}
-        <li role="none">
+        <li class="navbar-dropdown-list-item">
           <a
-            class="navbar-link__dropdown-item"
+            class="navbar-dropdown-list-item-link"
             href={{item.href}}
             tabindex="-1"
           >
@@ -33,7 +28,7 @@
         </li>
       {{/if}}
       {{#if (eq item.type "divider")}}
-        <hr>
+        <li role="separator" class="separator"></li>
       {{/if}}
     {{/each}}
   </ul>
diff --git a/addon/styles/components/es-navbar.css b/addon/styles/components/es-navbar.css
index 8a186529..fd9b14a8 100644
--- a/addon/styles/components/es-navbar.css
+++ b/addon/styles/components/es-navbar.css
@@ -1,23 +1,27 @@
-nav.es-navbar {
-  width: 100%;
-  max-width: var(--container-width-large);
-  padding: 1rem;
-  font-size: var(--text-preset-2);
+.es-navbar {
+  background-color: #1C1E23;
+  color: white;
   display: flex;
   flex-direction: column;
+  font-size: var(--text-preset-2);
+  max-width: var(--container-width-large);
+  padding: 0.5rem;
+  width: 100%;
 }
 
 .navbar-brand {
   display: block;
-  padding: 0 2rem;
-  height: 6rem;
+  padding: 0 1rem;
+  height: 3rem;
+  /* TODO using order is not ideal for accessibility */
   order: 2;
 }
 
-.navbar-nav {
+.navbar-list {
   padding: 0;
   width: 100%;
-  margin: 1rem 0 0 0;
+  margin: 0.5rem 0 0 0;
+  /* TODO using order is not ideal for accessibility */
   order: 3;
 }
 
@@ -27,9 +31,10 @@ nav.es-navbar {
   border-radius: 4px;
   border-color: var(--color-light);
   margin-left: auto;
+  /* TODO using order is not ideal for accessibility */
   order: 1;
-  margin-bottom: -6rem;
-  height: 6rem;
+  margin-bottom: -3rem;
+  height: 3rem;
 }
 
 .navbar-toggler .navbar-toggler-icon {
@@ -38,107 +43,125 @@ nav.es-navbar {
 
 .navbar-toggler-icon {
   display: block;
-  width: 5rem;
-  height: 3rem;
-  vertical-align: middle;
+  width: 2.5rem;
+  height: 1.5rem;
   content: "";
   background: center center no-repeat;
   background-size: 100% 100%;
 }
 
-.navbar-nav >li {
+.navbar-list-item {
   list-style: none;
   position: relative;
 }
 
-.navbar-link__dropdown {
-  display: block;
-  padding: 2rem;
-  line-height: 2rem;
+.navbar-list-item-link {
+  padding: 1rem;
+  color: inherit;
   text-decoration: none;
+}
+
+.navbar-list-item-dropdown-toggle {
+  background-color: transparent;
+  border-color: transparent;
   color: #FFF;
-  white-space: nowrap;
+  display: block;
   font-weight: 600;
+  line-height: 1rem;
+  padding: 1rem;
+  text-decoration: none;
+  white-space: nowrap;
 }
 
-.dropdown .navbar-link__dropdown::after {
+.navbar-list-item-dropdown-toggle::after {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
   vertical-align: middle;
-  margin-left: 1rem;
+  margin-left: 0.5rem;
   border-top: 5px dashed;
-  border-top: 5px solid var(--color-orange);
+  border-top: 5px solid var(--color-ember-orange);
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 }
 
-li[aria-expanded=true] .navbar-link__dropdown {
+.navbar-list-item-dropdown-toggle[aria-expanded="true"] {
   background: #FFFFFF;
-  color: var(--color-orange);
+  color: var(--color-ember-orange);
 }
 
-ul[role="menu"] {
+.navbar-dropdown-list {
   display: none;
   padding: 0;
   background: #FFFFFF;
-  box-shadow: 5px 5px 5px 0 rgba(50,50,50,0.2);
+  box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
 }
 
-ul[role="menu"] hr {
+li.separator {
   margin: 0;
+  /* TODO fix this */
+  border-bottom: 1px solid black;
 }
 
-ul[role="menu"] li {
+.navbar-dropdown-list-item {
   list-style: none;
   display: block;
   white-space: nowrap;
   background: #FFF;
 }
 
-ul[role="menu"] li> a {
-  padding: 2rem;
+.navbar-dropdown-list-item-link {
+  padding: 1rem;
   font-weight: 600;
   display: block;
   text-decoration: none;
-  color: var(--color-orange);
+  color: var(--color-ember-orange);
 }
 
-ul[role="menu"] li> a:hover, ul[role="menu"] li> a:focus {
-  background: var(--color-orange);
+.navbar-dropdown-list-item-link:hover,
+.navbar-dropdown-list-item-link:focus {
+  background: var(--color-ember-orange);
   color: var(--color-light);
 }
 
 
-ul[role="menubar"][aria-expanded="true"] li{
+/* TODO This rule doesn't make sense so I'm commenting it out for now
+ul[role="menubar"][aria-expanded="true"] li {
   background: blue;
-}
+} */
 
 @media (min-width: 992px) {
   nav.es-navbar {
     display: flex;
     flex-direction: row;
   }
+
   .navbar-brand {
     padding: 0;
+    /* TODO using order is not ideal for accessibility */
     order: 1;
   }
-  .navbar-nav {
+
+  .navbar-list {
+    /* TODO using order is not ideal for accessibility */
     order: 2;
-    margin: 0 2rem;
+    margin: 0 1rem;
     padding: 0;
     display: flex;
     align-items: center;
   }
+
   .navbar-toggler {
+    /* TODO using order is not ideal for accessibility */
     order: 3;
   }
-  ul[role="menu"] {
+
+  .navbar-dropdown-list {
     display: none;
     position: absolute;
     padding: 0;
     background: #FFFFFF;
-    box-shadow: 5px 5px 5px 0 rgba(50,50,50,0.2);
+    box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
   }
-}
\ No newline at end of file
+}
diff --git a/addon/templates/components/es-navbar.hbs b/addon/templates/components/es-navbar.hbs
index 223158b5..c752a6e0 100644
--- a/addon/templates/components/es-navbar.hbs
+++ b/addon/templates/components/es-navbar.hbs
@@ -1,47 +1,12 @@
-<nav class="es-navbar" aria-label="Ember">
-
-  <a class="navbar-brand" href={{navHome}}>
-    <img
-      src="https://glimmer-styleguide.global.ssl.fastly.net/glimmer-styleguide/master/images/ember-logo.svg"
-      alt="home"
-    >
-  </a>
+<nav class="es-navbar">
+  <button class="navbar-toggler ember-view" onclick={{action this.toggleMenu}} aria-label="Site Navigation" aria-expanded="false">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-  <ul class="navbar-nav" role="menubar" aria-expanded="false">
+  <ul class="navbar-list">
     {{#each navLinks as |link index|}}
       {{es-navbar/link link=link index=index}}
     {{/each}}
   </ul>
 
-
-  {{#if hasBlock}}
-    {{yield}}
-  {{else}}
-    <form class="navbar-form navbar-right searchbox">
-      <div class="input-group">
-        <label for="search-input" class="control-label sr-only">Search</label>
-        <input
-          type="text"
-          class="form-control search input ds-input"
-          placeholder="Search..."
-          id="search-input"
-          role="combobox"
-          aria-expanded="false"
-          aria-owns="algolia-autocomplete-listbox-0"
-          autocorrect="off"
-          autocapitalize="none"
-          spellcheck="false"
-        >
-        <span></span>
-      </div>
-    </form>
-  {{/if}}
-
-  <button
-    class="navbar-toggler ember-view"
-    onclick={{action this.toggleMenu}}
-    aria-label="Open navigation"
-  >
-    <span class="navbar-toggler-icon"></span>
-  </button>
 </nav>

From 7948ab22cddef3450a58b71593399832b7387267 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Thu, 15 Aug 2019 12:10:08 +0100
Subject: [PATCH 02/14] update accessibliity docs

---
 docs/concepts/accessibility.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/concepts/accessibility.md b/docs/concepts/accessibility.md
index bb50249d..2d69557f 100644
--- a/docs/concepts/accessibility.md
+++ b/docs/concepts/accessibility.md
@@ -2,5 +2,6 @@
 
 ## Code Guide
 
-- It is okay to ship code that can iterate to being a more inclusive experience, but can still be used by people with assistive technology. 
-- it is not acceptable to ship code that actively breaks the experience for users with assistive technology. 
+### Iterative Improvements
+- It is 100% okay to ship code that can iterate to being a more inclusive experience- as long as it can still be used by people with assistive technology. 
+- It is not okay to ship code that actively breaks the experience for users with assistive technology. 

From 25375be3309ab7a8f46c9a00bbdb1aaedee33131 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Thu, 15 Aug 2019 12:11:13 +0100
Subject: [PATCH 03/14] alpha sort properties, unitless line-heights

---
 addon/styles/components/es-navbar.css | 177 +++++++++++++-------------
 1 file changed, 90 insertions(+), 87 deletions(-)

diff --git a/addon/styles/components/es-navbar.css b/addon/styles/components/es-navbar.css
index fd9b14a8..cfc1cfbc 100644
--- a/addon/styles/components/es-navbar.css
+++ b/addon/styles/components/es-navbar.css
@@ -3,7 +3,9 @@
   color: white;
   display: flex;
   flex-direction: column;
-  font-size: var(--text-preset-2);
+  /* font-size: var(--text-preset-2); */
+  font-size: 1.2em;
+  font-weight: 500;
   max-width: var(--container-width-large);
   padding: 0.5rem;
   width: 100%;
@@ -42,12 +44,12 @@
 }
 
 .navbar-toggler-icon {
+  background-size: 100% 100%;
+  background: center center no-repeat;
+  content: "";
   display: block;
-  width: 2.5rem;
   height: 1.5rem;
-  content: "";
-  background: center center no-repeat;
-  background-size: 100% 100%;
+  width: 2.5rem;
 }
 
 .navbar-list-item {
@@ -56,8 +58,8 @@
 }
 
 .navbar-list-item-link {
-  padding: 1rem;
   color: inherit;
+  padding: 1rem;
   text-decoration: none;
 }
 
@@ -66,102 +68,103 @@
   border-color: transparent;
   color: #FFF;
   display: block;
-  font-weight: 600;
-  line-height: 1rem;
   padding: 1rem;
   text-decoration: none;
   white-space: nowrap;
 }
 
-.navbar-list-item-dropdown-toggle::after {
-  content: '';
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  margin-left: 0.5rem;
-  border-top: 5px dashed;
-  border-top: 5px solid var(--color-ember-orange);
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-}
-
-.navbar-list-item-dropdown-toggle[aria-expanded="true"] {
-  background: #FFFFFF;
-  color: var(--color-ember-orange);
-}
-
-.navbar-dropdown-list {
-  display: none;
-  padding: 0;
-  background: #FFFFFF;
-  box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
-}
-
-li.separator {
-  margin: 0;
-  /* TODO fix this */
-  border-bottom: 1px solid black;
-}
-
-.navbar-dropdown-list-item {
-  list-style: none;
-  display: block;
-  white-space: nowrap;
-  background: #FFF;
-}
-
-.navbar-dropdown-list-item-link {
-  padding: 1rem;
-  font-weight: 600;
-  display: block;
-  text-decoration: none;
-  color: var(--color-ember-orange);
-}
-
-.navbar-dropdown-list-item-link:hover,
-.navbar-dropdown-list-item-link:focus {
-  background: var(--color-ember-orange);
-  color: var(--color-light);
+.navbar-list-item-dropdown-toggle:hover {
+  cursor: pointer;
 }
 
+  .navbar-list-item-dropdown-toggle::after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px dashed;
+    border-top: 5px solid white;
+    content: '';
+    display: inline-block;
+    height: 0;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+    width: 0;
+  }
 
-/* TODO This rule doesn't make sense so I'm commenting it out for now
-ul[role="menubar"][aria-expanded="true"] li {
-  background: blue;
-} */
-
-@media (min-width: 992px) {
-  nav.es-navbar {
-    display: flex;
-    flex-direction: row;
+  .navbar-list-item-dropdown-toggle[aria-expanded="true"] {
+    background: #FFFFFF;
+    color: var(--color-ember-orange);
   }
 
-  .navbar-brand {
+  .navbar-dropdown-list {
+    background: #FFFFFF;
+    box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
+    display: none;
     padding: 0;
-    /* TODO using order is not ideal for accessibility */
-    order: 1;
   }
 
-  .navbar-list {
-    /* TODO using order is not ideal for accessibility */
-    order: 2;
-    margin: 0 1rem;
-    padding: 0;
-    display: flex;
-    align-items: center;
+  li.separator {
+    margin: 0;
+    /* TODO fix this */
+    border-bottom: 1px solid black;
   }
 
-  .navbar-toggler {
-    /* TODO using order is not ideal for accessibility */
-    order: 3;
+  .navbar-dropdown-list-item {
+    background: #FFF;
+    display: block;
+    list-style: none;
+    white-space: nowrap;
   }
 
-  .navbar-dropdown-list {
-    display: none;
-    position: absolute;
-    padding: 0;
-    background: #FFFFFF;
-    box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
+  .navbar-dropdown-list-item-link {
+    color: var(--color-ember-orange);
+    display: block;
+    padding: 1rem;
+    text-decoration: none;
   }
-}
+
+  .navbar-dropdown-list-item-link:hover,
+  .navbar-dropdown-list-item-link:focus {
+    background: var(--color-ember-orange);
+    color: var(--color-light);
+  }
+
+
+  /* TODO This rule doesn't make sense so I'm commenting it out for now
+ul[role="menubar"][aria-expanded="true"] li {
+  background: blue;
+} */
+
+  @media (min-width: 992px) {
+    nav.es-navbar {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .navbar-brand {
+      padding: 0;
+      /* TODO using order is not ideal for accessibility */
+      order: 1;
+    }
+
+    .navbar-list {
+      /* TODO using order is not ideal for accessibility */
+      order: 2;
+      align-items: center;
+      display: flex;
+      margin: 0 1rem;
+      padding: 0;
+    }
+
+    .navbar-toggler {
+      /* TODO using order is not ideal for accessibility */
+      order: 3;
+    }
+
+    .navbar-dropdown-list {
+      background: #FFFFFF;
+      box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
+      display: none;
+      padding: 0;
+      position: absolute;
+    }
+  }
\ No newline at end of file

From 58ae5caedfb2f1c53a28fc4f1645b1dbcb71adff Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Mon, 1 Jul 2019 20:35:44 +0100
Subject: [PATCH 04/14] fixing expanding the navbar

---
 addon/components/es-navbar/link/component.js |  4 ++--
 docs/components/navbar.md                    | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index e4909b8e..58eb9ff1 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -33,10 +33,10 @@ export default Component.extend({
     // this.element.tabIndex = -1;
 
     this.get('navbar').register(this);
-    this.domNode = this.element.querySelector('ul[role="menu"]');
+    this.domNode = this.element.querySelector('ul.navbar-dropdown-list');
 
     if(this.domNode) {
-      this.element.querySelector('a').onmousedown = () => this.expand();
+      this.element.querySelector('button').onmousedown = () => this.expand();
       let links = Array.from(this.domNode.querySelectorAll('a'))
 
       links.forEach((ancor) => {
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 88a92721..a00c6001 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -1,11 +1,19 @@
 # Navbar
 
-The navbar comes with the default Ember links, if you would like to override the default links you can pass a json object to update the links in the navbar.
+The EsNavbar component is designed to be the same component used in all Ember websites that use the styleguide. It comes with the default links that are common to all sites. In most cases you will want to make sure the Navbar is inside an EsHeader which will make sure that it is properly centred.
 
 ```handlebars
-{{es-navbar}}
+<EsHeader class="dark">
+  <EsNavbar />
+</EsHeader>
 ```
 
+## Custom Links
+
+If you would like to override the default links you can pass a json object to update the links in the navbar.
+
 ```handlebars
-{{es-navbar links=customLinks}}
+<EsHeader class="dark">
+  <EsNavbar @links={{customLinks}} />
+</EsHeader>
 ```

From 1670501c92d703185077a9b559c711c01d1ee946 Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Mon, 1 Jul 2019 15:17:50 -0500
Subject: [PATCH 05/14] fixed the spelling of anchor

---
 addon/components/es-navbar.js                | 1 -
 addon/components/es-navbar/link/component.js | 4 ++--
 addon/components/es-navbar/link/template.hbs | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/addon/components/es-navbar.js b/addon/components/es-navbar.js
index a2ffbe51..cf7cf312 100644
--- a/addon/components/es-navbar.js
+++ b/addon/components/es-navbar.js
@@ -21,7 +21,6 @@ export default class EsNavbar extends Component {
 
   toggleMenu() {
     let menu = this.element.querySelector('.navbar-list');
-
     menu.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') !== 'true');
   }
 }
diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index 58eb9ff1..eb63b6e7 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -39,8 +39,8 @@ export default Component.extend({
       this.element.querySelector('button').onmousedown = () => this.expand();
       let links = Array.from(this.domNode.querySelectorAll('a'))
 
-      links.forEach((ancor) => {
-        ancor.addEventListener('blur', () => this.handleBlur());
+      links.forEach((anchor) => {
+        anchor.addEventListener('blur', () => this.handleBlur());
       });
     }
   },
diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs
index 46cfc2d4..9ab66fb4 100644
--- a/addon/components/es-navbar/link/template.hbs
+++ b/addon/components/es-navbar/link/template.hbs
@@ -10,7 +10,6 @@
   <button
     class="navbar-list-item-dropdown-toggle"
     aria-expanded="false"
-    tabindex={{if (eq index 0) 0 -1}}
   >
     {{link.name}}
   </button>

From 316fb82f87552eb07ae2b28d80725d9b9ce6c5cd Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Mon, 1 Jul 2019 15:18:32 -0500
Subject: [PATCH 06/14] no one needs z-index 1000

---
 addon/components/es-navbar/link/component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index eb63b6e7..12bc6db3 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -65,7 +65,7 @@ export default Component.extend({
     if(this.domNode) {
       this.domNode.style.display = 'block';
       this.domNode.style.top = rect.height + 'px';
-      this.domNode.style.zIndex = 1000;
+      this.domNode.style.zIndex = 10;
     }
 
     this.set('expanded', true);

From 8c90e181ee90904738efba37e5a20d18c60cfc76 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Thu, 15 Aug 2019 12:14:00 +0100
Subject: [PATCH 07/14] add functionality to navbar

---
 addon/components/es-navbar.js                |   2 +-
 addon/components/es-navbar/link/component.js | 269 ++++---------------
 addon/components/es-navbar/link/template.hbs |  40 +--
 addon/styles/components/es-navbar.css        |   9 +-
 4 files changed, 81 insertions(+), 239 deletions(-)

diff --git a/addon/components/es-navbar.js b/addon/components/es-navbar.js
index cf7cf312..e6ad5fea 100644
--- a/addon/components/es-navbar.js
+++ b/addon/components/es-navbar.js
@@ -20,7 +20,7 @@ export default class EsNavbar extends Component {
   }
 
   toggleMenu() {
-    let menu = this.element.querySelector('.navbar-list');
+    let menu = this.element.querySelector('.navbar-toggler');
     menu.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') !== 'true');
   }
 }
diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index 12bc6db3..db55c963 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -3,7 +3,7 @@ import layout from './template';
 import { computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
-import { next } from '@ember/runloop';
+import { schedule, next } from '@ember/runloop';
 
 export default Component.extend({
   layout,
@@ -12,229 +12,66 @@ export default Component.extend({
   classNameBindings: ['isDropdown:dropdown'],
   isDropdown: equal('link.type', 'dropdown'),
 
-  keyCode: Object.freeze({
-    'TAB': 9,
-    'RETURN': 13,
-    'ESC': 27,
-    'SPACE': 32,
-    'PAGEUP': 33,
-    'PAGEDOWN': 34,
-    'END': 35,
-    'HOME': 36,
-    'LEFT': 37,
-    'UP': 38,
-    'RIGHT': 39,
-    'DOWN': 40
-  }),
-
-  navbar: service(),
-
-  didInsertElement() {
-    // this.element.tabIndex = -1;
-
-    this.get('navbar').register(this);
-    this.domNode = this.element.querySelector('ul.navbar-dropdown-list');
-
-    if(this.domNode) {
-      this.element.querySelector('button').onmousedown = () => this.expand();
-      let links = Array.from(this.domNode.querySelectorAll('a'))
-
-      links.forEach((anchor) => {
-        anchor.addEventListener('blur', () => this.handleBlur());
-      });
-    }
-  },
-
-  handleBlur() {
-    next(this, function() {
-      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list-item'));
-      let focused = subItems.find(item => document.activeElement === item.querySelector('button'));
-
-      // debugger
-      if(!focused) {
-        this.closePopupMenu();
-      }
-    })
-  },
-
-  openPopupMenu() {
-    // Get position and bounding rectangle of controller object's DOM node
-    var rect = this.element.getBoundingClientRect();
-
-    // Set CSS properties
-    if(this.domNode) {
-      this.domNode.style.display = 'block';
-      this.domNode.style.top = rect.height + 'px';
-      this.domNode.style.zIndex = 10;
-    }
+  isDropdownOpen: false,
 
-    this.set('expanded', true);
-  },
-
-  closePopupMenu(force) {
-    var controllerHasHover = this.hasHover;
-
-    var hasFocus = this.hasFocus;
-
-    if (!this.isMenubarItem) {
-      controllerHasHover = false;
-    }
+  // because aria-expanded requires a string value instead of a boolean
+  isExpanded: computed('isDropdownOpen', function() {
+    return this.isDropdownOpen ? 'true' : 'false';
+  }),
 
-    if (force || (!hasFocus && !this.hasHover && !controllerHasHover)) {
-      if(this.domNode) {
-        this.domNode.style.display = 'none';
-        this.domNode.style.zIndex = 0;
+  navbar: service(), //TODO  also do we need this too?
+
+  actions: {
+    triggerDropdown() {
+      this.toggleProperty('isDropdownOpen');
+
+      if (this.isDropdownOpen) {
+        // once it's open, let's make sure it can do some things
+        schedule('afterRender', this, function() {
+          // Define startup states
+          // Dropdown list
+          let dropdownList = this.element.querySelector('.navbar-dropdown-list');
+
+          // Identify / set focus on the first item in the dropdown list automatically
+          let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
+          firstFocusable.focus();
+
+          // Need some event listeners for keyboard events
+          dropdownList.addEventListener('keydown', event => {
+
+            // Listen for ESC key to exit
+            if (event.keyCode === 27 && this.isDropdownOpen) {
+              this.closeDropdown();
+            } else if (this.isDropdownOpen) {
+              // if focus leaves the open dropdown, close it (without trying to otherwise control focus)
+              this.handleBlur();
+            } else {
+              return;
+            }
+          });
+        });
       }
-      this.set('expanded', false);
-    }
-  },
-
-  expanded: computed({
-    get() {
-      return this.element.getAttribute('aria-expanded') === 'true';
-    },
-    set(key, value) {
-      this.element.setAttribute('aria-expanded', value);
-    }
-  }).volatile(),
-
-  setFocusToFirstItem() {
-    let element = this.element.querySelector('.navbar-dropdown-list-item-link')
-    if (element) {
-      element.focus();
-    }
-  },
-
-  setFocusToLastItem() {
-    this.element.querySelector('ul[role="menu"] li a:last-of-type').focus();
-  },
-
-  setFocusToNextItem() {
-    let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li'));
-
-    let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-    let focusedIndex = subItems.indexOf(focused);
-
-    let nextItem = subItems[(focusedIndex + 1) % subItems.length];
-
-    if (!nextItem) {
-      return;
     }
-
-    nextItem.querySelector('a').focus();
   },
-
-  setFocusToPreviousItem() {
-    let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li'));
-
-    let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-    let focusedIndex = subItems.indexOf(focused);
-
-    let nextIndex = focusedIndex - 1;
-
-    if (nextIndex < 0) {
-      nextIndex = subItems.length - 1;
-    }
-
-    let nextItem = subItems[nextIndex];
-
-    if (!nextItem) {
-      return;
-    }
-
-    nextItem.querySelector('a').focus();
+  closeDropdown() {
+    // set the isDropdownOpen to false, which will make the dropdown go away
+    this.set('isDropdownOpen', false);
+    // after that rendering bit happens, we need to return the focus to the trigger
+    schedule('afterRender', this, function() {
+      let dropdownTrigger = this.element.querySelector('.navbar-list-item-dropdown-toggle');
+      dropdownTrigger.focus();
+    });
   },
 
-  keyDown(event) {
-    let flag = false;
-    let clickEvent;
-    let mousedownEvent;
-
-    switch (event.keyCode) {
-      case this.keyCode.RETURN:
-      case this.keyCode.SPACE:
-        // Create simulated mouse event to mimic the behavior of ATs
-        // and let the event handler handleClick do the housekeeping.
-        mousedownEvent = new MouseEvent('mousedown', {
-          'view': window,
-          'bubbles': true,
-          'cancelable': true
-        });
-        clickEvent = new MouseEvent('click', {
-          'view': window,
-          'bubbles': true,
-          'cancelable': true
-        });
-
-        document.activeElement.dispatchEvent(mousedownEvent);
-        document.activeElement.dispatchEvent(clickEvent);
-
-        flag = true;
-        break;
-      case this.keyCode.DOWN:
-        if(this.get('expanded')) {
-          this.setFocusToNextItem();
-        } else {
-          this.openPopupMenu();
-          this.setFocusToFirstItem();
-        }
-        flag = true;
-        break;
-
-      case this.keyCode.LEFT:
-        this.get('navbar').setFocusToPreviousItem(this);
-        flag = true;
-        break;
-
-      case this.keyCode.RIGHT:
-        this.get('navbar').setFocusToNextItem(this);
-        flag = true;
-        break;
-
-      case this.keyCode.UP:
-        if(this.get('expanded')) {
-          this.setFocusToPreviousItem();
-        } else {
-          this.openPopupMenu();
-          this.setFocusToLastItem();
-        }
-        break;
-
-      case this.keyCode.HOME:
-      case this.keyCode.PAGEUP:
-        this.setFocusToFirstItem();
-        flag = true;
-        break;
-
-      case this.keyCode.END:
-      case this.keyCode.PAGEDOWN:
-        this.setFocusToLastItem();
-        flag = true;
-        break;
-
-      case this.keyCode.TAB:
-        this.closePopupMenu(true);
-        break;
-
-      case this.keyCode.ESC:
-        this.closePopupMenu(true);
-        break;
-    }
-
-    if (flag) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  },
+  handleBlur() {
+    next(this, function() {
+      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
+      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
 
-  expand() {
-    next(this, () => {
-      if(this.get('expanded')) {
-        this.closePopupMenu();
-      } else {
-        this.openPopupMenu();
-        this.setFocusToFirstItem();
+      if (!focused) {
+        this.set('isDropdownOpen', false);
       }
-    })
+    });
   }
+
 });
diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs
index 9ab66fb4..5b4f8935 100644
--- a/addon/components/es-navbar/link/template.hbs
+++ b/addon/components/es-navbar/link/template.hbs
@@ -8,27 +8,29 @@
 {{/if}}
 {{#if (eq link.type "dropdown")}}
   <button
+    {{action "triggerDropdown"}}
     class="navbar-list-item-dropdown-toggle"
-    aria-expanded="false"
+    aria-expanded={{isExpanded}}
   >
     {{link.name}}
   </button>
-  <ul class="navbar-dropdown-list">
-    {{#each link.items as |item|}}
-      {{#if (eq item.type "link")}}
-        <li class="navbar-dropdown-list-item">
-          <a
-            class="navbar-dropdown-list-item-link"
-            href={{item.href}}
-            tabindex="-1"
-          >
-            {{item.name}}
-          </a>
-        </li>
-      {{/if}}
-      {{#if (eq item.type "divider")}}
-        <li role="separator" class="separator"></li>
-      {{/if}}
-    {{/each}}
-  </ul>
+  {{#if isDropdownOpen}}
+    <ul class="navbar-dropdown-list">
+      {{#each link.items as |item|}}
+        {{#if (eq item.type "link")}}
+          <li class="navbar-dropdown-list-item">
+            <a
+              class="navbar-dropdown-list-item-link"
+              href={{item.href}}
+            >
+              {{item.name}}
+            </a>
+          </li>
+        {{/if}}
+        {{#if (eq item.type "divider")}}
+          <li role="separator" class="separator"></li>
+        {{/if}}
+      {{/each}}
+    </ul>
+  {{/if}}
 {{/if}}
diff --git a/addon/styles/components/es-navbar.css b/addon/styles/components/es-navbar.css
index cfc1cfbc..7c71965a 100644
--- a/addon/styles/components/es-navbar.css
+++ b/addon/styles/components/es-navbar.css
@@ -91,14 +91,16 @@
   }
 
   .navbar-list-item-dropdown-toggle[aria-expanded="true"] {
-    background: #FFFFFF;
     color: var(--color-ember-orange);
   }
+  .navbar-list-item-dropdown-toggle[aria-expanded="true"]:after {
+    border-top-color: var(--color-ember-orange);
+  }
+
 
   .navbar-dropdown-list {
     background: #FFFFFF;
     box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
-    display: none;
     padding: 0;
   }
 
@@ -138,6 +140,7 @@ ul[role="menubar"][aria-expanded="true"] li {
     nav.es-navbar {
       display: flex;
       flex-direction: row;
+      padding: 0;
     }
 
     .navbar-brand {
@@ -163,8 +166,8 @@ ul[role="menubar"][aria-expanded="true"] li {
     .navbar-dropdown-list {
       background: #FFFFFF;
       box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
-      display: none;
       padding: 0;
       position: absolute;
+      z-index: 100;
     }
   }
\ No newline at end of file

From 7721e2dd2aaa171a75479f6be33e90470c1f000a Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Wed, 3 Jul 2019 12:38:32 -0500
Subject: [PATCH 08/14] hid the toggle for desktop viewports

---
 addon/styles/components/es-navbar.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/addon/styles/components/es-navbar.css b/addon/styles/components/es-navbar.css
index 7c71965a..1b887f64 100644
--- a/addon/styles/components/es-navbar.css
+++ b/addon/styles/components/es-navbar.css
@@ -159,8 +159,7 @@ ul[role="menubar"][aria-expanded="true"] li {
     }
 
     .navbar-toggler {
-      /* TODO using order is not ideal for accessibility */
-      order: 3;
+      display: none; /* TODO remove this properly or else screen readers will still pick up on it */
     }
 
     .navbar-dropdown-list {

From 34d644ad6ab0f3da1dfc2cbb4765b0e6ed4a2404 Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Fri, 5 Jul 2019 13:14:43 -0500
Subject: [PATCH 09/14] added removeEventListener

---
 addon/components/es-navbar/link/component.js | 33 ++++++++++++++------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index db55c963..fe18c7f8 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -28,23 +28,24 @@ export default Component.extend({
       if (this.isDropdownOpen) {
         // once it's open, let's make sure it can do some things
         schedule('afterRender', this, function() {
-          // Define startup states
-          // Dropdown list
-          let dropdownList = this.element.querySelector('.navbar-dropdown-list');
 
-          // Identify / set focus on the first item in the dropdown list automatically
-          let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
-          firstFocusable.focus();
 
-          // Need some event listeners for keyboard events
+          // move focus to the first item in the dropdown
+          let dropdownList = this.element.querySelector('.navbar-dropdown-list');
+          this.handleFirstElementFocus();
+
+          // add event listeners for keyboard events
           dropdownList.addEventListener('keydown', event => {
 
-            // Listen for ESC key to exit
+            // ESC key should close the dropdown and return focus to the toggle
             if (event.keyCode === 27 && this.isDropdownOpen) {
               this.closeDropdown();
+              this.returnFocus();
+
+            // if focus leaves the open dropdown, close it (without trying to otherwise control focus)
             } else if (this.isDropdownOpen) {
-              // if focus leaves the open dropdown, close it (without trying to otherwise control focus)
               this.handleBlur();
+
             } else {
               return;
             }
@@ -53,9 +54,19 @@ export default Component.extend({
       }
     }
   },
+
   closeDropdown() {
     // set the isDropdownOpen to false, which will make the dropdown go away
     this.set('isDropdownOpen', false);
+  },
+
+  handleFirstElementFocus() {
+    // Identify / set focus on the first item in the dropdown list automatically
+    let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
+    firstFocusable.focus();
+  },
+
+  returnFocus() {
     // after that rendering bit happens, we need to return the focus to the trigger
     schedule('afterRender', this, function() {
       let dropdownTrigger = this.element.querySelector('.navbar-list-item-dropdown-toggle');
@@ -72,6 +83,10 @@ export default Component.extend({
         this.set('isDropdownOpen', false);
       }
     });
+  },
+
+  willDestroyElement() {
+    document.removeEventListener('keydown', this.triggerDropdown);
   }
 
 });

From a69eac9ee1ab599deacebe7cfeecd355c36bec2d Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Fri, 5 Jul 2019 14:05:07 -0500
Subject: [PATCH 10/14] added a click event listener

---
 addon/components/es-navbar/link/component.js | 41 ++++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index fe18c7f8..4ff9e249 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -19,7 +19,7 @@ export default Component.extend({
     return this.isDropdownOpen ? 'true' : 'false';
   }),
 
-  navbar: service(), //TODO  also do we need this too?
+  navbar: service(),
 
   actions: {
     triggerDropdown() {
@@ -29,11 +29,16 @@ export default Component.extend({
         // once it's open, let's make sure it can do some things
         schedule('afterRender', this, function() {
 
-
           // move focus to the first item in the dropdown
           let dropdownList = this.element.querySelector('.navbar-dropdown-list');
           this.handleFirstElementFocus();
 
+          dropdownList.addEventListener('click', event =>{
+            if (this.isDropdownOpen) {
+              this.handleBlur();
+            }
+          });
+
           // add event listeners for keyboard events
           dropdownList.addEventListener('keydown', event => {
 
@@ -42,7 +47,7 @@ export default Component.extend({
               this.closeDropdown();
               this.returnFocus();
 
-            // if focus leaves the open dropdown, close it (without trying to otherwise control focus)
+            // if focus leaves the open dropdown via keypress, close it (without trying to otherwise control focus)
             } else if (this.isDropdownOpen) {
               this.handleBlur();
 
@@ -60,8 +65,21 @@ export default Component.extend({
     this.set('isDropdownOpen', false);
   },
 
+  handleBlur() {
+    next(this, function() {
+      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
+      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
+      console.log(focused);
+
+      //if the dropdown isn't focused, close it
+      if (!focused) {
+        this.closeDropdown();
+      }
+    });
+  },
+
   handleFirstElementFocus() {
-    // Identify / set focus on the first item in the dropdown list automatically
+    // Identify the first item in the dropdown list & set focus on it
     let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
     firstFocusable.focus();
   },
@@ -74,19 +92,8 @@ export default Component.extend({
     });
   },
 
-  handleBlur() {
-    next(this, function() {
-      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
-      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-
-      if (!focused) {
-        this.set('isDropdownOpen', false);
-      }
-    });
-  },
-
-  willDestroyElement() {
+  willDestroy() {
     document.removeEventListener('keydown', this.triggerDropdown);
+    document.removeEventListener('click', this.triggerDropdown);
   }
-
 });

From 03c86a553d6828326c18e4fbadfff6e532d138df Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Fri, 5 Jul 2019 14:05:41 -0500
Subject: [PATCH 11/14] added a TODO for handleBlur

---
 addon/components/es-navbar/link/component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index 4ff9e249..acd18dfb 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -65,7 +65,7 @@ export default Component.extend({
     this.set('isDropdownOpen', false);
   },
 
-  handleBlur() {
+  handleBlur() { //TODO this isn't working, figure out why
     next(this, function() {
       let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
       let focused = subItems.find(item => document.activeElement === item.querySelector('a'));

From b1cea46e2869e59531169aba7823bcc94e48f686 Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Sat, 6 Jul 2019 10:06:56 -0500
Subject: [PATCH 12/14] a little refactor

---
 addon/components/es-navbar/link/component.js | 30 +++++++++++---------
 addon/components/es-navbar/link/template.hbs |  2 +-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index acd18dfb..e5d36191 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -11,7 +11,6 @@ export default Component.extend({
   classNames: ['navbar-list-item'],
   classNameBindings: ['isDropdown:dropdown'],
   isDropdown: equal('link.type', 'dropdown'),
-
   isDropdownOpen: false,
 
   // because aria-expanded requires a string value instead of a boolean
@@ -22,24 +21,22 @@ export default Component.extend({
   navbar: service(),
 
   actions: {
-    triggerDropdown() {
+    toggleDropdown() {
       this.toggleProperty('isDropdownOpen');
-
+        
       if (this.isDropdownOpen) {
-        // once it's open, let's make sure it can do some things
+        // if it's open, let's make sure it can do some things
         schedule('afterRender', this, function() {
 
           // move focus to the first item in the dropdown
-          let dropdownList = this.element.querySelector('.navbar-dropdown-list');
           this.handleFirstElementFocus();
 
-          dropdownList.addEventListener('click', event =>{
-            if (this.isDropdownOpen) {
-              this.handleBlur();
-            }
-          });
+          // add event listeners
+          let dropdownList = this.element.querySelector('.navbar-dropdown-list');
+
+          //TODO ...for click events outside this dropdown
 
-          // add event listeners for keyboard events
+          //...for certain keypress events
           dropdownList.addEventListener('keydown', event => {
 
             // ESC key should close the dropdown and return focus to the toggle
@@ -65,11 +62,16 @@ export default Component.extend({
     this.set('isDropdownOpen', false);
   },
 
-  handleBlur() { //TODO this isn't working, figure out why
+  openDropdown() { //might not need this
+    // open the dropdown and set the focus to the first item inside
+    this.set('isDropdownOpen', true);
+    this.handleFirstElementFocus();
+  },
+
+  handleBlur() { //TODO is this working?
     next(this, function() {
       let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
       let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-      console.log(focused);
 
       //if the dropdown isn't focused, close it
       if (!focused) {
@@ -92,7 +94,7 @@ export default Component.extend({
     });
   },
 
-  willDestroy() {
+  willDestroyElement() {
     document.removeEventListener('keydown', this.triggerDropdown);
     document.removeEventListener('click', this.triggerDropdown);
   }
diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs
index 5b4f8935..66f39823 100644
--- a/addon/components/es-navbar/link/template.hbs
+++ b/addon/components/es-navbar/link/template.hbs
@@ -8,7 +8,7 @@
 {{/if}}
 {{#if (eq link.type "dropdown")}}
   <button
-    {{action "triggerDropdown"}}
+    onclick={{action "toggleDropdown"}}
     class="navbar-list-item-dropdown-toggle"
     aria-expanded={{isExpanded}}
   >

From 9c6a7536956a04298e00dfb425ade0ff8eb82f75 Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Sat, 6 Jul 2019 10:14:44 -0500
Subject: [PATCH 13/14] extracted keypress to its own function

---
 addon/components/es-navbar/link/component.js | 57 +++++++++++---------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index e5d36191..9c92aa28 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -23,35 +23,16 @@ export default Component.extend({
   actions: {
     toggleDropdown() {
       this.toggleProperty('isDropdownOpen');
-        
+
       if (this.isDropdownOpen) {
         // if it's open, let's make sure it can do some things
         schedule('afterRender', this, function() {
 
           // move focus to the first item in the dropdown
-          this.handleFirstElementFocus();
-
-          // add event listeners
-          let dropdownList = this.element.querySelector('.navbar-dropdown-list');
-
-          //TODO ...for click events outside this dropdown
-
-          //...for certain keypress events
-          dropdownList.addEventListener('keydown', event => {
-
-            // ESC key should close the dropdown and return focus to the toggle
-            if (event.keyCode === 27 && this.isDropdownOpen) {
-              this.closeDropdown();
-              this.returnFocus();
+          this.processFirstElementFocus();
+          this.processKeyPress();
 
-            // if focus leaves the open dropdown via keypress, close it (without trying to otherwise control focus)
-            } else if (this.isDropdownOpen) {
-              this.handleBlur();
 
-            } else {
-              return;
-            }
-          });
         });
       }
     }
@@ -65,10 +46,10 @@ export default Component.extend({
   openDropdown() { //might not need this
     // open the dropdown and set the focus to the first item inside
     this.set('isDropdownOpen', true);
-    this.handleFirstElementFocus();
+    this.processFirstElementFocus();
   },
 
-  handleBlur() { //TODO is this working?
+  processBlur() { //TODO is this working?
     next(this, function() {
       let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
       let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
@@ -80,12 +61,38 @@ export default Component.extend({
     });
   },
 
-  handleFirstElementFocus() {
+  processClick() {
+
+  },
+
+  processFirstElementFocus() {
     // Identify the first item in the dropdown list & set focus on it
     let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
     firstFocusable.focus();
   },
 
+  processKeyPress() {
+    // add event listeners
+    let dropdownList = this.element.querySelector('.navbar-dropdown-list');
+
+    //...for certain keypress events
+    dropdownList.addEventListener('keydown', event => {
+
+      // ESC key should close the dropdown and return focus to the toggle
+      if (event.keyCode === 27 && this.isDropdownOpen) {
+        this.closeDropdown();
+        this.returnFocus();
+
+      // if focus leaves the open dropdown via keypress, close it (without trying to otherwise control focus)
+      } else if (this.isDropdownOpen) {
+          this.processBlur();
+
+      } else {
+          return;
+      }
+    });
+  },
+
   returnFocus() {
     // after that rendering bit happens, we need to return the focus to the trigger
     schedule('afterRender', this, function() {

From 0a036c4817b01e53e43d1e45b2e02dbefae26924 Mon Sep 17 00:00:00 2001
From: Melanie Sumner <melaniersumner@gmail.com>
Date: Sat, 6 Jul 2019 12:30:22 -0500
Subject: [PATCH 14/14] added an active class for the toggle button currently
 in use

---
 addon/components/es-navbar/link/component.js | 8 +++-----
 addon/components/es-navbar/link/template.hbs | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index 9c92aa28..07bca943 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -31,8 +31,6 @@ export default Component.extend({
           // move focus to the first item in the dropdown
           this.processFirstElementFocus();
           this.processKeyPress();
-
-
         });
       }
     }
@@ -49,7 +47,7 @@ export default Component.extend({
     this.processFirstElementFocus();
   },
 
-  processBlur() { //TODO is this working?
+  processBlur() {
     next(this, function() {
       let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
       let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
@@ -62,7 +60,7 @@ export default Component.extend({
   },
 
   processClick() {
-
+    // TODO handle mouseclick outside the current dropdown
   },
 
   processFirstElementFocus() {
@@ -103,6 +101,6 @@ export default Component.extend({
 
   willDestroyElement() {
     document.removeEventListener('keydown', this.triggerDropdown);
-    document.removeEventListener('click', this.triggerDropdown);
+    // document.removeEventListener('click', this.triggerDropdown);
   }
 });
diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs
index 66f39823..ad5bcb7e 100644
--- a/addon/components/es-navbar/link/template.hbs
+++ b/addon/components/es-navbar/link/template.hbs
@@ -9,7 +9,7 @@
 {{#if (eq link.type "dropdown")}}
   <button
     onclick={{action "toggleDropdown"}}
-    class="navbar-list-item-dropdown-toggle"
+    class="navbar-list-item-dropdown-toggle {{if isDropdownOpen "active"}}"
     aria-expanded={{isExpanded}}
   >
     {{link.name}}