Failed clicks on the chapter buttons
Sometimes when clicking on the chapter buttons the click event fails to trigger, and the user needs to click again to select/deselect the chapter.
Possible causes:
- the buttons are also draggable, which may interfere with the click event - if the mouse moves just a little bit during the click it will be interpreted as a dragging event
- the page is constantly polling for fresh data, which causes re-rendering of the components and this may make the click event fail
Possible solutions:
- make the chapter item draggable only if you click and hold on the icon with the dots to the left of the title
The chapter menu also needs some accessibility improvements:
- to enable a flexible keyboard interaction suitable for this case I think the
grid
pattern is the most appropriate. See details and examples here - the chapters container should have role="grid"; each "chapter item" should have role="row" and will contain 3 [role="gridcell"] elements: the drag handle, the chapter name, the "more actions" button
- All items in the grid have a tabindex=-1, and only the currently focused or selected item has tabindex=0
- Navigation along the grid cells should be done by arrow keys: DOWN and UP should move focus along the column, and LEFT and RIGHT should move focus within the row
- Tab or Shift+Tab moves the focus inside or outside the grid. When focus moves inside the grid, it is placed on the currently active grid cell, which would be the selected chapter. If there is no selected chapter, place the focus in the first element of the grid.
- Make sure the currently active grid cell has a visible focus indicator
- pressing "Enter" when focus is on the chapter name should select the chapter and open it in the editor
- pressing "Space" when focus is on the drag handle should make the "row" draggable; after a row is becomes draggable, arrow keys move the row up or down (this is already handled by the drag and drop library)
- pressing "Enter" or "Space" when the "more actions" button is focused should toggle the dropdown with the "delete" option
Edited by Grigor Malo