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

Add close button to the Inserter to improve keyboard a11y #47327

Closed
wants to merge 1 commit into from
Closed

Add close button to the Inserter to improve keyboard a11y #47327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 45 additions & 27 deletions packages/block-editor/src/components/inserter/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,40 +149,58 @@ class Inserter extends Component {

if ( isQuick ) {
return (
<QuickInserter
onSelect={ ( blocks ) => {
const firstBlock =
Array.isArray( blocks ) && blocks?.length
? blocks[ 0 ]
: blocks;
if (
onSelectOrClose &&
typeof onSelectOrClose === 'function'
) {
onSelectOrClose( firstBlock );
}
<>
<QuickInserter
onSelect={ ( blocks ) => {
const firstBlock =
Array.isArray( blocks ) && blocks?.length
? blocks[ 0 ]
: blocks;
if (
onSelectOrClose &&
typeof onSelectOrClose === 'function'
) {
onSelectOrClose( firstBlock );
}
onClose();
} }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
prioritizePatterns={ prioritizePatterns }
selectBlockOnInsert={ selectBlockOnInsert }
/>
<Button
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getdave Do you think you can move this button to appear in the DOM right above the search input? Other than that, this works amazing!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at this but the problem is that the Close button becomes the first focusable element and thus is auto-focused when the inserter opens. This provides poor UX for visual users so we'll need to figure out an alternative visual display for this close UI.

@SaxonF I wonder if you have any thoughts on using a X close icon on these popovers which we could use consistently across all popovers? Something universal would be better than adding them to all UIs individually.

variant="secondary"
className="block-editor-inserter__close"
onClick={ onClose }
>
{ __( 'Close' ) }
</Button>
</>
);
}

return (
<>
<InserterMenu
onSelect={ () => {
onClose();
} }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
showInserterHelpPanel={ showInserterHelpPanel }
prioritizePatterns={ prioritizePatterns }
selectBlockOnInsert={ selectBlockOnInsert }
/>
);
}

return (
<InserterMenu
onSelect={ () => {
onClose();
} }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
showInserterHelpPanel={ showInserterHelpPanel }
prioritizePatterns={ prioritizePatterns }
/>
<Button
variant="secondary"
className="block-editor-inserter__close"
onClick={ onClose }
>
{ __( 'Close' ) }
</Button>
</>
);
}

Expand Down
18 changes: 18 additions & 0 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -639,3 +639,21 @@ $block-inserter-tabs-height: 44px;
height: 100%;
}
}

.block-editor-inserter__close.block-editor-inserter__close {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing to add to the other ongoing conversation , but I was thinking that it may be good to add a little inline comment here to explain that these styles are meant to visually hide the button (while keeping accessible to assistive technology) unless the button itself is focused.

position: absolute;
top: -999em;
display: block;
background: $white;
width: 100%;
height: ($button-size + $grid-unit-10);
border-radius: 0;

&:focus,
&:focus-within {
top: auto;
bottom: 0;
}

}