Made book-sort changes based on screen reader testing

- Removed having sort items in tabbing order since they have no action.
- Updated "show other books" list to add upon single selection since it
  was not clear how these were added (double press) without then seeing
the add button, and even then the add button would be after the scroll
list.

Author: ssddanbrown

resources/js/components/book-sort.js

@@ -158,7 +158,7 @@ export class BookSort extends Component {
         this.setupSortPresets();
         this.setupMoveActions();
 
-        window.$events.listen('entity-select-confirm', this.bookSelect.bind(this));
+        window.$events.listen('entity-select-change', this.bookSelect.bind(this));
     }
 
     /**
@@ -260,7 +260,10 @@ export class BookSort extends Component {
                 animation: 150,
                 fallbackOnBody: true,
                 swapThreshold: 0.65,
-                onSort: this.updateMapInput.bind(this),
+                onSort: () => {
+                    this.updateMapInput();
+                    this.updateMoveActionStateForAll();
+                },
                 dragClass: 'bg-white',
                 ghostClass: 'primary-background-light',
                 multiDrag: true,

resources/js/components/entity-selector.js

@@ -15,7 +15,6 @@ export class EntitySelector extends Component {
         this.searchInput = this.$refs.search;
         this.loading = this.$refs.loading;
         this.resultsContainer = this.$refs.results;
-        this.addButton = this.$refs.add;
 
         this.search = '';
         this.lastClick = 0;
@@ -43,15 +42,6 @@ export class EntitySelector extends Component {
             if (event.keyCode === 13) event.preventDefault();
         });
 
-        if (this.addButton) {
-            this.addButton.addEventListener('click', event => {
-                if (this.selectedItemData) {
-                    this.confirmSelection(this.selectedItemData);
-                    this.unselectAll();
-                }
-            });
-        }
-
         // Keyboard navigation
         onChildEvent(this.$el, '[data-entity-type]', 'keydown', (e, el) => {
             if (e.ctrlKey && e.code === 'Enter') {

resources/sass/styles.scss

@@ -187,13 +187,6 @@ $loadingSize: 10px;
     height: 400px;
     padding-top: $-l;
   }
-  .entity-selector-add button {
-    margin: 0;
-    display: block;
-    width: 100%;
-    border: 0;
-    border-top: 1px solid #DDD;
-  }
   &.compact {
     font-size: 10px;
     .entity-item-snippet {

resources/views/books/parts/sort-box-actions.blade.php

@@ -5,6 +5,7 @@
             title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
     <div class="dropdown-container" component="dropdown">
         <button refs="dropdown@toggle"
+                type="button"
                 title="{{ trans('common.more') }}"
                 class="icon-button p-xs text-bigger"
                 aria-haspopup="true"

resources/views/books/parts/sort-box.blade.php

@@ -26,7 +26,7 @@
                 data-name="{{ $bookChild->name }}"
                 data-created="{{ $bookChild->created_at->timestamp }}"
                 data-updated="{{ $bookChild->updated_at->timestamp }}"
-                tabindex="0">
+                tabindex="-1">
                 <div class="flex-container-row items-center">
                     <div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
                     <div class="entity-list-item px-none no-hover">
@@ -47,7 +47,7 @@
                                 data-id="{{$page->id}}" data-type="page"
                                 data-name="{{ $page->name }}" data-created="{{ $page->created_at->timestamp }}"
                                 data-updated="{{ $page->updated_at->timestamp }}"
-                                tabindex="0">
+                                tabindex="-1">
                                 <div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
                                 <div class="entity-list-item px-none no-hover">
                                     <span>@icon('page')</span>

resources/views/books/sort.blade.php

@@ -41,7 +41,7 @@
                     <h2 class="list-heading">{{ trans('entities.books_sort_show_other') }}</h2>
                     <p class="text-muted">{{ trans('entities.books_sort_show_other_desc') }}</p>
 
-                    @include('entities.selector', ['name' => 'books_list', 'selectorSize' => 'compact', 'entityTypes' => 'book', 'entityPermission' => 'update', 'showAdd' => true])
+                    @include('entities.selector', ['name' => 'books_list', 'selectorSize' => 'compact', 'entityTypes' => 'book', 'entityPermission' => 'update'])
 
                 </main>
             </div>

resources/views/entities/selector.blade.php

@@ -8,11 +8,5 @@ class="entity-selector {{$selectorSize ?? ''}}"
         <input refs="entity-selector@search" type="text" placeholder="{{ trans('common.search') }}" @if($autofocus ?? false) autofocus @endif>
         <div class="text-center loading" refs="entity-selector@loading">@include('common.loading-icon')</div>
         <div refs="entity-selector@results"></div>
-        @if($showAdd ?? false)
-            <div class="entity-selector-add">
-                <button refs="entity-selector@add" type="button"
-                        class="button outline">@icon('add'){{ trans('common.add') }}</button>
-            </div>
-        @endif
     </div>
 </div>