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

Move document information and outline to list view panel #44788

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Oct 7, 2022

Fixes: #44193
Fixes: #44862

Moves document information and outline to the list view panel on the edit post screen, trying to follow the mockups proposed in #44193.

Screenshots or screencast

image
image

@jorgefilipecosta jorgefilipecosta added [Type] Enhancement A suggestion for improvement. [Package] Edit Post /packages/edit-post labels Oct 7, 2022
@github-actions
Copy link

github-actions bot commented Oct 7, 2022

Size Change: +2.75 kB (0%)

Total Size: 1.28 MB

Filename Size Change
build/components/index.min.js 202 kB +7 B (0%)
build/edit-post/index.min.js 34.2 kB +2.33 kB (+7%) 🔍
build/edit-post/style-rtl.css 7.33 kB +195 B (+3%)
build/edit-post/style.css 7.32 kB +193 B (+3%)
build/editor/index.min.js 43.4 kB +14 B (0%)
build/primitives/index.min.js 944 B +11 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.09 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/index.min.js 169 kB
build/block-editor/style-rtl.css 15.8 kB
build/block-editor/style.css 15.8 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 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 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 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 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 406 B
build/block-library/blocks/columns/style.css 406 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 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
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 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 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 394 B
build/block-library/blocks/group/editor.css 394 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 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 880 B
build/block-library/blocks/image/editor.css 880 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
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 284 B
build/block-library/blocks/latest-comments/style.css 284 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 463 B
build/block-library/blocks/latest-posts/style.css 462 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 705 B
build/block-library/blocks/navigation-link/editor.css 703 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.02 kB
build/block-library/blocks/navigation/editor.css 2.03 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
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 363 B
build/block-library/blocks/page-list/editor.css 363 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 493 B
build/block-library/blocks/post-comments-form/style.css 493 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 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 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 282 B
build/block-library/blocks/post-template/style.css 282 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-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 326 B
build/block-library/blocks/pullquote/style.css 325 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 282 B
build/block-library/blocks/query-pagination/style.css 278 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 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 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 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 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 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 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 322 B
build/block-library/blocks/spacer/editor.css 322 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 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 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 235 B
build/block-library/blocks/template-part/editor.css 235 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 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 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.2 kB
build/block-library/editor.css 11.2 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 192 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.3 kB
build/block-library/style.css 12.3 kB
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 49.9 kB
build/components/style-rtl.css 11.3 kB
build/components/style.css 11.3 kB
build/compose/index.min.js 12.2 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/index.min.js 16.1 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-site/index.min.js 58 kB
build/edit-site/style-rtl.css 8.37 kB
build/edit-site/style.css 8.35 kB
build/edit-widgets/index.min.js 16.7 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/editor/style-rtl.css 3.62 kB
build/editor/style.css 3.61 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/experiments/index.min.js 868 B
build/format-library/index.min.js 6.95 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.83 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 963 B
build/nux/index.min.js 2.06 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.33 kB
build/priority-queue/index.min.js 1.58 kB
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/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.77 kB
build/shortcode/index.min.js 1.53 kB
build/style-engine/index.min.js 1.46 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jorgefilipecosta jorgefilipecosta force-pushed the update/move-document-information-and-outline-to-list-view-panel branch 3 times, most recently from 0b733a2 to 56f5c2d Compare October 10, 2022 17:38
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 appears to have a bug in Firefox:

transparent-stats.mp4

@jorgefilipecosta jorgefilipecosta force-pushed the update/move-document-information-and-outline-to-list-view-panel branch from 56f5c2d to 8f39ab3 Compare October 12, 2022 11:50
@jorgefilipecosta
Copy link
Member Author

Nice catch @draganescu the issue was fixed 👍

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.

Lovely 👏🏻 This looks great now. Are these two tweaks worth a second look?

  1. there is a jankiness when toggling inserter and list view
video
janky-inserter-listview.mp4
  1. there is a page jump when toggling document structure and document outline
video
jump-structure-outline.mp4

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.

There is a missing feature from the original issue (#44193):

Outline tab only available if the document has heading blocks

Example Screenshot 2022-10-13 at 15 22 20

@alexstine alexstine added the Needs Accessibility Feedback Need input from accessibility label Oct 14, 2022
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.

@jorgefilipecosta Thanks for the PR. This needs some accessibility work, please see comments below.

@jorgefilipecosta jorgefilipecosta force-pushed the update/move-document-information-and-outline-to-list-view-panel branch 7 times, most recently from b9ea0e8 to 6f6fde8 Compare October 18, 2022 17:16
@jorgefilipecosta
Copy link
Member Author

Hi @draganescu, @alexstine, thank you a lot for the reviews, I tried to apply all the feedback.

@alexstine
Copy link
Contributor

@jorgefilipecosta Why does this info appear on List View and Outline tabs? Shouldn't it just appear on Outline tab?

Characters:241
Words:42
Time to read:< 1 minute

This information is not expected in a List View tab especially since it appears after an application role.

@jorgefilipecosta
Copy link
Member Author

@jorgefilipecosta Why does this info appear on List View and Outline tabs? Shouldn't it just appear on Outline tab?

Characters:241
Words:42
Time to read:< 1 minute

This information is not expected in a List View tab especially since it appears after an application role.

Hi @alexstine; thank you for letting me know about this issue.
The mockup shared by @mtias on #44193 shows this information on the list view too. I'm following the proposed mockup.
Would making the application role include the list view blocks and the character/word count information be more accessible?
Could we keep character/word count information after the application role but add a different role to that information?
Any other ways that could make the interface accessible while complying with the design proposal?
Thank you in advance for any insights you may provide!

@alexstine
Copy link
Contributor

@jorgefilipecosta Not really. You are dealing with a contextual issue. When the designers opened the door with tabs, you set the principal that there would be very defined content per tab. E.g. If you have a list view tab, this is okay, but that tab should only contain list view related content. The outline tab would make much more sense to find this information under and it would be more consistent with the idea of one defined item per tab.

Currently, user focus is placed in the application when the list view opens so users would have to know that other content is there to find it. You cannot add this info to the application because this is what makes the tree grid items accessible. Adding another role could actually make things inaccessible because of the very nature of how screen readers are choosing to work now.

TLDR: No.

Thanks.

@jorgefilipecosta
Copy link
Member Author

@mtias, @jasmussen, @jameskoster given the acessibiity contraints referred above would it be ok to have character word/count just on the outline tab?

@jameskoster
Copy link
Contributor

That seems reasonable to me, indeed we discussed on the original ticket.

It does mean we'll need to display the Overview tab permanently though (so stats are always accessible). Consequently the Overview tab will need an 'empty' design... for now it can probably just contain a description.

@draganescu draganescu dismissed their stale review October 19, 2022 09:57

stale review

@ciampo
Copy link
Contributor

ciampo commented Oct 27, 2022

Hey @alexstine !

This did follow perfect accessibility, exact same functionality for the main sidebar.

I'm not not sure I understand what you meant here, would you mind clarifying?

Every time the ListView mounts, focus is placed on it. However, this occurs on a button click at the moment. Changing to TabPanel would make it so the left arrow focus on List View item would focus the ListView

Again, I'm not sure I understand the issue that you're pointing out. Looking at the TabPanel component, it is possible to move focus (via the tab key) on the tablist element and then press the left/right arrow keys to select the different tabs, which in turn automatically selects and shows the associated tab panel. This is referred to as "Tabs with automatic activation" on the W3C website.

If we instead were able to pass a prop to the TabPanel component that waited for space/enter key to select the tab, that would help us here and future PRs such as #45203.

Using space/enter is indeed another variant of the Tabs pattern, described as "Tabs with manual activation" on the same W3C Website, which currently the TabPanel component doesn't support.

What would be the exact reason for using manual activation over automatic activation?

Once these requirements are a bit more clear, we may open a PR and discuss the next steps for the TabPanel component.

My main problem is, no one ever has time to work on these small enhancements because the project moves too quickly so sometimes I settle for less for reasons only related to accessibility. At this point, I would call TabPanel bad UX until my suggestion is implemented for this use-case.

While it is true that a good part of the development work in Gutenberg goes towards adding new features and evolving the product, I can guarantee you that at the same time we try to do our best work in constantly polishing and improving our code. Folks like @mirka and myself, for example, spend most of their time improving the @wordpress/component package — which usually means fixing bugs (including accessibility ones) and reducing technical debt. We always really appreciate and value your feedback, and we try to apply it where needed as much as possible.

Finally, I'm not sure I'd call the TabPanel component "bad UX", as it seems to largely follow the W3C ARIA specs for the Tabs pattern — but at the same time, we're definitely open to feedback and always look for ways to improve our components.

@alexstine
Copy link
Contributor

@ciampo Okay, I guess I should have had my coffee before writing this. Let me explain.

I'm not not sure I understand what you meant here, would you mind clarifying?

As far as the List View and Outline tabs, they are the same as the document settings/block settings sidebar. Those are perfectly accessible, that is why the PR was okay to me. It follows a model already used in the editors.

Again, I'm not sure I understand the issue that you're pointing out. Looking at the TabPanel component, it is possible to move focus (via the tab key) on the tablist element and then press the left/right arrow keys to select the different tabs, which in turn automatically selects and shows the associated tab panel. This is referred to as "Tabs with automatic activation" on the W3C website.

We cannot use automatic activation here because the ListView component mounts and fires the useFocusOnMount hook. This would introduce an unexpected focus jump if simply exploring the tabs. Switching to manual activation would be better in this case that way the ListView mounts after the user manually selects the tab with space/enter key. Does this make sense? Automatic activation is fine but when automatic focus is at play, it is not a great situation because the user could simply be exploring their options and trigger focus by mistake.

As far as the mentioned prop, this would not need to be changed globally. This is a case-by-case thing. That is why I suggested adding a new prop to TabPanel controlling this via true/false defaulting to false.

Finally, I'm not sure I'd call the TabPanel component "bad UX", as it seems to largely follow the W3C ARIA specs for the Tabs pattern — but at the same time, we're definitely open to feedback and always look for ways to improve our components.

The TabPanel is not bad UX, automatic focus changes would be bad UX as it relates to this specific PR and the related PR I mentioned above. The TabPanel is great, it just does not currently meet our use-case in these 2 PRs. If we can modify it, that would be amazing. Remember, the golden rule is only move focus if the user is aware. There is no way a user could be aware that changing tabs will trigger a focus jump. That is why space/enter keys would be necessary to use TabPanel for these 2 PRs which would make it great UX. We're currently faking this with buttons right now but it would be great to move away from that globally.

I know you work hard to improve but at the same time, know that the vast majority of PRs I review for A11Y are new features/changing UIs. There should be a larger focus on improving what we already have, that was my point for the project as a whole, not specific to your great work on components. What good are accessible components if they are used in inaccessible contexts. That is what I am fighting to improve.

Sorry my above comment came off so rough but I meant nothing against the contributors over the components team. That feedback was for this PR alone.

Thanks.

@ciampo
Copy link
Contributor

ciampo commented Oct 28, 2022

Thank you for the context and the detailed explanation, @alexstine !

I went ahead and opened a new issue related to adding support for manual tab activation to TabPanel: #45390

Sorry my above comment came off so rough but I meant nothing against the contributors over the components team. That feedback was for this PR alone.

Don't worry about it! As I mentioned before, we always appreciate your contributions and your will to improve the accessibility of the editor.

@annezazu annezazu mentioned this pull request Nov 1, 2022
57 tasks
fullofcaffeine pushed a commit to Automattic/wp-calypso that referenced this pull request Jan 18, 2023
The "Details" popover doesn't exist since v14.5. See WordPress/gutenberg#44788
fullofcaffeine pushed a commit to Automattic/wp-calypso that referenced this pull request Jan 18, 2023
* Fix tracking specs against GB v14.8.x

* Fix editor-tracking__other-block-events.ts

* Fix specs/editor-tracking/editor-tracking__global-styles-events.ts

* Remove accidental skip

* More global styles tracking fixes

* Remove "Details" popover test & related actions
The "Details" popover doesn't exist since v14.5. See WordPress/gutenberg#44788

* Fix editor-tracking__toolbar-events.ts

* Fix editor-tracking__document-actions-events.ts

* Fix editor-tracking__fse-template-events.ts

* Fix editor-tracking__pattern-events.ts

* Fix padding setting in editor-tracking__global-styles-events.ts

* Remove accidental page.close

* Update block names for template conversion

* Update template part deletion for new site editor

* Move page closing to a dedicated step
As per #71572 (comment)

* Update test to match current theme (twenty-twenty-two)

* Skip the whole block since currently tracking is not tested there

* Redesign spec around 2022 theme

Co-authored-by: dpasque <dan.speckhard.pasque@automattic.com>
danielbachhuber pushed a commit to Automattic/wp-calypso that referenced this pull request Jan 18, 2023
* Fix tracking specs against GB v14.8.x

* Fix editor-tracking__other-block-events.ts

* Fix specs/editor-tracking/editor-tracking__global-styles-events.ts

* Remove accidental skip

* More global styles tracking fixes

* Remove "Details" popover test & related actions
The "Details" popover doesn't exist since v14.5. See WordPress/gutenberg#44788

* Fix editor-tracking__toolbar-events.ts

* Fix editor-tracking__document-actions-events.ts

* Fix editor-tracking__fse-template-events.ts

* Fix editor-tracking__pattern-events.ts

* Fix padding setting in editor-tracking__global-styles-events.ts

* Remove accidental page.close

* Update block names for template conversion

* Update template part deletion for new site editor

* Move page closing to a dedicated step
As per #71572 (comment)

* Update test to match current theme (twenty-twenty-two)

* Skip the whole block since currently tracking is not tested there

* Redesign spec around 2022 theme

Co-authored-by: dpasque <dan.speckhard.pasque@automattic.com>
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jan 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Accessibility Feedback Need input from accessibility Needs User Documentation Needs new user documentation [Package] Edit Post /packages/edit-post [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The focus ring of document details is too big Move document information and outline to list view panel
9 participants