dgdavid/device_selector_pr_draft.md Secret

## device_selector_pr_draft.md

      
    Raw
  

              device_selector_pr_draft.md
            
          
    The device selector

We've decided to display more information for each available device to ease the process of selecting the right one when the user has plenty of them (or maybe just more than one).
Iván proposed a kind of gifted list for presenting the devices and their information to the users in a straightforward way, no matter if the system has only a few devices (or even just one) or a bunch of them. Sadly, neither the native <select> HTML element nor the PF4/Select component are suitable candidates for laying out the proposal.

  Click to show/hide the proposed selector


We could try to build a list based on a pile of  <input type="radio" />/PF4/Radio options for single selection or <input type="checkbox" />/PF4/Checkbox for multiple selections. But there could be some usability issues because of a few details we're not going to cover here (like, for example, the need to hide the input but keep the focus on its parent element) .
Another option to evaluate is the PF4/Datalist component. However, it looks like we'd need to apply too much CSS hacking to make the selector look like the proposed one.
Hence, this PR proposes the use of a simple unordered list for implementing the proposed selector but bearing in mind the Listbox pattern to make it accessible.
This very rough first version does not pretend to be perfect, especially in terms of usability since the keyboard management is not implemented becasue  we are committed to be as agile as possible. Thus, releasing the selector to be tested by sigth users seems a reasonable compromise for gathering early feedback and know whether it really suits our needs.

  Click to show/hide the WIP selector


In addition, there is a reason for not fully implementing the Listbox pattern by ourselves: the open source Adobe's react-aria library. If we do not find a better option in our current ecosystem, we can evaluate adding react-aria as a dependency to provide accessibility and behavior according to WAI-ARIA Authoring Practices.
At the time of writing there are at least two approaches to using this library:


to use the useListBox hook


to use the ListBox component (in alpha at the time of writing)


Other notes


Listbox options cannot contain interactive content. This is important because if we plan to add interactivity to the listbox items, we should use the Grid pattern instead. Nonetheless, I think we should consider carefully whether making the selector too crowded and complicated in the future is really necessary. In any case, switching from one pattern to another does not look painful.


Just in case you wonder about it, using a list of <button>s is not an option becuase they are not designed for selecting options and only allows phrasing content. Of course, we could do it thanks to JavaScript and CSS tweaks, but using elements to do things they were not intended for is definetly a bad idea.