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 labeling of the navigation links in the list view. #59370

Merged
merged 9 commits into from
Mar 19, 2024

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Feb 26, 2024

Fixes #59369

What?

In the Site Editor > Design > Navigation > Any navigation menu, the labeling of the list view doesn't provide any informatiom about what the item is. The only information provided is the link type.

Why?

To be able to understand what they are going to edit, users need to know what the link actually is, ie. the link text.

How?

  • Provides a more meaningful label for the navigation-link blocks in the list view.
  • Also simplifies the 'Options for %s' label of the ellipsis button to 'Actions', for simplicity and consistency.

Testing Instructions

  • Use a screen reader, for example VoiceOver with Safari.
  • Go to the Site Editor > Design > Navigation > Any navigation menu.
  • Navigate through the list view items in the navigation panel.
  • Observe the items are now announced with their visible text so users can understand what the link they are going to edit is.
  • Observe the item position is correctly provided in the visually hidden description of each item e.g. Block 3 of 5, Level 1. .
  • Once on a selected item, use the arrow keys to move focus to the ellipsis button or hover the button to reveal its tooltip.
  • Observe the button is announced as 'Actions' (same for the tooltip).
  • Edit a navigation link, empty its label and save.
  • Observe in the editor navigation panel list view the empty link has now a label 'Untitled'.
  • Update: The empty link will be empty in the list view, this is unchanged and will need to be addressed separately.
  • Go to the post editor.
  • Add a variety of blocks, for example:
    • blocks with default names
    • blocks with custom names (renamed by users)
    • synced patterns with user provided names
  • Navigate the list view items with a screen reader and observe they are announced in the most meaningful way for that specific kind of block e.g.: custom name for renamed blocks, user provided name for synced patterns, default block name for default blocks etc.
  • Add a Group block with a paragraph and lock the Group.
  • In the list view, inspect the Group item and observe the visually hidden description provides both the block position and the locked state e.g.: Block 3 of 5, Level 1. This block is locked.
  • Add a Heading block that only contains spaces. Save.
  • Observe the heading is named 'Heading' in the List View.
  • Onserve the headint is reported as empty heading in the Document Outline, screenshot:

Screenshot 2024-03-19 at 09 00 11

Testing Instructions for Keyboard

Screenshots or screencast

@afercia afercia 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). [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Package] Block editor /packages/block-editor labels Feb 26, 2024
@afercia afercia requested a review from ellatrix as a code owner February 26, 2024 14:37
Copy link

github-actions bot commented Feb 26, 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: afercia <[email protected]>
Co-authored-by: alexstine <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: youknowriad <[email protected]>

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

Copy link

github-actions bot commented Feb 26, 2024

Size Change: -46 B (0%)

Total Size: 1.71 MB

Filename Size Change
build/block-editor/index.min.js 252 kB -55 B (0%)
build/block-library/index.min.js 218 kB +5 B (0%)
build/editor/index.min.js 64 kB +4 B (0%)
ℹ️ 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.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.43 kB
build/block-editor/content.css 4.43 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 kB
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 647 B
build/block-library/blocks/group/editor.css 647 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 878 B
build/block-library/blocks/image/editor.css 878 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 306 B
build/block-library/blocks/media-text/editor.css 305 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.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.02 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 629 B
build/block-library/blocks/search/style.css 628 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.48 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.11 kB
build/block-library/common.css 1.11 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.4 kB
build/block-library/editor.css 12.4 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.8 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/blocks/index.min.js 51.8 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 935 B
build/commands/style.css 930 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.8 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.98 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 558 B
build/edit-post/classic.css 558 B
build/edit-post/index.min.js 24.2 kB
build/edit-post/style-rtl.css 5.58 kB
build/edit-post/style.css 5.57 kB
build/edit-site/index.min.js 218 kB
build/edit-site/style-rtl.css 15 kB
build/edit-site/style.css 15 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.16 kB
build/editor/style-rtl.css 5.36 kB
build/editor/style.css 5.35 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.03 kB
build/format-library/style-rtl.css 492 B
build/format-library/style.css 490 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 13 kB
build/interactivity/navigation.min.js 1.15 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.36 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 851 B
build/list-reusable-blocks/style.css 849 B
build/media-utils/index.min.js 2.92 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 747 B
build/nux/style.css 742 B
build/patterns/index.min.js 5.73 kB
build/patterns/style-rtl.css 553 B
build/patterns/style.css 552 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.05 kB
build/preferences/index.min.js 2.81 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 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.73 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.5 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.1 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.7 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.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

Copy link
Contributor

@alexstine alexstine left a comment

Choose a reason for hiding this comment

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

@afercia Accessibility seems sound.

@talldan FYI.

@alexstine
Copy link
Contributor

Also, @andrewserong.

@afercia
Copy link
Contributor Author

afercia commented Mar 4, 2024

Thanks @alexstine for your review.

To recap the main change in this PR, the logic to determine the list view items accessible name changes from this:

blockInformation?.name || blockInformation?.title || __( 'Untitled' );

to this:

block.attributes?.label || blockInformation?.name || blockInformation?.title || __( 'Untitled' );

This is to take into account navigation links because the links text is stored in their label attribute. However, I'm not sure this series of OR is great, it seems a bit fragile to me. I think it would have been better to treat the navigation links text label as the block custom name in the first place.
Would apprecaite some thoughts from @talldan

@afercia
Copy link
Contributor Author

afercia commented Mar 4, 2024

Noting that the labeling will need further improvements for the 'locked' information, the 'sticky' information and 'anchor' information that are visually added to the items in the list view, see #59409

@afercia
Copy link
Contributor Author

afercia commented Mar 4, 2024

I decided to change approach.
Basically, the aria-label is only usd to add the (locked) information text. However, that info should be moved away from the label to a description. Any info about the block 'properties' like locked, sticky, or the anchor should not contribute to compoute the accessible name of the list view item. A follow-up is tracked in #59409

As such I decided to remove the aria-label. The accessible name will now be the visible text. This has a few advantages:

  • Visible text and accessible name do match.
  • There is no longer the need to duplicate logic to retrieve the item label or name or title. That's already handled by useBlockDisplayTitle in the ListViewBlockSelectButton.
  • The 'locked' info is moved to the visually hidden description. This also paves the way for List view: the 'sticky' information is only visual #59409 as more information will be added to the description.

@afercia afercia requested a review from alexstine March 4, 2024 15:30
@afercia afercia changed the title Fix labeling of the navigation links in the site editor list view. Fix labeling of the navigation links in the list view. Mar 4, 2024
@alexstine
Copy link
Contributor

@afercia Yeah, I've been wanting to do that for a while now but never got around to refactoring all of that out of the aria-label. Thanks, having another pass on this soon.

Copy link
Contributor

@alexstine alexstine 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 testing well.

@alexstine alexstine requested a review from youknowriad March 4, 2024 16:15
@afercia
Copy link
Contributor Author

afercia commented Mar 6, 2024

Latest commit improves things a bit by providing the 'Untitled' fallback only for block labels (e.g. navigation links with a link text made of only spaces) and by adding a test.

A separate issue is whether the editor should ever allow to render empty links on the front end, which is tracked in a separate issue at #59560

Copy link

github-actions bot commented Mar 7, 2024

Flaky tests detected in b0ff43e.
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/8185862794
📝 Reported issues:

@afercia
Copy link
Contributor Author

afercia commented Mar 7, 2024

It is also worth noting that right now on trunk it is possible to add a Heading block and leave it empty or with only spaces.
In this case, the List View will only show an icon and an empty list item, which is less than ideal. Screenshot:

Screenshot 2024-03-07 at 15 15 04

The current code on trunk prioritizes a block label but it doesn't check if the label is empty or made of only spaces. This PR does it and fallbacks to 'Untitled'.

@afercia afercia self-assigned this Mar 7, 2024
@afercia afercia requested a review from alexstine March 7, 2024 15:37
@afercia
Copy link
Contributor Author

afercia commented Mar 7, 2024

I'm probably missing something, as the failing tests show. I'll go again through my changes to see what I'm doing wrong.

@afercia afercia force-pushed the fix/site-editor-list-view-navigation-links-labeling branch from cf3e968 to 24776bf Compare March 8, 2024 11:59
@afercia
Copy link
Contributor Author

afercia commented Mar 8, 2024

To clarify:
I opted to use Untitled as a fallback because the fallback should be consistent with what we want to show on the front end for empty links or empty headings etc. See #59560. It is also worth reminding that Classic Themes render Untitled for empty navigation links.

I'd appreciate more thoughts on this though Cc @getdave Open to consideer a different fallback if that's more desirable.

@afercia
Copy link
Contributor Author

afercia commented Mar 18, 2024

Thanks @Mamaduka I will rebase. It seems #59827 doesn't take into account the case when a heading contains only spaces though so I hink a trim() is still necessary. Screenshot from latest trunk:

Screenshot 2024-03-18 at 08 49 39

In this case, also the accessibility label won't provide a meaningful information because spaces will be appended to the aria label e.g. aria-label="Heading Block. Row 2. Level 2. " while it should say it is empty.

@Mamaduka
Copy link
Member

Mamaduka commented Mar 18, 2024

Good point. I can follow up on that!

Update: Though historically, the RichText only checked emptiness based on the string length. See: https://github.com/WordPress/gutenberg/blob/trunk/packages/rich-text/src/is-empty.js

Do we still want to account for spaces?

@getdave
Copy link
Contributor

getdave commented Mar 18, 2024

Ideally we'd wrap this bug up in a single PR @Mamaduka as it will be easier to manage from a release perspective. Is that possible?

@getdave getdave 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 Mar 18, 2024
@Mamaduka
Copy link
Member

@getdave, do you mean to push fixes on this branch?

Comment on lines 58 to 62
// Users can enter and save a label made of only spaces e.g. for
// navigation links. In that case we provide a fallback label.
// We do want to trim leading and trailing spaces anyways.
const trimmedLabel = label.trim();
return trimmedLabel === '' ? __( 'Untitled' ) : trimmedLabel;
Copy link
Member

@Mamaduka Mamaduka Mar 18, 2024

Choose a reason for hiding this comment

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

I think this should be handled in getBlockLabel, which should return a fallback (block title) when only spaces are provided.

Then, we don't need to handle this case by case.

I just saw this comment. Changes in this hook will affect every block in the editor. While the argument makes sense for Heading and Navigation links, it might not work for other blocks like Template Part.

@getdave
Copy link
Contributor

getdave commented Mar 18, 2024

do you mean to push fixes on this branch?

Sorry for adding confusion.

I'm not personally intending to be pushing fixes to this branch.

I meant, if this is targeting 6.5 it'd probably be easier for all fixes to be in a single PR. But if the followups are minor then maybe we should ship this one "as is" and then decide on whether it would be more appropriate to wait on the followups until a post-6.5 patch release?

@Mamaduka
Copy link
Member

@getdave, unfortunately, I've not been following PR closely enough to propose the milestone. But I can see that PR introduces a new string that can't be merged after hard string free — RC1.

@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 Mar 18, 2024
@afercia afercia force-pushed the fix/site-editor-list-view-navigation-links-labeling branch from 24776bf to 13b0fe7 Compare March 18, 2024 15:20
@afercia afercia requested a review from ajitbohra as a code owner March 18, 2024 15:20
@afercia
Copy link
Contributor Author

afercia commented Mar 18, 2024

In the latest two commits:

  • I reverted the changes to useBlockDisplayTitle. This leaves unsolved the problem when users add only empty spaces to a heading or to a navigation link. However, this seems a broader problem that needs to be addressed separately.
  • For the heading block: made sure the label is trimmed before being checked.

Overall, I think a decision should be made first: whether to allow users to save empty headings or empty links. This should be evaluated for other blocks as well but it's very impportant for headings and links.

Update:
I forgot to mention this PR also introduces a chance in the document outline, by trimming a heading content so that a heading that only contains spaces is considered 'empty' and reported as such in the document outline. Will update the test instrtuctions, for posterity.

@afercia
Copy link
Contributor Author

afercia commented Mar 19, 2024

Do we still want to account for spaces?

I think this will need a careful evaluation on what it's best for users. It really depends on the kind of content (the block type). It doesn't only impact the admin, it impacts also the front end. For example:

  • Empty headings are far from ideal for SEO and accessibility. The editor should not allow to save empty headings. They shouldn't even be rendered on the front end.
  • Empty links are far from ideal for SEO and accessibility.
  • Other empty blocks may have a minor impact. However, I'm not sure why in the world we'd want to render useless markup on the front end when the block is completely empty. For example. add an empty Code block and save. Observe the following, totally useless, markup is rendered on the front end: <pre class="wp-block-code"><code></code></pre>

@getdave @Mamaduka thanks for your feednack, when you have a chance I'd appreciate a final review.

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thank you, @afercia. The changes test well for me ✅

@afercia afercia merged commit c654171 into trunk Mar 19, 2024
59 checks passed
@afercia afercia deleted the fix/site-editor-list-view-navigation-links-labeling branch March 19, 2024 11:58
@github-actions github-actions bot added this to the Gutenberg 18.0 milestone Mar 19, 2024
@@ -405,7 +396,7 @@ function ListViewBlock( {
clientIds={ dropdownClientIds }
block={ block }
icon={ moreVertical }
label={ settingsAriaLabel }
Copy link
Member

@richtabor richtabor Mar 20, 2024

Choose a reason for hiding this comment

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

I had previously inquired about simplifying the "Options for %s" label, but was informed the block name was necessary by @alexstine. Is that no longer the case?

Either way though, this should be renamed "Options", like it's called in the block toolbar (as they're the same).

@afercia @Mamaduka Was there a reason to change "Options" to "Actions"?

Copy link
Contributor

Choose a reason for hiding this comment

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

@richtabor I guess it was a battle I was going to lose eventually. It was really a stopgap to make NVDA behave as sometimes navigating the rows on the right side would not tell you which block you were opening an options menu for.

carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Mar 27, 2024
* Fix labeling of the navigation links in the site editor list view.

* Adjust tests.

* Simplify labeling by removing aria-label and using text content.

* Improve logic and add test.

* Adjust test.

* Adjust block renaming test.

* Adjust list view test.

* Revert changes to useBlockDisplayTitle.

* Make heading with only spaces be considered empty.

Co-authored-by: afercia <[email protected]>
Co-authored-by: alexstine <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: youknowriad <[email protected]>
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. [Feature] Navigation Menus Any issue relating to Navigation Menus [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
Development

Successfully merging this pull request may close these issues.

Site editor: List view: incorrect labeling of navigation links
5 participants