Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Improve Block Toolbar Semantics/Accessibility #54513

Closed
wants to merge 60 commits into from
Closed

Improve Block Toolbar Semantics/Accessibility #54513

Changes from 1 commit
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
8e521f7
Move Selected Block Tools into the header toolbar in the DOM but pres…
jeryj Aug 9, 2023
deacf25
Render selected block toolbar as a fill within a slot in the header t…
jeryj Aug 17, 2023
4ede8a7
Pass isFixed to ContextualToolbar for styling
jeryj Aug 9, 2023
45ebf2f
Add block popover to edit site header slot
jeryj Aug 17, 2023
fea3c9f
Add classname to selected block tools slot and use bubblesVirtually
jeryj Aug 17, 2023
ed8541b
Move lastFocus into redux store
jeryj Aug 25, 2023
7728101
Fix comment of getLastFocus method
jeryj Sep 14, 2023
271b0eb
Add inline rich tools to header popover
jeryj Sep 11, 2023
647ecf5
Use menubar role to group header toolbars
jeryj Sep 14, 2023
0f34d47
Add focusEditorOnEscape to NavigableToolbar to return focus to editor
jeryj Sep 14, 2023
55cbde4
Consolodate block tools into one fill component and conditionally ren…
jeryj Sep 14, 2023
6162985
Remove absolute positioned block tool hacks
jeryj Sep 19, 2023
b749291
Add selected block toolbar slot to widget header
jeryj Sep 19, 2023
1cdf89e
Allow block toolbar to scroll if not enough space
jeryj Sep 26, 2023
c15c5b1
Scroll toolbar
jeryj Sep 27, 2023
1e54077
isBlockToolsCollapsed state and styles for edit site header
jeryj Sep 27, 2023
85ac216
Block toolbar scroll on edit site header
jeryj Sep 27, 2023
a6e542e
Only allow block tool collapse to impact large viewports
jeryj Sep 27, 2023
818bdf7
Make room for top toolbar on site editor at smaller screens
jeryj Sep 27, 2023
2364439
Display fixed block toolbar at smaller screen sizes in site editor
jeryj Sep 28, 2023
7551136
Fix select mode in top toolbar
jeryj Sep 28, 2023
6c3dcdf
Add visually hidden aria-describedby instructions for how to use the …
jeryj Sep 29, 2023
ab1c29e
Fix e2e test for shift + tab to editor chrome
jeryj Sep 29, 2023
accedb5
Remove unnecessary test related to shift+tab focusing the block toolbar
jeryj Oct 2, 2023
e24d203
Replace tabbing through block test with arrow through blocks test
jeryj Oct 2, 2023
da3a1ea
Refactor keyboard navigable blocks test to match new behavior
jeryj Oct 2, 2023
484f118
Replace shift+tab with alt+F10 to focus toolbar in tests
jeryj Oct 2, 2023
6addc4f
Pass keydown listener into navigable toolbar instead of removing bubb…
jeryj Oct 3, 2023
9cd01cf
Fix test locator when multiple options buttons are in the header
jeryj Oct 3, 2023
6c80738
Fix test: return to block via escape keypress
jeryj Oct 3, 2023
6bed696
Resizeable box (for resizing cover block) should use after block popo…
jeryj Oct 3, 2023
5ddeb0b
Fix: Add setListViewToggleButton ref back into site edit header
jeryj Oct 3, 2023
6ebb4d9
Update roving toolbar test to use alt+f10 and escape
jeryj Oct 3, 2023
cc0b4dd
Fix selected block tools back compat file path
jeryj Oct 3, 2023
bcfb65b
Clarify getLastFocus description
jeryj Oct 4, 2023
e96401d
Update docs
jeryj Oct 4, 2023
f1066c4
Refactor selectors on selected block popover and empty block inserter
jeryj Oct 4, 2023
92f95f1
Refactoring of selected block tools... continued
jeryj Oct 4, 2023
e565a8a
Refactoring continued
jeryj Oct 4, 2023
b1da15c
Refactor to use useSelectedBlockToolProps
jeryj Oct 4, 2023
bf5e941
Refactor to remove data from useSelectedBlockToolProps that were not …
jeryj Oct 5, 2023
8072e7a
Remove props being overriden in BlockPopover
jeryj Oct 5, 2023
267863a
Fix incorrect block popover positioning
jeryj Oct 5, 2023
ba354bd
Hide block tools popover behind post header
jeryj Oct 5, 2023
d2167e7
Block tools should be behind site editor header
jeryj Oct 5, 2023
d23a4cf
Hide block tools behind header refactoring
jeryj Oct 5, 2023
60a8d69
Only show collapse button if hasFixedToolbar
jeryj Oct 5, 2023
bc03bd1
Fix positioning bug when center tools are collapsed
jeryj Oct 5, 2023
3788c00
Bring back the top toolbar on post editor
jeryj Oct 5, 2023
07ac3b8
Fix widgets top toolbar/block tools slide-behind-header hacks
jeryj Oct 6, 2023
fa398e1
Fixing more positioning hacks with flexbox
jeryj Oct 6, 2023
c3b650c
Add removed __unstableCoverTarget prop back to empty block popover
jeryj Oct 6, 2023
8d57813
Remove unnecessary test
jeryj Oct 6, 2023
4c662de
Handle escape on toolbar via toolbar event listener instead of children
jeryj Oct 6, 2023
0c54480
Add keyboard navigation test to cover escape and alt+10 keypresses
jeryj Oct 6, 2023
a291e1f
Added changelog for popover shiftPadding prop
jeryj Oct 6, 2023
c12381e
Switch to object notation to avoid bugs like I introduced where the o…
jeryj Oct 6, 2023
1449b4a
Fix editor canvas locator evaluation
jeryj Oct 6, 2023
9cc91d9
Show focus ring on document tools
jeryj Oct 6, 2023
3a96e02
Fix check for selectedBlockToolsRef
jeryj Oct 6, 2023
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Only show collapse button if hasFixedToolbar
  • Loading branch information
@jeryj
jeryj committed Oct 13, 2023
commit 60a8d69dc669404933ad44ff3fea7e8abc380cff
34 changes: 18 additions & 16 deletions packages/edit-site/src/components/header-edit-mode/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,22 +340,24 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
name="__experimentalSelectedBlockTools"
bubblesVirtually
/>
{ isLargeViewport && hasBlockSelected && (
<Button
className="edit-site-header-edit-mode__block-tools-toggle"
icon={ isBlockToolsCollapsed ? next : previous }
onClick={ () => {
setIsBlockToolsCollapsed(
( collapsed ) => ! collapsed
);
} }
label={
isBlockToolsCollapsed
? __( 'Show block tools' )
: __( 'Hide block tools' )
}
/>
) }
{ hasFixedToolbar &&
isLargeViewport &&
hasBlockSelected && (
<Button
className="edit-site-header-edit-mode__block-tools-toggle"
icon={ isBlockToolsCollapsed ? next : previous }
onClick={ () => {
setIsBlockToolsCollapsed(
( collapsed ) => ! collapsed
);
} }
label={
isBlockToolsCollapsed
? __( 'Show block tools' )
: __( 'Hide block tools' )
}
/>
) }
</div>
) }

Expand Down