Major progress for a11y sorting

ember-ui/app/components/meal-list.hbs

@@ -1,5 +1,5 @@
 <SortableGroupAccessible
-  @models={{this.sortedItems}} as |groupHasFocus selectedIndex|>
+  @models={{this.sortedItems}} as |groupHasFocus selectedIndex orderItemDown orderItemUp|>
   <SortableGroup
     @onChange={{action this.reorderMeals}}
     as |group|>
@@ -7,7 +7,9 @@
       <SortableItemAccessible
         @groupHasFocus={{groupHasFocus}}
         @currentIndex={{index}}
-        @selectedIndex={{selectedIndex}}>
+        @selectedIndex={{selectedIndex}}
+        @orderItemDown={{orderItemDown}}
+        @orderItemUp={{orderItemUp}}>
         <SortableItem
           @model={{meal}}
           @group={{group}}

ember-ui/app/components/sortable-group-accessible.hbs

@@ -7,5 +7,5 @@
   {{key-down this.preventDefault key='ArrowDown'}}
   tabindex="0"
   class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg">
-  {{yield this.groupHasFocus this.selectedIndex}}
+  {{yield this.groupHasFocus this.selectedIndex (action 'orderItemDown') (action 'orderItemUp')}}
 </div>

ember-ui/app/components/sortable-group-accessible.js

@@ -28,5 +28,29 @@ export default class SortableGroupAccessibleComponent extends Component {
     }
   }
 
+  @action
+  async orderItemUp(index) {
+    if (index - 1 < 0) return;
+
+    let item = this.args.models.objectAt(index);
+    let prevItem = this.args.models.objectAt(index - 1);
+
+    item.listOrder = index - 1;
+    prevItem.listOrder = index;
+    this.selectedIndex = index - 1;
+  }
+
+  @action
+  async orderItemDown(index) {
+    if (index + 1 >= this.args.models.length) return;
+
+    let item = this.args.models.objectAt(index);
+    let nextItem = this.args.models.objectAt(index + 1);
+
+    item.listOrder = index + 1;
+    nextItem.listOrder = index;
+    this.selectedIndex = index + 1;
+  }
+
   preventDefault(evt) { evt.preventDefault(); }
 }

ember-ui/app/components/sortable-item-accessible.hbs

@@ -1,17 +1,19 @@
-<div
+{{#let (and @groupHasFocus (eq @currentIndex @selectedIndex)) as |active|}}
-  class='relative border border-gray-400
+  <div class='relative border border-gray-400 {{if active 'border-orange-400'}}'>
-  {{if (and @groupHasFocus (eq @currentIndex @selectedIndex)) 'border-orange-400'}}'>
+    {{#if active}}
-  {{#if (and @groupHasFocus (eq @currentIndex @selectedIndex))}}
+      <button
-    <button
+        {{on 'click' (fn @orderItemUp @currentIndex)}}
-      role="button"
+        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">
+        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>
+        <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>
-    <button
+      <button
-      role="button"
+        {{on 'click' (fn @orderItemDown @currentIndex)}}
-      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">
+        role="button"
-      <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>
+        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">
-    </button>
+        <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>
-  {{/if}}
+      </button>
-  {{yield}}
+    {{/if}}
-</div>
+    {{yield}}
+  </div>
+{{/let}}