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

Navigation block: Set correct aria-expanded on hover #50953

Merged
merged 8 commits into from
May 30, 2023

Conversation

luisherranz
Copy link
Member

@luisherranz luisherranz commented May 25, 2023

What?

It sets the correct aria-expanded for the button of the submenus when the mouse is over it.

Why?

Because previously it was only working for the keyboard, but as stated by @jeryj in Slack, some users may use both a screen reader and a mouse.

How?

I added mouseover and mouseout directives to the <li> element.

I also created a new context property called isHovering to indicate that the mouse is over the submenu (li element), because in that case, the isMenuOpen property should not turn false if the user clicks the button, uses the keyboard, or moves the focus away.

Testing Instructions

You can use WordPress Playground to test this out: https://playground.wordpress.net/?gutenberg-pr=50953

  1. Turn on your screen reader of choice
  2. Enable the "Core blocks" experiment
  3. Have a navigation with a submenu
  4. Go to the frontend of the site
  5. Use the mouse to hover over the submenu
  6. The state of expanded should be announced
  7. Move the mouse away from the submenu
  8. The state of collapsed should be announced
  9. Move again the focus to the submenu button
  10. Use the mouse to hover over the submenu
  11. The state of expanded should be announced
  12. Hit enter to "toggle the menu", the state of expanded should remain (because the mouse is hovering and prevents it from closing)
  13. Move the tab away from the submenu, the state of expanded should remain (because the mouse is hovering and prevents it from closing)
  14. Move the mouse away
  15. The state of collapsed should be announced

Screenshots or screencast

hlAcWl.mp4

@luisherranz luisherranz added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Block] Navigation Affects the Navigation Block [Feature] Interactivity API API to add frontend interactivity to blocks. labels May 25, 2023
@luisherranz luisherranz self-assigned this May 25, 2023
@luisherranz luisherranz added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label May 25, 2023
@github-actions
Copy link

github-actions bot commented May 25, 2023

Size Change: -17.9 kB (-1%)

Total Size: 1.39 MB

Filename Size Change
build/a11y/index.min.js 955 B -27 B (-3%)
build/annotations/index.min.js 2.69 kB -72 B (-3%)
build/api-fetch/index.min.js 2.28 kB -49 B (-2%)
build/autop/index.min.js 2.1 kB -38 B (-2%)
build/blob/index.min.js 451 B -21 B (-4%)
build/block-directory/index.min.js 7.05 kB -128 B (-2%)
build/block-editor/index.min.js 195 kB -5.05 kB (-3%)
build/block-editor/style-rtl.css 14.9 kB -214 B (-1%)
build/block-editor/style.css 14.9 kB -213 B (-1%)
build/block-library/blocks/navigation/interactivity.min.js 976 B +80 B (+9%) 🔍
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB -27 B (-1%)
build/block-library/blocks/navigation/view.min.js 438 B -5 B (-1%)
build/block-library/index.min.js 200 kB -4.26 kB (-2%)
build/block-library/interactivity/runtime.min.js 2.69 kB +4 B (0%)
build/block-serialization-spec-parser/index.min.js 2.87 kB +39 B (+1%)
build/blocks/index.min.js 50.3 kB -663 B (-1%)
build/commands/index.min.js 14.9 kB -59 B (0%)
build/components/index.min.js 230 kB -1.59 kB (-1%)
build/compose/index.min.js 12.1 kB -351 B (-3%)
build/core-commands/index.min.js 1.74 kB -66 B (-4%)
build/core-data/index.min.js 15.7 kB -879 B (-5%)
build/customize-widgets/index.min.js 12 kB -168 B (-1%)
build/data-controls/index.min.js 640 B -68 B (-10%) 👏
build/data/index.min.js 8.24 kB -441 B (-5%)
build/date/index.min.js 40.4 kB -32 B (0%)
build/deprecated/index.min.js 451 B -56 B (-11%) 👏
build/dom/index.min.js 4.63 kB -99 B (-2%)
build/edit-post/index.min.js 33.9 kB -1.39 kB (-4%)
build/edit-post/style-rtl.css 7.59 kB -170 B (-2%)
build/edit-post/style.css 7.58 kB -170 B (-2%)
build/edit-site/index.min.js 65.5 kB +1.46 kB (+2%)
build/edit-site/style-rtl.css 10.9 kB +365 B (+3%)
build/edit-site/style.css 10.9 kB +360 B (+3%)
build/edit-widgets/index.min.js 16.8 kB -444 B (-3%)
build/editor/index.min.js 44.6 kB -1.13 kB (-2%)
build/element/index.min.js 4.8 kB -89 B (-2%)
build/format-library/index.min.js 7.57 kB -202 B (-3%)
build/hooks/index.min.js 1.55 kB -90 B (-6%)
build/i18n/index.min.js 3.58 kB -149 B (-4%)
build/keyboard-shortcuts/index.min.js 1.71 kB -77 B (-4%)
build/keycodes/index.min.js 1.84 kB -68 B (-4%)
build/list-reusable-blocks/index.min.js 2.13 kB -12 B (-1%)
build/media-utils/index.min.js 2.9 kB -69 B (-2%)
build/notices/index.min.js 875 B -88 B (-9%)
build/plugins/index.min.js 1.84 kB -10 B (-1%)
build/preferences-persistence/index.min.js 1.84 kB -381 B (-17%) 👏
build/preferences/index.min.js 1.24 kB -90 B (-7%)
build/primitives/index.min.js 941 B -3 B (0%)
build/redux-routine/index.min.js 2.7 kB -39 B (-1%)
build/reusable-blocks/index.min.js 2.21 kB -44 B (-2%)
build/rich-text/index.min.js 10.7 kB -347 B (-3%)
build/router/index.min.js 1.77 kB -6 B (0%)
build/server-side-render/index.min.js 2.02 kB -50 B (-2%)
build/shortcode/index.min.js 1.39 kB -28 B (-2%)
build/style-engine/index.min.js 1.42 kB -105 B (-7%)
build/token-list/index.min.js 582 B -62 B (-10%) 👏
build/url/index.min.js 3.57 kB -80 B (-2%)
build/vendors/react-dom.min.js 41.8 kB -13 B (0%)
build/viewport/index.min.js 1.04 kB -42 B (-4%)
build/widgets/index.min.js 7.16 kB -123 B (-2%)
build/wordcount/index.min.js 1.02 kB -36 B (-3%)
ℹ️ View Unchanged
Filename Size
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.23 kB
build/block-editor/content.css 4.23 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 91 B
build/block-library/blocks/avatar/style.css 91 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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 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 409 B
build/block-library/blocks/columns/style.css 409 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.61 kB
build/block-library/blocks/cover/style.css 1.6 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 159 B
build/block-library/blocks/details/style.css 159 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 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.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 76 B
build/block-library/blocks/heading/style.css 76 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 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/interactivity.min.js 783 B
build/block-library/blocks/image/style-rtl.css 1.07 kB
build/block-library/blocks/image/style.css 1.07 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
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 507 B
build/block-library/blocks/media-text/style.css 505 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 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.33 kB
build/block-library/blocks/navigation/editor.css 2.33 kB
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 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 401 B
build/block-library/blocks/page-list/editor.css 401 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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-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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 281 B
build/block-library/blocks/post-template/style.css 281 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 103 B
build/block-library/blocks/preformatted/style.css 103 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 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 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 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 132 B
build/block-library/blocks/read-more/style.css 132 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 434 B
build/block-library/blocks/search/style.css 432 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 234 B
build/block-library/blocks/separator/style.css 234 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 203 B
build/block-library/blocks/site-logo/style.css 203 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 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/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 174 B
build/block-library/blocks/video/style.css 174 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.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.1 kB
build/block-library/style.css 13.1 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/dom-ready/index.min.js 324 B
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/html-entities/index.min.js 448 B
build/is-shallow-equal/index.min.js 527 B
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 939 B
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react.min.js 4.02 kB
build/warning/index.min.js 268 B
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented May 25, 2023

Flaky tests detected in 07b41f9.
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/5120886073
📝 Reported issues:

@SantosGuillamot
Copy link
Contributor

Thanks a lot for the pull request, Luis 🙂

I have some comments that I believe should be addressed (video at the end of the comment with a detailed explanation):

  • The click event to toggle the menu is being overwritten by the hover, so I can't keep a menu opened by clicking on it. Maybe we can add a property to the context to check this.
  • It seems that we are calling the data-wp-on.mouseover and data-wp-on.mouseout more than expected. It is being called not only when you hover in/out of the parent <li> but also each time you hover in/out of the children elements. I believe we have to use mouseenter and mouseleave.
  • Not sure if this is expected but, when the "Open on click" option is enabled, the current behavior is that it doesn't open on hover but just on click. With this implementation would be opened on hovering as well. Maybe we can check the open-on-click class.

Video explaining it in more detail: https://www.loom.com/share/4a551b225738429997a611bc2237403b

@luisherranz
Copy link
Member Author

Cool. Thanks Mario, those make sense. I'll make the corrections as soon as I can 🙂

@luisherranz
Copy link
Member Author

This should be ready for review.

I made a video to explain how the new isMenuOpen object works, which now keeps track of both click and hover (instead of the initial isHovering property).

https://www.loom.com/share/88c36280acd845899ae8d5d71f7c3d94

cc: @SantosGuillamot @jeryj

Copy link
Contributor

@SantosGuillamot SantosGuillamot left a comment

Choose a reason for hiding this comment

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

I tested it, and everything seems to be working great. Really interesting implementation, thanks for taking care of it 🙂

I just left a small comment on the roleAttribute selector.

Apart from that, when both "Open on click" and "Show arrow" settings are off, the submenu is also opened on hover and we are not adding the aria-expanded attribute. On the other hand, there is no button with those settings, so I am not sure if it is needed. Additionally, I'd like to explore the possibility of not sending the JavaScript files in this particular case because they are not needed (apart from the aria-expanded on hover which I am not sure).

packages/block-library/src/navigation/interactivity.js Outdated Show resolved Hide resolved
@luisherranz
Copy link
Member Author

when both "Open on click" and "Show arrow" settings are off, the submenu is also opened on hover and we are not adding the aria-expanded attribute. On the other hand, there is no button with those settings, so I am not sure if it is needed.

That's a good question. I don't know either. Should aria-expanded be used in the anchor instead of the button in that case?

cc: @jeryj @alexstine

Additionally, I'd like to explore the possibility of not sending the JavaScript files in this particular case because they are not needed

Sure. We can explore that in a subsequent PR.


If the roleAttribute fix (07b41f9) is fine, I think we can merge this and make those enhancements in subsequent PRs.

@SantosGuillamot
Copy link
Contributor

If the roleAttribute fix (07b41f9) is fine, I think we can merge this and make those enhancements in subsequent PRs.

Sure, I was just mentioning that because, if "Open on click" and "Show arrow" are disabled, we would be sending the JavaScript files just to add the aria-expanded true on hover. But let's explore the best approach in other pull requests as you say.

@luisherranz luisherranz merged commit ecd550b into trunk May 30, 2023
@luisherranz luisherranz deleted the fix/navigation-block-aria-expanded-on-hover branch May 30, 2023 11:58
@github-actions github-actions bot added this to the Gutenberg 16.0 milestone May 30, 2023
@luisherranz luisherranz removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label May 30, 2023
@alexstine
Copy link
Contributor

@luisherranz I am not sure what you mean by your question above. Please try to help me understand? If there are no submenus, then JS should not be required as toggling attributes will not be required. Do keep in mind, on smaller viewports, there is likely still a submenu trigger that will need aria-expanded.

@luisherranz
Copy link
Member Author

When the option "Show arrows" is set to true, there is a <button> element in the menu that gets an aria-expanded attribute set to true when the submenu is shown, and set to false when the submenu is hidden.

But when the option "Show arrows" is set to false, there is no <button> element, and therefore there is no aria-expanded attribute anywhere else.

The question is: is this correct? Or should we add the aria-expanded attribute to another element?

@SantosGuillamot feel free to correct me if I didn't get this correctly.

@alexstine
Copy link
Contributor

@luisherranz If show arrows is off, is it possible to still have submenus? If yes, the trigger button should always remain as that's how screen readers open the submenus.

@luisherranz
Copy link
Member Author

If show arrows is off, is it possible to still have submenus?

As of today, yes. You can choose:

  • Open on click: false
  • Show arrows: false

When those options are chosen, the submenus open on mouse hover or on focus. There is no aria-expanded attribute anywhere.

Interestingly, that option is not only bad for accessibility but also for mobile because there is no way to hover without navigating to the parent link. That's usually not a problem because people usually have the overlay switched on in mobile, but it's a problem if you have it turned off or for tablets.

The funny thing is that "Show arrows" is always forced to be true when "Open on click" is true. When "Open on click" is true, the whole parent link becomes the button and it has the aria-expanded, so the arrows are unnecessary (at least for accessibility).

From my limited knowledge, it looks like it should be the other way around: "Show arrows" should be forced to be true when "Open on click" is false. Maybe that was the intention but whoever did this coded it the other way around? I'll investigate that 🙂

@luisherranz
Copy link
Member Author

It seems like the logic of not forcing arrows (and therefore missing the aria-expanded) when the "Open on click" is false has been in place from the very beginning. Also the logic of forcing arrows when "Open on click" is true.

This is the original PR from @tellthemachines. It has some conversations about accessibility.

@tellthemachines, would you mind letting us know your opinion about this? Thanks 🙂

@alexstine
Copy link
Contributor

@luisherranz Yeah, we should always have buttons to open the submenu. Hover or focus on the parent is not enough. I am not sure what was discussed back then but it needs to change now. Even wordpress.org itself was changed to always have submenu triggers as I complained about it here.

WordPress/wporg-mu-plugins#207

Allowing users this much control is damaging.

Thanks.

@jeryj
Copy link
Contributor

jeryj commented May 31, 2023

This is the #33775 from @tellthemachines. It has some conversations about accessibility.

The PR description includes this statement:

The submenus currently open on hover as well as click, but we can adjust that behaviour to be optional. However, the choices should be hover and click, or click only. We shouldn't implement hover and focus because opening on focus is sub-optimal for accessibility.

@luisherranz
Copy link
Member Author

Hey folks, as this is a somewhat unrelated and merged PR, I've opened a new issue to continue this conversation:

@ndiego ndiego added the [Type] Experimental Experimental feature or API. label Jun 7, 2023
@cbravobernal cbravobernal removed the Needs PHP backport Needs PHP backport to Core label Jun 15, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
* Set correct aria-expanded on hover

* Store both `click` and `hover` in `isMenuOpen`

* Fix nav menu

* Remove menuOpenedOn debugger

* Add comments and fix example HTML

* Fix PHP lint

* Just in case openSubmenusOnClick exists but it's false

* Switch to isMenuOpen selector in roleAttribute
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Feature] Interactivity API API to add frontend interactivity to blocks. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants