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.

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

Fix Block Navigation Settings Menu keyboard navigation in Navigation Menus page #22885

Merged
merged 2 commits into from
Jun 8, 2020

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Jun 4, 2020

Description

Some keyboard accessibility issues had crept into the Block Navigation in its form on the Navigation Screen.

This PR fixes an issue with the Block Navigation's Block Settings menu. Roving tab index and arrow key navigation should now work again with this component.

It also makes the relationship between TreeGridCell and the various components used in the BlockNavigation clearer by explicitly declaring the forwarded props individually rather than by spreading them as ...props.

How has this been tested?

  1. Visit the Navigation Menu screen and build a menu
  2. Tab into the Block Navigation panel and use arrow keys to move around it
  3. Expect that arrow keys should behave as though navigating within a grid
  4. Focus the Block Settings Menu toggle button in the Block Navigation
  5. Press the down arrow.
  6. Expect that the menu did not open and focus was moved to the settings menu on the next row.
  7. Press Shift + Tab
  8. Expect that focus left the Block Navigation Menu
  9. Press Tab
  10. Expect that focus moved back to the element that was last focused within Block Navigation.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@talldan talldan added [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [a11y] Keyboard & Focus labels Jun 4, 2020
@talldan talldan self-assigned this Jun 4, 2020
@talldan talldan changed the title Fix block navigation settings menu keyboard navigation Fix block navigation settings menu keyboard navigation in Navigation Menus page Jun 4, 2020
@talldan talldan changed the title Fix block navigation settings menu keyboard navigation in Navigation Menus page Fix Block Navigation Settings Menu keyboard navigation in Navigation Menus page Jun 4, 2020
@talldan talldan added the [Type] Bug An existing feature does not function as intended label Jun 4, 2020
@github-actions
Copy link

github-actions bot commented Jun 4, 2020

Size Change: +60 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-editor/index.js 106 kB +35 B (0%)
build/components/index.js 193 kB +25 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.75 kB 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-editor/style-rtl.css 11.4 kB 0 B
build/block-editor/style.css 11.4 kB 0 B
build/block-library/editor-rtl.css 7.87 kB 0 B
build/block-library/editor.css 7.88 kB 0 B
build/block-library/index.js 126 kB 0 B
build/block-library/style-rtl.css 7.69 kB 0 B
build/block-library/style.css 7.68 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/style-rtl.css 19.5 kB 0 B
build/components/style.css 19.5 kB 0 B
build/compose/index.js 9.33 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/index.js 8.25 kB 0 B
build/edit-navigation/style-rtl.css 878 B 0 B
build/edit-navigation/style.css 876 B 0 B
build/edit-post/index.js 302 kB 0 B
build/edit-post/style-rtl.css 5.43 kB 0 B
build/edit-post/style.css 5.43 kB 0 B
build/edit-site/index.js 15 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/index.js 8.83 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.7 kB 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.3 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Contributor

@adamziel adamziel left a comment

Choose a reason for hiding this comment

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

@talldan works as expected, thank you!

@adamziel adamziel merged commit 8521063 into master Jun 8, 2020
@adamziel adamziel deleted the fix/block-navigation-settings-menu-keyboard-nav branch June 8, 2020 08:51
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone Jun 8, 2020
@priethor priethor added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants