Applied shelf book sort changes from testing

Added better labelling of sort lists for screen readers.
Fadded out sort-item action buttons until hovering for a cleaner look.

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index c86c04d33721b1d272d3290f06dad10f5572fdb3..825501364664abbcc7bddd09e666acd1c2ca0525 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -1085,6 +1085,9 @@ $btt-size: 40px;
     color: #AAA;
     cursor: grab;
   }
+  button {
+    opacity: .6;
+  }
   .handle svg {
     margin: 0;
   }
@@ -1097,6 +1100,9 @@ $btt-size: 40px;
   &:hover .handle {
     @include lightDark(color, #444, #FFF);
   }
+  &:hover button {
+    opacity: 1;
+  }
   a:hover {
     text-decoration: none;
   }

diff --git a/resources/views/shelves/parts/form.blade.php b/resources/views/shelves/parts/form.blade.php
index 4598cbacc751c97af7bb0c86426dbc44b21e30cc..ad67cb85ce80dbe73fb870d83201b8fe56bebfa5 100644 (file)
--- a/resources/views/shelves/parts/form.blade.php
+++ b/resources/views/shelves/parts/form.blade.php
@@ -12,7 +12,7 @@
 
 <div component="shelf-sort" class="grid half gap-xl">
     <div class="form-group">
-        <label for="books">{{ trans('entities.shelves_books') }}</label>
+        <label for="books" id="shelf-sort-books-label">{{ trans('entities.shelves_books') }}</label>
         <input refs="shelf-sort@input" type="hidden" name="books"
                value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
         <div class="scroll-box-header-item flex-container-row items-center py-xs">
@@ -33,16 +33,20 @@
                 </div>
             </div>
         </div>
-        <ul refs="shelf-sort@shelf-book-list" class="scroll-box">
+        <ul refs="shelf-sort@shelf-book-list"
+            aria-labelledby="shelf-sort-books-label"
+            class="scroll-box">
             @foreach (($shelf->visibleBooks ?? []) as $book)
                 @include('shelves.parts.shelf-sort-book-item', ['book' => $book])
             @endforeach
         </ul>
     </div>
     <div class="form-group">
-        <label for="books">{{ trans('entities.shelves_add_books') }}</label>
+        <label for="books" id="shelf-sort-all-books-label">{{ trans('entities.shelves_add_books') }}</label>
         <input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
-        <ul refs="shelf-sort@all-book-list" class="scroll-box">
+        <ul refs="shelf-sort@all-book-list"
+            aria-labelledby="shelf-sort-all-books-label"
+            class="scroll-box">
             @foreach ($books as $book)
                 @include('shelves.parts.shelf-sort-book-item', ['book' => $book])
             @endforeach

diff --git a/resources/views/shelves/parts/shelf-sort-book-item.blade.php b/resources/views/shelves/parts/shelf-sort-book-item.blade.php
index 25aeecdb877ccff2c1975ed89244edc7bc7d2ae3..795aee7be0e24018168f1f274a4ad4145243040a 100644 (file)
--- a/resources/views/shelves/parts/shelf-sort-book-item.blade.php
+++ b/resources/views/shelves/parts/shelf-sort-book-item.blade.php
@@ -4,7 +4,7 @@
      data-updated="{{ $book->updated_at->timestamp }}"
      class="scroll-box-item">
     <div class="handle px-s">@icon('grip')</div>
-    <a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
+    <div class="text-book">@icon('book'){{ $book->name }}</div>
     <div class="buttons flex-container-row items-center ml-auto px-xxs py-xs">
         <button type="button" data-action="move_up" class="icon-button p-xxs"
                 title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>