Skip to content

Improve search page item accessibility

Dimitris Kardarakos requested to merge dkardarakos/audiotube:search-item-actions into master

On mobile, interaction with the search page swipe list items result in a set of inconveniences:

  1. Accidentally play a track - triggered by item click- while trying to click the swipe handler, and vice versa
  2. Swipe list item actions do not offer a text description; you have to try them to see what they offer
  3. The styling of the swipe list item on mobile, in many cases, makes hard to trigger the actions
  4. When more than one pages exist in the stack, gestures for swiping an item and navigating between pages overlap

First, I experimented with the pattern that elisa mobile offers: A kebab button on each item that opens an overlay sheet. However, the inconveniences 1 and 3 still exist.

Let me suggest an alternative pattern:

  • The search results are presented as simple list items

item-no-actions

  • When the user clicks on an item, the item is expanded; a new row is displayed, displaying the actions available for this item.

item-with-actions

  • When the user clicks on an expanded item, the item's actions are hiding

item-no-actions

P.S. The sections issue is addressed in terms of the MR !13 (merged)

Merge request reports