Improve Block Toolbar Semantics/Accessibility #54513

…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

…oolbar

If we 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.

…der into slot or within block editor

Move isCollapsed state from the block-contextual-toolbar into the site editor header, as it is only needed and related to the site editor header. This is not a state the block toolbar needs to know about. Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

If the block toolbar was collapsed in the large viewport, then the viewport is resized to be small enough that the toolbar should move to underneath the header, the toolbar would be in the collapsed state so it would not show.

…block toolbar

…lesVirtually from the toolbar group slot Removing bubblesVirtually from the toolbar group slot prevents any dynamically added toolbar buttons from firing their click event. This can be seen when cropping an image, you press Crop, then the Apply and Cancel buttons get added to the toolbar. Those button events don’t fire properly and is mentioned as an issue in the bubblesVirtually slot fill PR: #19242

…ver slot The block-popover slot is reserved for block-toolbar like popovers, such as the captions popover, and will appear in the header dom. Popovers that don't need to be in the head should use the __unstable-block-tools-after slot

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

…used by the empty block inserter

This is a tricky one. To hide the popover behind the header when it's within the header DOM means we need to have something within the header with a higher z-index for the popover to hide behind. Everything else in the header needs a high z index to be be on top of the header.

Adding position absolute to all instances of __background-style lets it be excluded from all flexbox calculations, which is what we want. If the div is empty, it still gets calculated and pushes elements around.

This test was already covered well by 'ensures base block toolbars use roving tabindex'

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. Also, this is better than attaching it to all of the children in the block toolbar because when new items are attached to the toolbar (such as via the bubblesVirtually slots or the apply/cancel buttons when cropping an image) we can still catch the events. Otherwise, those buttons are added after the mount, and the children don't receive the listener.

…rder of the params matters

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Block Toolbar Semantics/Accessibility #54513

Improve Block Toolbar Semantics/Accessibility #54513

Commits on Oct 13, 2023