Header element not navigable by keyboard

[LukaszJaro]

I added additional DOM elements to the code using onRender function but can't navigate to them using keyboard. Using keyboard arrows navigates thought the list item results but not the header or footer, not sure how to handle this.

Prevent tab key from closing the dropdown and that way keyboard user can navigate to the header?

<div class="additional-elements prevent-closing">
	<div class="sorting">
		<a class="sort-option is-selected" data-value="relevance" role="button" tabindex="0"><small>Relevance</small></a>
		<a class="sort-option" data-value="desc" role="button" tabindex="0"><small>Newsest</small></a>
		<a class="sort-option" data-value="asc" role="button" tabindex="0"><small>Oldest</small></a>
	</div>
	<details class="filter"><summary>Filter Date</summary></details>
</div>

Thanks again!

[tomickigrzegorz]

Unfortunately, it is not possible to navigate these footer/headers with arrows.
It was done similar to google.com ;)

P.S If you want this to work, you need to change the script behavior:

• comment this line L638
• <div class="additional-elements" tabindex="0">

This will work, but not entirely, you will have more other problems.

But good luck ;)

[LukaszJaro]

Thanks. That's unfortunate.

Looks like changing script behavior is best way. I did notice once I did that the tab key did not move to the clear button. So that is one of the issues you're probably referring to.

I think I will have to re-think the entire solution for this, thanks for your help!