From 2c74dfd1d4e7f030425221cfc8f7e1f6819c8992 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 14 May 2022 13:11:48 +0100
Subject: [PATCH] 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.
---
 resources/js/components/dropdown.js                   | 2 +-
 resources/sass/_components.scss                       | 5 ++++-
 resources/views/entities/breadcrumb-listing.blade.php | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index e84076502..473db37d4 100644
--- 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 bce456cf2..adb2aabe0 100644
--- 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 929f56ed3..d038de077 100644
--- 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