From: Dan Brown <redacted>
Date: Fri, 17 Feb 2023 16:18:24 +0000 (+0000)
Subject: Applied shelf book sort changes from testing
X-Git-Tag: v23.02~1^2~13^2
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/refs/pull/4049/head?ds=inline

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 c86c04d33..825501364 100644
--- 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 4598cbacc..ad67cb85c 100644
--- 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 25aeecdb8..795aee7be 100644
--- 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>