search

acl-services / paprika

🌶 A robust + accessible UI component library for React applications by Galvanize.
MIT License
54 stars 9 forks source link

Listbox Browser focus rings plus other minor visual fixes #338

Open jayde-acl opened 4 years ago

jayde-acl commented 4 years ago

Bug Report

Currently, our listbox browser has a lot of "extra" focus rings that make it confusing to use and very noisy. The majority of these bugs impact this component's usability while some are visual improvements. The usability bugs are must-have and the visual bugs are nice to haves.

Please see Confluence doc for all screenshots.

Usability bugs

Both Single and Multi-select

  1. Extra container focus
  2. Auto-focus first item

Single select

  1. Don’t jump selections

Multi-select

  1. What appears to be 2 focus on elements

Visual bugs

Both Single and Multi-select

  1. Selected options background grey
  2. Back button
  3. Trashbin

Single select

  1. Hover style on >

Multi-select

  1. Hover style on >
tristanjasper commented 4 years ago

Addressed item 1 in https://github.com/acl-services/paprika/pull/344

@jayde-acl @nahumzs Had a quick discussion regarding Item 2 (and 8) with @nahumzs. I think there is some confusion regarding focus state in the ListBox component whereby currently only the container receives focus, and any listBox option has an isActive state which is not the same.

@nahumzs also brought up the point that by default perhaps we shouldn't set the first item as isActive, but perhaps we could expose an API to be able to set isActive as a solution.

I would suggest this needs more discussion at this point.

tristanjasper commented 4 years ago

Closing https://github.com/acl-services/paprika/pull/344 because of incorrect branch number. Addressed items 1, 8 and focus ring style overlap issue in https://github.com/acl-services/paprika/pull/375