Search bar focus - Accessibility Issue

Support
#1

I have another accessibility issue that is coming from the search bar in the header.

The impacted site has a Pro header with a search element. It has been flagged for not meeting WGAG Level AA success criterion 2.4.7: Focus Visible:

This page element is not visibly highlighted when receiving focus from a keyboard.

The default focus indicator may have been removed in CSS.

I had not added any CSS to disable focus, so I am assuming Themeco disabled in the default Integrity CSS.

Can you help highlight the relevant CSS so I can either override or add my own custom CSS to restore this function? As I understand it, I may need to also add some javascript to get the focus enabled

#2

Hello Kevin,

To visibly display the Search Input focus, you can use a custom CSS. For example;

.x-search input[type=search]:focus {
    border: solid 1px red !important;
}

image
image728×129 1.96 KB

Feel free to add your custom styling in the code above.