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.
This commit is contained in:
Dan Brown 2022-05-14 13:11:48 +01:00
parent e6864a9cff
commit 2c74dfd1d4
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 6 additions and 3 deletions

View File

@ -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() {

View File

@ -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) {

View File

@ -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>