feat(lxl-web): Improve supersearch accessibility

[johanbissemattsson]

Description

Solves

Simplifies the design and functionality of the supersearch component

Summary of changes

• Remove button for more actions on suggestions (as they caused some accessiblity issues and were unecessarily complex)
• Highlight first row ("Show all results") automatically when expanding
• Make suggestions list scrollable with max-height (fixing issue where content could be unreachable)
• Scroll to active cell on keyboard navigation
• Add action icon on focus (hopefully removing the need for the footer keyboard guide)
• Place button for showing all results above virtual keyboard on mobile Skipping this for now as missing browser support made it untenable (especially on iOS Safari where the form assistanst pushes the content up)

I still think that the suggestions on the qualifier row should be initially hidden (until the user writes something that matches one of them) but that is best saved for later...

[olovy]

I think it is unexpected / confusing that it is not possible to navigate back to the input field with the keyboard? You are stuck in the rows below. Even though it is actually "Show search results" that is selected from the start. That is some sort of double focus that feels weird?

I think the action icons might be a good idea.
But they are used in different ways?
↵ you the user should press the return key?
↖ the value of the row goes the direction of the arrow to the input field?

↵ should be → ?

[johanbissemattsson]

I think it is unexpected / confusing that it is not possible to navigate back to the input field with the keyboard? You are stuck in the rows below. Even though it is actually "Show search results" that is selected from the start. That is some sort of double focus that feels weird?

Apples Spotlight, the built-in search/address fielld in Firefox as well as the quick search in VS Code works this way so it's not unheard of. We can however also add the ability to go up to the input field even if it's the same action as show search results.

↵ you the user should press the return key?

That's the idea, but could absolutely be changed to an arrow pointing right (which also plays along with the arrow pointing to the input field)

[johanbissemattsson]

The input row is now again visually focusable (fixed in 94b57f6)

[jesperengstrom]

Nice! I think this design is clearer.
With one exception. You now have nothing to distinguish a filter from a resource (except the icon on keyboard nav). Realizing that the first thing leads to something entirely different than the others is almost impossibe?

Compared to before:

You also don't know the filter property used anymore ('författare'). Especially now since we removed it from the pills.

Vs