Introduction
When you click on a drop-down in a header menu, the first item remains highlighted even when you hover over a different option. Take the /csm portal header menu. The Case drop-down menu automatically highlights the Create Customer Case item, persisting even when hovering over other menu options.
Is there a way to fix this so the first item doesn't stay highlighted? Yes, and this article explores how to resolve this issue.
Why this is happening
The definite "highlight" is the menu item's focus styling. This styling, seen as a darker purple color, is being applied when the item is in focus. You can temporarily disable the style using the browser inspector tool to see how it works.
Here's the relevant CSS taken from the inspector:
.v3552f974845a1110f87767389929c604 .navbar-inverse .sub-navbar .dropdown-menu > li > a:focus {
background-color: #27285c;
box-shadow: unset;
}
When the drop-down menu opens, it auto-focuses the first item Create Customer Case. Even when hovering over other options, this initial focus doesn't change, hence the consistent highlighting.
A first approach?
Given all this, you might think a way to solve this problem with the first item being highlighted is to remove the focus styling altogether. But, you should not do this! Focus styling is important for accessibility. It aids users navigating with a keyboard by indicating their selected item.
Here's what the experience is like when you use the tab key on a keyboard to navigate the drop-down menu:
When you press tab for the first time when inside of the menu, it selects the second item All Cases. Continue pressing the tab key to select the remaining items in the drop-down. Without the focus styling, using the keyboard to navigate the menu becomes confusing as there's no indicator of the current selection.
The accessible approach
The proposed solution for this problem is to leave the focus styling as is to not affect keyboard functionality. Instead, change the drop-down menu's behavior. Rather than focusing on the first item when opening the drop-down, keep the focus on the drop-down itself.
This part of the link function of the Header Menu widget is the logic that focuses on the first drop-down item:
$(elem).on('click', '[data-toggle="dropdown"]', function(e) {
var $target = $(e.target);
setTimeout(function() {
$('.dropdown-menu a:visible', $target.parents('.header-menu-item')).first().focus();
}, 0);
});
Implementation steps
Now that we know what functionality we have to customize, here's what to do:
1. Clone the header widget relevant to your portal (Portal Polaris Header for /csm).
2. Add this function in the link section of the widget:
// When dropdown is clicked, remove the auto-focus of the first item and keep focus on the dropdown item
$(element).on('click', '[data-toggle="dropdown"]', function(e) {
var $target = $(e.target);
$('.dropdown-menu a:visible', $target.parents('.header-menu-item')).first().blur();
setTimeout(function() {
// desktop target is span element
if (!$target.data('toggle')) $target.parents('[data-toggle="dropdown"]').focus();
// mobile target is the a element
else $target.focus();
}, 0);
});
3. Replace the Header of your portal's theme with your cloned widget.
Expected outcome
Compared to the out-of-box header widget, this change ensures that the first item in the drop-down isn't auto-focused. Instead, the drop-down itself maintains focus, as the white outline indicates.
Here's the experience with a keyboard:
Since we haven't changed the focus styling, we're still able to tell which item we're selecting when using the tab key.
Conclusion
By customizing the header widget, this solution enhances the focus styling of drop-down menus while preserving accessibility features. Thanks for reading!
