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

Make inline toolbar navigable by arrow keys #43645

Merged
merged 5 commits into from
Sep 13, 2022
Merged

Make inline toolbar navigable by arrow keys #43645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a95dbec
Make inline toolbar navigable by arrow keys
apmatthews Aug 26, 2022
73200b1
Update image block test for new arrow controls
apmatthews Aug 30, 2022
fef7000
Merge branch 'WordPress:trunk' into navigable-inline-toolbar
apmatthews Sep 12, 2022
0044663
Merge branch 'WordPress:trunk' into navigable-inline-toolbar
apmatthews Sep 12, 2022
bbc11d9
Merge branch 'WordPress:trunk' into navigable-inline-toolbar
apmatthews Sep 13, 2022
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
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/rich-text/format-toolbar-container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Popover, ToolbarGroup } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import {
Expand All @@ -15,6 +16,7 @@ import {
*/
import BlockControls from '../block-controls';
import FormatToolbar from './format-toolbar';
import NavigableToolbar from '../navigable-toolbar';
import { store as blockEditorStore } from '../../store';

function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
Expand Down Expand Up @@ -42,11 +44,15 @@ function InlineToolbar( { anchorRef } ) {
className="block-editor-rich-text__inline-format-toolbar"
__unstableSlotName="block-toolbar"
>
<div className="block-editor-rich-text__inline-format-toolbar-group">
<NavigableToolbar
className="block-editor-rich-text__inline-format-toolbar-group"
/* translators: accessibility text for the inline format toolbar */
aria-label={ __( 'Format tools' ) }
>
<ToolbarGroup>
<FormatToolbar />
</ToolbarGroup>
</div>
</NavigableToolbar>
</Popover>
);
}
Expand Down
27 changes: 20 additions & 7 deletions test/e2e/specs/editor/blocks/image.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,14 +216,27 @@ test.describe( 'Image', () => {
await expect( image ).toBeVisible();
await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );

// Navigate to More,
await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
// Link,
await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
// Italic,
await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
// and finally Bold.
// Navigate to inline toolbar,
await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
await expect(
await page.evaluate( () =>
document.activeElement.getAttribute( 'aria-label' )
)
).toBe( 'Bold' );

// Bold to italic,
await page.keyboard.press( 'ArrowRight' );
// Italic to link,
await page.keyboard.press( 'ArrowRight' );
// Link to italic,
await page.keyboard.press( 'ArrowLeft' );
// Italic to bold.
await page.keyboard.press( 'ArrowLeft' );
await expect(
await page.evaluate( () =>
document.activeElement.getAttribute( 'aria-label' )
)
).toBe( 'Bold' );

await page.keyboard.press( 'Space' );
await page.keyboard.press( 'a' );
Expand Down