• 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
Name
Last commit
Last update
.github Loading commit data...
bin Loading commit data...
dev-server Loading commit data...
docs Loading commit data...
embedding-examples Loading commit data...
images Loading commit data...
requirements Loading commit data...
scripts Loading commit data...
src Loading commit data...
.babelrc Loading commit data...
.dockerignore Loading commit data...
.eslintignore Loading commit data...
.eslintrc Loading commit data...
.gitignore Loading commit data...
.npmignore Loading commit data...
.npmrc Loading commit data...
.prettierignore Loading commit data...
.python-version Loading commit data...
CODE_OF_CONDUCT Loading commit data...
Dockerfile Loading commit data...
Jenkinsfile Loading commit data...
LICENSE Loading commit data...
Makefile Loading commit data...
README.md Loading commit data...
codecov.yml Loading commit data...
gulpfile.mjs Loading commit data...
package.json Loading commit data...
pyproject.toml Loading commit data...
requirements-dev.in Loading commit data...
rollup-boot.config.mjs Loading commit data...
rollup-tests.config.mjs Loading commit data...
rollup.config.mjs Loading commit data...
tailwind.config.mjs Loading commit data...
tox.ini Loading commit data...
tsconfig.json Loading commit data...
yarn.lock Loading commit data...