• Robert Knight's avatar
    Extract arrow key navigation into a reusable hook · ab16a393
    Robert Knight authored
    Extract the arrow key navigation logic from `MarkdownEditor` into a
    reusable `useArrowKeyNavigation` navigation hook. This simplifies the
    MarkdownEditor component and will allow us to enable arrow key
    navigation more widely thoughout the application.
    
    A notable design choice is that the roving tab index state lives in the DOM
    rather than in Preact. This enables the Preact component-facing API to be very
    simple: a single hook call in the component that renders the container element
    (of the toolbar, menu bar etc.). It does mean however that the `tabIndex` state
    is not accessible to components. This works for the use cases where I have
    tested it, but we may need to revisit in future.
    
    If browsers add a native feature to handle this in future [1], the hook
    could handle testing for support and using it where available.
    
     - Create `useArrowKeyNavigation` navigation hook in
       `src/shared/keyboard-navigation.js` as a general method of adding
       arrow key navigation to a composite widget
    
     - Modify `MarkdownEditor` to use the `useArrowKeyNavigation` hook to
       handle arrow key navigation
    
     - Replace detailed tests for arrow key navigation in `MarkdownEditor`
       with more basic tests, as the `useArrowKeyNavigation` tests cover the
       general functionality in detail
    
    [1] eg. https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md
    ab16a393
MarkdownEditor.js 11.8 KB