UX improvements for the expand mechanism

[piegamesde]

UX of the expand mechanism can be improved in many points:

• It's not navigable by keyboard
• The button is a lot smaller and thus harder to hit than before (Fitts' law)
• The button says "Show/Hide package details" even when searching options
• Placing the button onto the separator line is a weird choice. This makes it feel like the button is not related to one search entry, but between two. It also isn't 100% clear whether it refers to the item above or below the line.

---

From #272 (comment). Sorry @garbas, no medal for me today ^^

[garbas]

@piegamesde Do you maybe have some suggestion how would you fix the expand mechanism? Maybe a link to a site that does it better.

[piegamesde]

Did the old site do something wrong in that regard? If I remember correctly, the whole list item was a button and it worked just fine. Alternatively, I see two approaches:

1. Related to the previous way of doing it, have a toggle button on the side that expands the item down (think of Accordion menu)
2. Have a "show more"/"show less", which would be more similar to the current implementation. Important there:
   • Make the button permanently visible and accessible by keyboard
   • Move the button above the separator line

[turboMaCk]

Sorry for jumping in but I think I might be best equipt to clarify few things.

Before I do so I want to make it clear that we're glad that you've opened the issue because every data-point counts. That's being said for sake of tracking all the information I'll link few things related to the points.

It's not navigable by keyboard

This is not true. In fact the reason why the whole item is no longer clickable is to make keyboard navigation possible. See this issue: #259 . When whole item was clickable browser was unable to find any focusable element so keyboard navigation was not working. Fix to this issue than caused this issue #271 since having the keyboard focusable button element also means it's not possible to select text within the element using cursor (addressed in #275).

TL;DR issue like this are hard to resolve because different people care about different things and it's hard to keep everyone happy.

Anyway the keyboard selection does in fact work. as you can see:

All you need to do is to use tab to select the title of item you want to expand and then press enter.

The button is a lot smaller and thus harder to hit than before (Fitts' law)

you can still click on title as far as I know before there was no button at all and thing opened by clicking on item. But then it was hard to select text - see #261 (comment)

Placing the button onto the separator line is a weird choice

This was raised before as well in #261 (review) and we hope to address it soon

[garbas]

Doing some issue maintenance while I plan my work. The expand mechanism is going to be address with #286 .