added some asynchrony

addon/components/navigation-narrator.js

@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import layout from '../templates/components/navigation-narrator';
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { schedule } from '@ember/runloop';
 
 export default Component.extend({
   layout,
@@ -15,28 +15,10 @@ export default Component.extend({
 
     this.router.on('routeDidChange', () => {
       this.set('fullUrl', window.location.href);
-      // here
-      document.body.querySelector('#ember-a11y-refocus-nav-message').focus();
+      // we need to put this inside of something async so we can make sure it really happens **after everything else**
+      schedule('afterRender', this, function() {
+        document.body.querySelector('#ember-a11y-refocus-nav-message').focus();
+      });
     })
-  },
-
-  // observer didn't work
-
-  // currentURLUpdated: observer('router.currentURL', function() {
-  //   let navUrl = this.router.currentURL;
-
-  //   console.log('updating!?');
-
-  //   if(this.fullUrl !== navUrl) {
-  //     this.set('fullUrl', navUrl);
-  //   }
-  // }),
-
-  currentURL: computed('router.currentURL', function() {
-    // console.log(this.router.currentURL, window.location.href);
-    let navUrl = this.router.currentURL; // ignore
-    // turns out, router.currentURL doesn't update unless it's read directly
-    // but this means I have an used var now...
-    return window.location.href;
-  })
+  }
 });

tests/dummy/app/templates/alpha.hbs

@@ -1 +1,3 @@
-{{outlet}}
+<h1>Alpha Page</h1>
+
+<p>This is the route named "alpha" in an <a href="https://emberjs.com">Ember JS</a> application.</p>