-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Proof of Concept: Improve Block Toolbar Semantics/Accessibility #53779
Commits on Sep 6, 2023
-
Move Selected Block Tools into the header toolbar in the DOM but pres…
…erve all visual interactions This is a big commit with a large potential for bugs. Think of this as a spike or POC for now. There'll be a lot to address. Some general TODOs: - [ ] Refactor shared code between empty-block-inserter and selected-block-tools - [ ] More explicitly pass the popover slot and content ref into the SelectedBlockTools - [ ] Shortcut/keystrokes for returning from the toolbar to where the cursor was before moving into the toolbar - [ ] Inline Tools either move to the top toolbar or get inserted into the main block toolbar (think image caption formatting tools) - [ ] Visual styles for the top toolbar
Configuration menu - View commit details
-
Copy full SHA for 5d7bda7 - Browse repository at this point
Copy the full SHA 5d7bda7View commit details -
Configuration menu - View commit details
-
Copy full SHA for c593e05 - Browse repository at this point
Copy the full SHA c593e05View commit details -
Configuration menu - View commit details
-
Copy full SHA for 4e0c909 - Browse repository at this point
Copy the full SHA 4e0c909View commit details -
Configuration menu - View commit details
-
Copy full SHA for 53df7d3 - Browse repository at this point
Copy the full SHA 53df7d3View commit details -
Configuration menu - View commit details
-
Copy full SHA for f0da0e8 - Browse repository at this point
Copy the full SHA f0da0e8View commit details -
Configuration menu - View commit details
-
Copy full SHA for 9fc803c - Browse repository at this point
Copy the full SHA 9fc803cView commit details -
Configuration menu - View commit details
-
Copy full SHA for 5257349 - Browse repository at this point
Copy the full SHA 5257349View commit details -
Configuration menu - View commit details
-
Copy full SHA for 9bd48f9 - Browse repository at this point
Copy the full SHA 9bd48f9View commit details -
Configuration menu - View commit details
-
Copy full SHA for 7fc9bb1 - Browse repository at this point
Copy the full SHA 7fc9bb1View commit details -
Configuration menu - View commit details
-
Copy full SHA for 96b184b - Browse repository at this point
Copy the full SHA 96b184bView commit details -
Configuration menu - View commit details
-
Copy full SHA for fd31f65 - Browse repository at this point
Copy the full SHA fd31f65View commit details -
Register global shortcut for moving focus back to the last focused bl…
…ock. Still more todo. This shouldn't go to the last focused block but the last _selection_ which will be a bit more work. Probably best to refactor how it works within use-tab-nav. Maybe turn it into a hook or something that can have centralized logic.
Configuration menu - View commit details
-
Copy full SHA for c3c76b9 - Browse repository at this point
Copy the full SHA c3c76b9View commit details -
Start on escape to return to block selection
It's not working for buttons that contain dropdowns, such as the align or options buttons. The dropdown toggle is intercepting the escape keypress and not letting it bubble.
Configuration menu - View commit details
-
Copy full SHA for e747b88 - Browse repository at this point
Copy the full SHA e747b88View commit details -
Configuration menu - View commit details
-
Copy full SHA for 3b696bc - Browse repository at this point
Copy the full SHA 3b696bcView commit details -
Configuration menu - View commit details
-
Copy full SHA for 732fabb - Browse repository at this point
Copy the full SHA 732fabbView commit details -
Handle Escape on Toolbar Option 1: Add event listeners to all childre…
…n via onChildrenKeyDown passed to NavigableToolbar Note: Due to the use of portals in the toolbar slots, consistently handling event listeners cleanly is difficult. This method adds event listeners to all children of a toolbar if a `onChildrenKeyDown` prop is passed to the <NavigableToolbar /> via a querySelectorAll( '[data-toolbar-item="true"]' ) on the NavigableToolbar ref, then applying an addEventListener to all the returned buttons. Pros: Event listener is applied and handled in one location. Cons: Feels yucky. Feels like crossing our fingers and hoping it works consistently, which it might.
Configuration menu - View commit details
-
Copy full SHA for 9acb93d - Browse repository at this point
Copy the full SHA 9acb93dView commit details -
Handle Escape on Toolbar Option 2: Use addEventListener on the select…
…edblock toolbar, attached to the NavigableToolbar This method requires forwarding a ref from the editor level down to the navigable toolbar so that the escape unselect shortcut can be blocked and the navigable toolbar event listener will still fire. Blocking the global escape event shouldn't be necessary, but we have a combination of a few things all combining to create a situation where: - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element. - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.
Configuration menu - View commit details
-
Copy full SHA for b5f5248 - Browse repository at this point
Copy the full SHA b5f5248View commit details -
Handle Escape on Toolbar Option 3: Remove bubblesVirtually from block…
…-controls slot If remove the bubblesVirtually from the block-controls slot, then the event will bubble in the DOM as normal (instead of the React Tree only since bubblesVirtually uses createPortal for the fills). This means we could handle the event without any forwardRefs as we don't need to block the escape shortcut keypress event from the React Tree. However, we assume bubblesVirtually was made for a reason. So, we're unsure if something would break.
Configuration menu - View commit details
-
Copy full SHA for 401cf4c - Browse repository at this point
Copy the full SHA 401cf4cView commit details -
Configuration menu - View commit details
-
Copy full SHA for 25a79f2 - Browse repository at this point
Copy the full SHA 25a79f2View commit details
Commits on Sep 11, 2023
-
Configuration menu - View commit details
-
Copy full SHA for 384e717 - Browse repository at this point
Copy the full SHA 384e717View commit details -
Configuration menu - View commit details
-
Copy full SHA for 399afc6 - Browse repository at this point
Copy the full SHA 399afc6View commit details -
Configuration menu - View commit details
-
Copy full SHA for 051fd41 - Browse repository at this point
Copy the full SHA 051fd41View commit details -
Configuration menu - View commit details
-
Copy full SHA for 44851dd - Browse repository at this point
Copy the full SHA 44851ddView commit details
Commits on Sep 12, 2023
-
Configuration menu - View commit details
-
Copy full SHA for 5fc387c - Browse repository at this point
Copy the full SHA 5fc387cView commit details -
Add focusEditorOnEscape to NavigableToolbar to return focus to editor…
… by default on escape keypress Not committed to this, but it does work since we've removed bubblesVirtually from the toolbar slots and the inline rich editor doesn't use slots for its tools. I like that this brings this behavior by default to the toolbars, but unsure about if it's a good idea overall.
Configuration menu - View commit details
-
Copy full SHA for a9b0710 - Browse repository at this point
Copy the full SHA a9b0710View commit details