From d1a31edbadf2b2c84b5893cc24b0c2856fdf7201 Mon Sep 17 00:00:00 2001
From: Ava Wroten <jo@wroten.me>
Date: Wed, 4 Mar 2020 10:31:31 -0600
Subject: [PATCH] Focus follows movement

---
 .../components/sortable-group-accessible.hbs   |  1 +
 .../components/sortable-group-accessible.js    | 18 ++++++++++++++++++
 .../components/sortable-item-accessible.hbs    |  2 ++
 3 files changed, 21 insertions(+)

diff --git a/ember-ui/app/components/sortable-group-accessible.hbs b/ember-ui/app/components/sortable-group-accessible.hbs
index 2a671f7..560ad20 100644
--- a/ember-ui/app/components/sortable-group-accessible.hbs
+++ b/ember-ui/app/components/sortable-group-accessible.hbs
@@ -1,4 +1,5 @@
 <div
+  data-id={{this.uniqId}}
   {{on 'focus' this.handleFocus}}
   {{on 'blur' this.handleBlur}}
   {{key-up this.handleArrowUp key='ArrowUp'}}
diff --git a/ember-ui/app/components/sortable-group-accessible.js b/ember-ui/app/components/sortable-group-accessible.js
index 8a1b9fd..e82d09e 100644
--- a/ember-ui/app/components/sortable-group-accessible.js
+++ b/ember-ui/app/components/sortable-group-accessible.js
@@ -1,11 +1,16 @@
 import Component from '@glimmer/component';
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { next } from '@ember/runloop';
 
 export default class SortableGroupAccessibleComponent extends Component {
   @tracked selectedIndex = 0;
   @tracked groupHasFocus = false;
 
+  uniqId = uuid();
+
+  get listElement() { return document.querySelector(`[data-id="${this.uniqId}"]`); }
+
   @action
   handleFocus() { this.groupHasFocus = true; }
 
@@ -38,6 +43,10 @@ export default class SortableGroupAccessibleComponent extends Component {
     item.listOrder = index - 1;
     prevItem.listOrder = index;
     this.selectedIndex = index - 1;
+
+    next(this, function() {
+      this.listElement.querySelector('[data-action-up]').focus();
+    });
   }
 
   @action
@@ -50,7 +59,16 @@ export default class SortableGroupAccessibleComponent extends Component {
     item.listOrder = index + 1;
     nextItem.listOrder = index;
     this.selectedIndex = index + 1;
+
+    next(this, function() {
+      this.listElement.querySelector('[data-action-down]').focus();
+    });
   }
 
   preventDefault(evt) { evt.preventDefault(); }
 }
+
+// Thanks to jed https://gist.github.com/jed/982883
+function uuid(a) {
+  return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,uuid)
+}
diff --git a/ember-ui/app/components/sortable-item-accessible.hbs b/ember-ui/app/components/sortable-item-accessible.hbs
index ae5964d..15f09ef 100644
--- a/ember-ui/app/components/sortable-item-accessible.hbs
+++ b/ember-ui/app/components/sortable-item-accessible.hbs
@@ -3,12 +3,14 @@
     {{#if active}}
       <button
         {{on 'click' (fn @orderItemUp @currentIndex)}}
+        data-action-up
         role="button"
         class="text-gray-800 outline-none absolute left-0 top-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
         <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
       </button>
       <button
         {{on 'click' (fn @orderItemDown @currentIndex)}}
+        data-action-down
         role="button"
         class="transform rotate-180 text-gray-800 outline-none absolute left-0 bottom-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
         <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>