Skip to content

useNavigateRegions: Use closest to determine the next region to navigate to #44883

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

Merged
alexstine merged 17 commits into from
Dec 25, 2022
Merged

useNavigateRegions: Use closest to determine the next region to navigate to #44883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d1ea431
Store current region in state so region navigation remains in-order.
alexstine Oct 11, 2022
976746e
Remove constant tabindex from regions. Add back when needed. Try to f…
alexstine Oct 11, 2022
4e48751
Use closest to determine the current region since it operates in a DO…
alexstine Oct 14, 2022
00e1562
Better code comment.
alexstine Oct 14, 2022
9393dd9
Revert focus/tabindex changes.
alexstine Oct 17, 2022
75a566f
Try fixing E2E tests.
alexstine Oct 18, 2022
e63e735
Add changelog entry.
alexstine Oct 18, 2022
aa7b345
Fix edge case with selector matching regions without our negative tab…
alexstine Oct 18, 2022
02291fa
Try again to only select regions with tabindex of -1. Fix E2E.
alexstine Oct 18, 2022
faefdc3
Fix E2E.
alexstine Oct 26, 2022
7fa3fcd
Fix conflicts.
alexstine Nov 7, 2022
b5886cf
Fix conflicts.
alexstine Nov 11, 2022
311662d
Merge branch 'trunk' of github.com:wordpress/gutenberg into try/remov…
alexstine Nov 14, 2022
466ada3
Fix E2E.
alexstine Nov 14, 2022
253ecb2
Fix E2E.
alexstine Nov 16, 2022
05e3645
Refresh.
alexstine Dec 14, 2022
a3ff4a1
Fix conflict.
alexstine Dec 25, 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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
- `Navigator`: Allow calling `goTo` and `goBack` twice in one render cycle ([#46391](https://github.com/WordPress/gutenberg/pull/46391)).
- `Modal`: Fix unexpected modal closing in IME Composition ([#46453](https://github.com/WordPress/gutenberg/pull/46453)).
- `Toolbar`: Fix duplicate focus style on anchor link button ([#46759](https://github.com/WordPress/gutenberg/pull/46759)).
- `useNavigateRegions`: Ensure region navigation picks the next region based on where the current user focus is located instead of starting at the beginning ([#44883](https://github.com/WordPress/gutenberg/pull/44883)).

### Enhancements

Expand Down
7 changes: 5 additions & 2 deletions packages/components/src/higher-order/navigate-regions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,17 @@ export function useNavigateRegions( shortcuts = defaultShortcuts ) {

function focusRegion( offset ) {
const regions = Array.from(
ref.current.querySelectorAll( '[role="region"]' )
ref.current.querySelectorAll( '[role="region"][tabindex="-1"]' )
);
if ( ! regions.length ) {
return;
}
let nextRegion = regions[ 0 ];
// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
const selectedIndex = regions.indexOf(
ref.current.ownerDocument.activeElement
ref.current.ownerDocument.activeElement.closest(
'[role="region"][tabindex="-1"]'
)
);
if ( selectedIndex !== -1 ) {
let nextIndex = selectedIndex + offset;
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/specs/editor/various/a11y.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ describe( 'a11y', () => {

it( 'tabs header bar', async () => {
await pressKeyWithModifier( 'ctrl', '`' );

await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await page.keyboard.press( 'Tab' );

const isFocusedToggle = await page.$eval(
Expand Down
6 changes: 2 additions & 4 deletions packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,14 @@ describe( 'Navigating the block hierarchy', () => {

// Move focus to the sidebar area.
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await tabToColumnsControl();

// Tweak the columns count by increasing it by one.
await page.keyboard.press( 'ArrowRight' );

// Navigate to the third column in the columns block.
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrlShift', '`' );
await pressKeyWithModifier( 'ctrlShift', '`' );
await pressKeyTimes( 'Tab', 4 );
await pressKeyTimes( 'ArrowDown', 4 );
await page.waitForSelector(
Expand Down
7 changes: 7 additions & 0 deletions packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ const navigateToContentEditorTop = async () => {
// Use 'Ctrl+`' to return to the top of the editor.
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
};

const tabThroughParagraphBlock = async ( paragraphText ) => {
Expand All @@ -36,6 +39,10 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {

await page.keyboard.press( 'Tab' );
await expect( await getActiveLabel() ).toBe( 'Open document settings' );

// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
await pressKeyWithModifier( 'shift', 'Tab' );
await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
};

const tabThroughBlockToolbar = async () => {
Expand Down
2 changes: 0 additions & 2 deletions packages/e2e-tests/specs/editor/various/sidebar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,6 @@ describe( 'Sidebar', () => {

// Region navigate to Sidebar.
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );

// Tab lands at first (presumed selected) option "Post".
await page.keyboard.press( 'Tab' );
Expand Down
5 changes: 4 additions & 1 deletion test/e2e/specs/editor/various/a11y-region-navigation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ test.describe( 'Region navigation (@firefox, @webkit)', () => {
attributes: { content: 'Dummy text' },
} );

// Navigate to first region and check that we made it.
// Navigate to first region and check that we made it. Must navigate forward 4 times as initial focus is placed in post title field.
await page.keyboard.press( 'Control+`' );
await page.keyboard.press( 'Control+`' );
await page.keyboard.press( 'Control+`' );
await page.keyboard.press( 'Control+`' );
const editorTopBar = page.locator(
'role=region[name="Editor top bar"i]'
Expand Down