search

etn-ccis / blui-react-component-library

Re-usable React components for use in Brightlayer UI applications
BSD 3-Clause "New" or "Revised" License
16 stars 10 forks source link

Drawer item is not keyboard navigat-able #713

Open huayunh opened 1 year ago

huayunh commented 1 year ago

Describe the bug / expected behavior

Although we can use the tab key to navigate around different links in docit, we cannot use the space bar to select any drawer nav item. I expect hitting the space bar to trigger the corresponding onclick event, including:

  1. open the page, and
  2. expand to reveal its children, if applicable.

What are the steps to reproduce?

  1. Go to docit
  2. open drawer
  3. use tab key to navigate to a drawer item
  4. use space bar. Notice that the item is not selectable.

Screenshots / Screen recording

The following screen recording is done using keyboard navigation only

https://user-images.githubusercontent.com/8997218/219145968-40dfaac1-e228-40c1-b236-a3dbc19621bf.mov

side note

Playing with the react dev doc, it appears that the Info List Item is not keyboard navigatable either

joebochill commented 1 year ago

This seems like it may be an issue with how we are using ListItem versus ListItemButton in the InfoListItem implementation. Refer to the MUI drawer examples where keyboard navigation is working for reference for how we may need to restructure this.