diff --git a/ember-ui/app/components/meal-list.hbs b/ember-ui/app/components/meal-list.hbs
index 318c72d..78b0180 100644
--- a/ember-ui/app/components/meal-list.hbs
+++ b/ember-ui/app/components/meal-list.hbs
@@ -1,28 +1,33 @@
-<SortableGroupAccessible
-  @models={{this.sortedItems}}
-  as |groupHasFocus selectedIndex groupActions|>
-  <SortableGroup
-    @onChange={{action this.reorderMeals}}
-    as |group|>
-    {{#each this.sortedItems as |meal index|}}
-      <SortableItemAccessible
-        @groupHasFocus={{groupHasFocus}}
-        @currentIndex={{index}}
-        @selectedIndex={{selectedIndex}}
-        @orderItemDown={{groupActions.orderItemDown}}
-        @orderItemUp={{groupActions.orderItemUp}}
-        @handleBlur={{groupActions.handleBlur}}>
-        <SortableItem
-          @model={{meal}}
-          @group={{group}}
-          data-test-id="meal-item">
-          <MealItem
-            @meal={{meal}}
-            @handleFocus={{groupActions.handleFocus}}
-            @handleBlur={{groupActions.handleBlur}}
-          />
-        </SortableItem>
-      </SortableItemAccessible>
-    {{/each}}
-  </SortableGroup>
-</SortableGroupAccessible>
+{{#if this.sortedItems}}
+  <SortableGroupAccessible
+    @models={{this.sortedItems}}
+    tabindex="0"
+    class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg"
+    as |groupHasFocus selectedIndex groupActions|>
+    <SortableGroup
+      @onChange={{action this.reorderMeals}}
+      as |group|>
+      {{#each this.sortedItems as |meal index|}}
+        <SortableItemAccessible
+          @groupHasFocus={{groupHasFocus}}
+          @currentIndex={{index}}
+          @selectedIndex={{selectedIndex}}
+          @orderItemDown={{groupActions.orderItemDown}}
+          @orderItemUp={{groupActions.orderItemUp}}
+          @handleBlur={{groupActions.handleBlur}}
+          class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg">
+          <SortableItem
+            @model={{meal}}
+            @group={{group}}
+            data-test-id="meal-item">
+            <MealItem
+              @meal={{meal}}
+              @handleFocus={{groupActions.handleFocus}}
+              @handleBlur={{groupActions.handleBlur}}
+            />
+          </SortableItem>
+        </SortableItemAccessible>
+      {{/each}}
+    </SortableGroup>
+  </SortableGroupAccessible>
+{{/if}}
diff --git a/ember-ui/app/components/sortable-group-accessible.hbs b/ember-ui/app/components/sortable-group-accessible.hbs
index 0c1b74f..c2df08a 100644
--- a/ember-ui/app/components/sortable-group-accessible.hbs
+++ b/ember-ui/app/components/sortable-group-accessible.hbs
@@ -6,8 +6,7 @@
   {{key-up this.handleArrowDown key='ArrowDown'}}
   {{key-down this.preventDefault key='ArrowUp'}}
   {{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">
+  ...attributes>
   {{yield
     this.groupHasFocus
     this.selectedIndex
diff --git a/ember-ui/app/components/sortable-item-accessible.hbs b/ember-ui/app/components/sortable-item-accessible.hbs
index 1e806bc..9d4fa4d 100644
--- a/ember-ui/app/components/sortable-item-accessible.hbs
+++ b/ember-ui/app/components/sortable-item-accessible.hbs
@@ -1,5 +1,5 @@
 {{#let (and @groupHasFocus (eq @currentIndex @selectedIndex)) as |active|}}
-  <div class='border border-gray-400 {{if active 'relative border-orange-400'}}'>
+  <div class='border border-gray-400 {{if active 'relative border-orange-400'}}' ...attributes>
     {{#if active}}
       <button
         {{on 'click' (fn @orderItemUp @currentIndex)}}