feat: accessibility improvements #718
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components
* Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * refactor: Extract Mantine & Ariakit packages (#689) * Extracted mantine & ariakit packages * fix: ShadCN color styles button & form components (#696) * Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]>
There was a problem hiding this comment.
Looks good! While doing some manual testing I found a few behaviours that are still not quite there:
- Formatting toolbar loses tab index after pressing enter (maybe intentional?)
- Pressing escape in link creation & caption menus closes whole formatting toolbar instead of just those menus
- Pressing enter on colors drag handle menu button closes menu (mantine)
- Tabbing order in image toolbar not working (mantine, though it has some quirks in the others too)
- Tooltips don’t show up when hovering using keyboard (mantine)
- Formatting toolbar tabbing not working (ariakit)
|
|
||
| const handleMouseLeave = useCallback(() => { |
There was a problem hiding this comment.
How come we don't need this anymore?
There was a problem hiding this comment.
I've disabled this because I figured copying the ariakit combobox behavior (separate focus and hover states) would be fine.
But then I noticed for menus they don't have this behavior, so I started a conversation with the ariakit maintainer:
Perhaps bringing it back is a good idea, but let's do this as a separate PR or if more people experience this as an issue, as we're a bit limited on time atm
packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
Show resolved
Hide resolved
…ture/accessibility-improvements
…ture/accessibility-improvements
…ture/accessibility-improvements
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
After a consultation with accessibility experts, this PR implements some important improvements in terms of accessibility:
-- the editor can be exited with "esc"
-- menus (formatting toolbar, link menu, image panel) can be tabbed into with "tab", exited with "esc"
aria-labelattributes, toggle buttons havearia-pressedAs part of this PR, we also:
useDismisshookThis should be a significant improvement in terms of accessibility! However, we should also recognize this is a subject that's never "done" and continuously improve here. Next steps could include: