Updated breadcrumb dropdown styles, improved keyboard nav

- Removed harsh theme color border between search and content.
- Prevented intermediate focus on list container to align arrow & tab
  behaviour, and to get to content quicker.

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index e8407650287162042e90b21472bbfe8e1439607c..473db37d43f666660d7276e1790a1bc47d101b20 100644 (file)
--- a/resources/js/components/dropdown.js
+++ b/resources/js/components/dropdown.js
@@ -101,7 +101,7 @@ class DropDown {
     }
 
     getFocusable() {
-        return Array.from(this.menu.querySelectorAll('[tabindex],[href],button,input:not([type=hidden])'));
+        return Array.from(this.menu.querySelectorAll('[tabindex]:not([tabindex="-1"]),[href],button,input:not([type=hidden])'));
     }
 
     focusNext() {

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index bce456cf2ce1e1b82147ae45e8f368ac83a91e83..adb2aabe092a0dd55a72686f1d61d35dd65c1850 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -767,12 +767,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
       text-decoration: none;
     }
   }
-  input {
+  input, input:focus {
     padding-inline-start: $-xl;
     border-radius: 0;
     border: 0;
     border-bottom: 1px solid #DDD;
   }
+  input:focus {
+    outline: 0;
+  }
 }
 
 @include smaller-than($m) {

diff --git a/resources/views/entities/breadcrumb-listing.blade.php b/resources/views/entities/breadcrumb-listing.blade.php
index 929f56ed3c62e53b29e6ffde41d84186be90ac0e..d038de0779596b15205fc432526c15763c7491cb 100644 (file)
--- a/resources/views/entities/breadcrumb-listing.blade.php
+++ b/resources/views/entities/breadcrumb-listing.blade.php
@@ -18,6 +18,6 @@
         <div refs="dropdown-search@loading">
             @include('common.loading-icon')
         </div>
-        <div refs="dropdown-search@listContainer" class="dropdown-search-list px-m"></div>
+        <div refs="dropdown-search@listContainer" class="dropdown-search-list px-m" tabindex="-1"></div>
     </div>
 </div>
\ No newline at end of file