]> BookStack Code Mirror - bookstack/commitdiff
Made book-sort changes based on screen reader testing
authorDan Brown <redacted>
Fri, 27 Jan 2023 17:06:39 +0000 (17:06 +0000)
committerDan Brown <redacted>
Fri, 27 Jan 2023 17:06:39 +0000 (17:06 +0000)
- 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.

resources/js/components/book-sort.js
resources/js/components/entity-selector.js
resources/sass/styles.scss
resources/views/books/parts/sort-box-actions.blade.php
resources/views/books/parts/sort-box.blade.php
resources/views/books/sort.blade.php
resources/views/entities/selector.blade.php

index e8ecd49a4892c84ecc528e3ba01a38ed780a9396..6e56e43a52315e691cbff2757b9817b09e8848a5 100644 (file)
@@ -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,
index 1384b33a9660c086882fd768054bf1c4eed73e21..09d14b23383075d015a9c846679de9b6641bf188 100644 (file)
@@ -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') {
index 398d16fac3afe34ef75bf5348764f7dac0f399a2..e50a2f96a20dc755a51013ffdacaad302d1f42a5 100644 (file)
@@ -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 {
index cd5a59e15cac8b7454045ec7094d2f6063dec8f1..3796ffafb8dcb999dac12ef8291f3866c168e66c 100644 (file)
@@ -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"
index ca034a880deb32ab4c7718e8910a4c5159682942..03998e261781bd7db46d9ba427963c93bd721a54 100644 (file)
@@ -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>
index b778398a83136b82e634d9a07f113bb5e8edca74..c82ad4e3b1e7f7cec7f2ffdbcecd9e7b6b49ea23 100644 (file)
@@ -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>
index 45fae470795bf1c375ee587a27ddd7d6c143061a..a9f5b932cc2358b692a78e10a7165d9f9040bd3c 100644 (file)
@@ -8,11 +8,5 @@
         <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>
\ No newline at end of file