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

Enter editing mode via Enter or Spacebar #58795

Merged
merged 12 commits into from
Feb 15, 2024
Merged

Conversation

jeryj
Copy link
Contributor

@jeryj jeryj commented Feb 7, 2024

What?

Allow entering into edit mode with keyboard enter/spacebar press on the site editor frame in view mode.

Why?

There was a regression in being able to enter editing mode via keydown on the site editor due to the onKeydown event being blocked.

How?

This allows an onKeydown prop to be fired if passed to the iframe. I'm not positive this is the best way.

I also added a test to check for this as well as general keyboard navigation of the site editor in view mode.

Testing Instructions

  • Go to the site editor
  • Use the keyboard to move focus to the site editor
  • Focus ring should be present on iframe
  • Press Enter/Spacebard
  • Should be in editing mode

@jeryj jeryj self-assigned this Feb 7, 2024
Copy link

github-actions bot commented Feb 7, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jeryj jeryj added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Regression Related to a regression in the latest release labels Feb 7, 2024
Copy link

github-actions bot commented Feb 7, 2024

Size Change: -1.54 kB (0%)

Total Size: 1.71 MB

Filename Size Change
build/block-editor/index.min.js 251 kB -134 B (0%)
build/block-editor/style-rtl.css 15.3 kB -55 B (0%)
build/block-editor/style.css 15.3 kB -53 B (0%)
build/block-library/index.min.js 216 kB -70 B (0%)
build/blocks/index.min.js 51.6 kB -169 B (0%)
build/components/index.min.js 226 kB -239 B (0%)
build/core-data/index.min.js 72.8 kB +62 B (0%)
build/edit-post/index.min.js 24.2 kB -1.01 kB (-4%)
build/edit-post/style-rtl.css 5.64 kB +11 B (0%)
build/edit-post/style.css 5.63 kB +10 B (0%)
build/edit-site/index.min.js 211 kB -326 B (0%)
build/edit-site/style-rtl.css 15.3 kB -486 B (-3%)
build/edit-site/style.css 15.4 kB -484 B (-3%)
build/edit-widgets/index.min.js 17.3 kB +3 B (0%)
build/edit-widgets/style-rtl.css 4.22 kB +9 B (0%)
build/edit-widgets/style.css 4.22 kB +8 B (0%)
build/editor/index.min.js 63.2 kB +1.36 kB (+2%)
build/patterns/index.min.js 5.79 kB +45 B (+1%)
build/preferences-persistence/index.min.js 2.05 kB -18 B (-1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.22 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.35 kB
build/block-editor/content.css 4.35 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.69 kB
build/block-library/blocks/cover/style.css 1.68 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 863 B
build/block-library/blocks/image/editor.css 862 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.25 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.24 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 614 B
build/block-library/blocks/search/style.css 614 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 229 B
build/block-library/blocks/separator/style.css 229 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.32 kB
build/customize-widgets/style.css 1.32 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.93 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/editor/style-rtl.css 5.43 kB
build/editor/style.css 5.43 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.89 kB
build/format-library/style-rtl.css 478 B
build/format-library/style.css 477 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 12.7 kB
build/interactivity/navigation.min.js 1.24 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.29 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/style-rtl.css 540 B
build/patterns/style.css 539 B
build/plugins/index.min.js 1.8 kB
build/preferences/index.min.js 2.82 kB
build/preferences/style-rtl.css 698 B
build/preferences/style.css 700 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.08 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

await admin.visitSiteEditor();

// Navigate to the iframe
await pageUtils.pressKeys( 'Tab', { times: 3 } );
Copy link
Contributor

Choose a reason for hiding this comment

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

This feels quite fragile. Is there a way to focus the iframe directly without relying on the number of tab presses?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is correct because we should be aware we introduced a new tab stop?

*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Site editor navigation', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

This test feels quite big and I worry that it's going to need a lot of work to maintain it as the editor continues to evolve. I think it would be better if we could find a way to just test the spacebar press on its own.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

This is great, I think we should split the test into a few smaller ones because the big one ... is too big 😄

await requestUtils.activateTheme( 'twentytwentyone' );
} );

test( 'Can use keyboard to navigate the site editor', async ( {
Copy link
Contributor

Choose a reason for hiding this comment

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

'Can use keyboard to navigate the site editor sounds like the whole battery of tests instead of a single test - and looking at the many expectations it's kinda true.

await admin.visitSiteEditor();

// Navigate to the iframe
await pageUtils.pressKeys( 'Tab', { times: 3 } );
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is correct because we should be aware we introduced a new tab stop?

@jeryj
Copy link
Contributor Author

jeryj commented Feb 9, 2024 via email

@scruffian
Copy link
Contributor

On the other hand, maybe it’s a UX issue that we require 9 tab stops to return to the previous view.

Yeah I feel like maybe we need a keyboard shortcut that switches between views?

@t-hamano
Copy link
Contributor

What do you think about limiting the key that triggers edit mode to only the Enter key?

In common browsers, the spacebar is used to scroll pages. If you have a mouse, you can operate the mouse wheel on the canvas to see the entire canvas without entering edit mode. If we use the spacebar as a trigger key, users who only use the keyboard won't be able to do the same thing.

@alexstine
Copy link
Contributor

alexstine commented Feb 10, 2024

@t-hamano

What do you think about limiting the key that triggers edit mode to only the Enter key?

If the element trigger is a button, enter/space keys should activate it.

Thanks.

EDIT: At mention wrong person.

@t-hamano
Copy link
Contributor

If the element trigger is a button, enter/space keys should activate it.

This iframe has role="button" applied. However, when I tested it with NVDA, it seems that when I focus on this iframe, it simply reads "section".

@jeryj jeryj removed the [Type] Bug An existing feature does not function as intended label Feb 12, 2024
There was a regression in being able to enter editing mode via keydown on the site editor due to the onKeydown event being blocked. This allows an onKeydown prop to be fired if passed to the iframe. I'm not positive this is the best way.

I also added a test to check for this as well as general keyboard navigation of the site editor in view mode.
@jeryj
Copy link
Contributor Author

jeryj commented Feb 12, 2024

This is a pretty big regression, so we should sort it out soon. l'm looking at the failing tests. Does anyone have thoughts on the fix here?

@jeryj jeryj force-pushed the fix/keydown-on-site-iframe branch from bf1b6fe to 030b6ea Compare February 12, 2024 16:02
@jeryj
Copy link
Contributor Author

jeryj commented Feb 12, 2024

Tests are passing locally after rebasing, so I'm force pushing to see if the tests will pass.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

The changes regarding onKeydown seem to make sense to me, but the e2e tests seem a bit redundant to me as they try to cover many scenarios in one test.

For example, how about dividing the test by scenario and clarifying what to expect, as shown below.

test.beforeEach( async ( { admin } ) => {
	await admin.visitSiteEditor();
} );

test.describe( 'Site editor keyboard navigation', () => {
	test( 'should open command palette via button press', async ( {} ) => {} );
	// test( 'should open command palette via keyboard shortcut', async ( {} ) => {} );
	// test( 'should not lose focus when switching screens', async ( {} ) => {} );
	test( 'should enter into editing mode via button press', async ( {} ) => {} );
	test( 'should not lose focus when returning to view mode', async ( {} ) => {} );
} );

However, I think the following scenario is unnecessary.

should open command palette via keyboard shortcut

What we're hoping for this time is not whether the keyboard shortcuts will work correctly, but whether the tab stops will work as expected.

should not lose focus when switching screens

I believe this is covered in the Navigator component's unit test.

@jeryj
Copy link
Contributor Author

jeryj commented Feb 13, 2024

My philosophy on e2e tests is that they should be a more realistic test of how the app is used. Also, having one large test with multiple steps is faster due to not needing to run the admin page setup each time (5s vs 10s). It is also more likely to catch odd edge cases this way.

For example, you might be able to click the pages navigation item, have focus on the back button, then press it and return to the page. But, does everything work in tandem? Can you do multiple steps and not lose focus along the way? Sometimes things have unintended side effects, and I think e2e tests are great for catching this.

So, while this is a big test, everything here should work. My main concern is that the test will give false negatives if the amount of tab stops changes. I don't want to test the amount of tab stops between the items. I want to test that you can navigate the site editor with the keyboard without losing focus, and splitting this longer test into more tests will give me less confidence that I can do that.

I will update the e2e test though to be clearer about what is being tested in each step, but leave them within one larger test. This is a pretty common pattern in our e2e testing, such as in the navigation block frontend interactivity tests.

I believe this is covered in the Navigator component's unit test.

I think that test is a more isolated example, not testing within the site editor.

@jeryj
Copy link
Contributor Author

jeryj commented Feb 13, 2024

I made several changes to the e2e tests based on feedback:

  • Removed the command palette tests
  • Labelled each test section more clearly. It is still within one test item, but each one has its own test comment to encapsulate what it is doing more clearly.
  • Moved the "long distance tabbing" by a specific number to a for loop with a limit so we aren't testing for number of tab stops, but if we can tab to the item.

Copy link

github-actions bot commented Feb 13, 2024

Flaky tests detected in fea790d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7917697844
📝 Reported issues:

@t-hamano t-hamano self-requested a review February 14, 2024 02:36
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Does anyone have thoughts on the fix here?

This fix should make sense. Originally, Iframe components received most props as is, including onKeyDown.

However, #54565 appears to have overridden the onKeyDown prop.

cc @ellatrix

test/e2e/specs/site-editor/navigation.spec.js Outdated Show resolved Hide resolved
test/e2e/specs/site-editor/navigation.spec.js Outdated Show resolved Hide resolved
jeryj and others added 3 commits February 14, 2024 09:36
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM ! I left a little comment at the end.

test/e2e/specs/site-editor/navigation.spec.js Outdated Show resolved Hide resolved
test/e2e/specs/site-editor/navigation.spec.js Outdated Show resolved Hide resolved
test/e2e/specs/site-editor/navigation.spec.js Outdated Show resolved Hide resolved
jeryj and others added 3 commits February 15, 2024 08:43
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
@jeryj
Copy link
Contributor Author

jeryj commented Feb 15, 2024

Thanks @t-hamano! I updated based on your excellent feedback.

@jeryj jeryj added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 15, 2024
@jeryj jeryj merged commit b074ef1 into trunk Feb 15, 2024
59 checks passed
@jeryj jeryj deleted the fix/keydown-on-site-iframe branch February 15, 2024 15:56
@github-actions github-actions bot added this to the Gutenberg 17.8 milestone Feb 15, 2024
@youknowriad
Copy link
Contributor

Friendly reminder about the props bot ;)

aristath added a commit that referenced this pull request Feb 16, 2024
* trunk: (78 commits)
  Components: Use `Element.scrollIntoView()` instead of `dom-scroll-into-view` (#59085)
  DataViews: Correctly display featured image that don't have image sizes (#59111)
  Elements: Fix block instance element styles for links applying to buttons (#59114)
  Allow editing of image block alt and title attributes in content only mode (#58998)
  Add toggle for grid types and stabilise Grid block variation. (#59051)
  Global Styles: fix console error in block preview (#59112)
  Navigation: Avoid using embedded records from fallback API (#59076)
  Refactor responsive logic for grid column spans. (#59057)
  Editor: Unify Mode Switcher component between post and site editor (#59100)
  Move StopEditingAsBlocksOnOutsideSelect to Root (#58412)
  Fix logic error in #58951 (#59101)
  Block-editor: Auto-register block commands (#59079)
  Fix small typo in rich text reference guide (#59089)
  Components: Add lint rules for theme color CSS var usage (#59022)
  Enter editing mode via Enter or Spacebar (#58795)
  Updating Storybook to v7.6.15 (latest) (#59074)
  CustomSelectControl (v1 & v2): Fix errors in unit test setup (#59038)
  Add stylelint rule to prevent theme CSS vars outside of wp-components (#59020)
  ColorPicker: Style without accessing InputControl internals (#59069)
  Pattern block: batch replacing actions (#59075)
  ...
getdave pushed a commit that referenced this pull request Feb 20, 2024
There was a regression in being able to enter editing mode via keydown on the site editor due to the onKeydown event being blocked. This allows an onKeydown prop to be fired if passed to the iframe.

Also added a test to check for this as well as general keyboard navigation of the site editor in view mode.

---------
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>
@getdave
Copy link
Contributor

getdave commented Feb 20, 2024

I just cherry-picked this PR to the cherry-pick-beta-2 branch to get it included in the next release: 6e5a64f

@getdave getdave removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 20, 2024
youknowriad pushed a commit that referenced this pull request Feb 20, 2024
There was a regression in being able to enter editing mode via keydown on the site editor due to the onKeydown event being blocked. This allows an onKeydown prop to be fired if passed to the iframe.

Also added a test to check for this as well as general keyboard navigation of the site editor in view mode.

---------
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>
// If the event originates from inside the iframe, it means
// it bubbled through the portal, but only with React
// events. We need to to bubble native events as well,
// though by doing so we also trigger another React event,
// so we need to stop the propagation of this event to avoid
// duplication.
if (
else if (
Copy link
Member

Choose a reason for hiding this comment

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

This doesn't make any sense. When you have multiple keydown handlers, all of them should execute

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The only time the if statement above it runs is when a keydown listener is passed to the iframe, which is only in the view mode of the site editor. The shortcuts shouldn't be enabled at that point since we're not within the editor.

Copy link
Member

Choose a reason for hiding this comment

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

Ok, but that's not clear from reading this. Also there might be other iframe instances that pass onKeydown and do want shortcuts disabled. Using onKeydown to disable/enable shortcuts seems a bit strange, imo that should be done through a separate prop. Maybe reuse isPreviewMode?

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'm not sure how all of that should be structured. The only thing important to me in this PR was fixing a bug where you couldn't use the keyboard to enter into Edit mode from View mode. This onKeydown was not allowed to run.

Very open to fixing this another way. I wasn't sold on this solution.

Copy link
Member

Choose a reason for hiding this comment

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

No, this is fine, all I'm saying is that the else shouldn't have been added?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh - That's fine with me: #59474

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Regression Related to a regression in the latest release
Projects
Development

Successfully merging this pull request may close these issues.

8 participants