BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

feat: accessibility improvements

Open YousefED opened this issue 1 year ago • 1 comments

After a consultation with accessibility experts, this PR implements some important improvements in terms of accessibility:

  • Better keyboard navigation: -- the editor can be exited with "esc" -- menus (formatting toolbar, link menu, image panel) can be tabbed into with "tab", exited with "esc"
  • the suggestion menu is now a combobox / listbox aria element of the editor. The active item is marked using virtual focus (activedescendent), which should bring better support for screenreaders. (we need to test this a bit more extensively)
  • All buttons have the right aria-label attributes, toggle buttons have aria-pressed

As part of this PR, we also:

  • moved responsibility of closing menus from the plugins to Floating-UI, with the useDismiss hook
  • cleaned up some CSS
  • added stronger typescript support which enforces all props to be used (or at least destructured) when implementing a UI layer. This makes sure we get compile errors when new props are being added, but not implemented by all UI layers

YousefED avatar May 02 '24 15:05 YousefED

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview May 5, 2024 3:45pm
blocknote-website ✅ Ready (Inspect) Visit Preview May 5, 2024 3:45pm

vercel[bot] avatar May 02 '24 15:05 vercel[bot]