Components: ComboboxControl supports disabled items

[retrofox]

What?

This PR supports disabled items for the <ComboboxControl / > component.

Why?

Because the disable option for a Combobox component is a common requirement when using it for the UI.

How?

The <ComboboxControl /> now accepts the disabled property, which is propagated to the SuggestionsList one. The implementation checks if the option is disabled. If so, it does not allow selection in the respective event handler functions.

Let's remark that the disable options are not selectable (by clicking on it or pressing the enter key), but they are discoverable and can make the implementation a11y-friendly.

Testing Instructions

This PR adds a new story to test the disable items:

1. Run the storybook

npm run storybook:dev

2. Select the ComboboxControl story

http://localhost:50240/?path=/story/components-comboboxcontrol--with-disabled-options

4. Confirm the disabled items looks like disabled :smart:
5. Confirm it is not possible to select the items by clicking on them
6. Confirm it is possible to "discover" the item by pressing the UP/DOWN arrow
7. Confirm it is not possible to select the items by pressing the ENTER key

https://github.com/WordPress/gutenberg/assets/77539/57d42a80-3350-4a18-bc8e-be0508d84600

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions[bot]]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Focus] Accessibility (a11y), [Package] Components.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions[bot]]

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: retrofox <[email protected]>
Co-authored-by: alexstine <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: jasmussen <[email protected]>

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

[github-actions[bot]]

Size Change: +825 B (+0.05%)

Total Size: 1.74 MB

Filename	Size	Change
build/block-editor/index.min.js	259 kB	+155 B (+0.06%)
build/components/index.min.js	220 kB	+16 B (+0.01%)
build/components/style-rtl.css	12 kB	+41 B (+0.34%)
build/components/style.css	12 kB	+39 B (+0.33%)
build/edit-site/index.min.js	222 kB	+48 B (+0.02%)
build/editor/index.min.js	84.7 kB	+466 B (+0.55%)
build/editor/style-rtl.css	8.3 kB	+31 B (+0.37%)
build/editor/style.css	8.31 kB	+29 B (+0.35%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.27 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.57 kB
build/block-editor/content.css	4.57 kB
build/block-editor/default-editor-styles-rtl.css	395 B
build/block-editor/default-editor-styles.css	395 B
build/block-editor/style-rtl.css	15.5 kB
build/block-editor/style.css	15.5 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	133 B
build/block-library/blocks/audio/theme.css	133 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	277 B
build/block-library/blocks/block/editor.css	277 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	671 B
build/block-library/blocks/cover/editor.css	674 B
build/block-library/blocks/cover/style-rtl.css	1.7 kB
build/block-library/blocks/cover/style.css	1.69 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	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	312 B
build/block-library/blocks/embed/editor.css	312 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	133 B
build/block-library/blocks/embed/theme.css	133 B
build/block-library/blocks/file/editor-rtl.css	326 B
build/block-library/blocks/file/editor.css	327 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	956 B
build/block-library/blocks/gallery/editor.css	960 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	394 B
build/block-library/blocks/group/editor.css	394 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 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	891 B
build/block-library/blocks/image/editor.css	891 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	133 B
build/block-library/blocks/image/theme.css	133 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	193 B
build/block-library/blocks/navigation-link/style.css	192 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.03 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	734 B
build/block-library/blocks/post-featured-image/editor.css	732 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	397 B
build/block-library/blocks/post-template/style.css	396 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	353 B
build/block-library/blocks/pullquote/theme-rtl.css	174 B
build/block-library/blocks/pullquote/theme.css	174 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	233 B
build/block-library/blocks/quote/theme.css	235 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	690 B
build/block-library/blocks/search/style.css	689 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	239 B
build/block-library/blocks/separator/style.css	239 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	805 B
build/block-library/blocks/site-logo/editor.css	805 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	324 B
build/block-library/blocks/social-link/editor.css	324 B
build/block-library/blocks/social-links/editor-rtl.css	676 B
build/block-library/blocks/social-links/editor.css	675 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	152 B
build/block-library/blocks/table/theme.css	152 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	393 B
build/block-library/blocks/template-part/editor.css	393 B
build/block-library/blocks/template-part/theme-rtl.css	107 B
build/block-library/blocks/template-part/theme.css	107 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	133 B
build/block-library/blocks/video/theme.css	133 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.3 kB
build/block-library/editor.css	12.2 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	218 kB
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	707 B
build/block-library/theme.css	713 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.7 kB
build/commands/index.min.js	15.1 kB
build/commands/style-rtl.css	953 B
build/commands/style.css	951 B
build/compose/index.min.js	12.8 kB
build/core-commands/index.min.js	2.81 kB
build/core-data/index.min.js	72.5 kB
build/customize-widgets/index.min.js	10.9 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	9 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	578 B
build/edit-post/classic.css	578 B
build/edit-post/index.min.js	14.4 kB
build/edit-post/style-rtl.css	2.68 kB
build/edit-post/style.css	2.68 kB
build/edit-site/style-rtl.css	12.9 kB
build/edit-site/style.css	12.9 kB
build/edit-widgets/index.min.js	17.5 kB
build/edit-widgets/style-rtl.css	4.18 kB
build/edit-widgets/style.css	4.18 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.07 kB
build/format-library/style-rtl.css	493 B
build/format-library/style.css	492 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/debug.min.js	16.2 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.17 kB
build/interactivity/query.min.js	740 B
build/interactivity/router.min.js	2.79 kB
build/interactivity/search.min.js	618 B
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.3 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	851 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	1.57 kB
build/nux/style-rtl.css	748 B
build/nux/style.css	744 B
build/patterns/index.min.js	6.45 kB
build/patterns/style-rtl.css	595 B
build/patterns/style.css	595 B
build/plugins/index.min.js	1.8 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.85 kB
build/preferences/style-rtl.css	710 B
build/preferences/style.css	712 B
build/primitives/index.min.js	809 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.7 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	10.1 kB
build/router/index.min.js	1.93 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.02 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.74 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.03 kB
build/viewport/index.min.js	957 B
build/warning/index.min.js	249 B
build/widgets/index.min.js	7.11 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}

[github-actions[bot]]

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

• #45345 in /test/e2e/specs/editor/various/inserting-blocks.spec.js
• #48372 in /test/e2e/specs/editor/various/inserting-blocks.spec.js
• #61291 in /test/e2e/specs/editor/various/inserting-blocks.spec.js

[retrofox]

Hi, @alexstine. Thanks for your feedback.

...you should not be restricting arrow navigation for disabled options. ...

Good point. This is something that I've been thinking about, too. However, I followed the behavior of the native element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#advanced_select_with_multiple_features

It isn't possible to select the disabled option by using the keyboard.

Anyway, we can make them accessible if we consider this to be the proper behavior.

[alexstine]

@retrofox I think at minimum, the option should at least be discoverable even if it is announced as disabled.

Thoughts @afercia @joedolson?

So many bad examples around the web. I fail to understand how people see the experience as fair or equitable when we make things visible in the UI visually but not readable allowed for VI/blind users.

[retrofox]

I think at minimum, the option should at least be discoverable even if it is announced as disabled.

💯 sgtm

[afercia]

I think at minimum, the option should at least be discoverable even if it is announced as disabled

I agree the 'not seleftable' options need to be discoverable. Any UI must provide information parity for all users.

• Sighted users can actually see the non-selectable option and understand it's 'disabled' as in: not selectable.
• Non sighted users must be provided with an equivalent information. As such, they need to be able to navigate to the non-selectable option.

[jasmussen]

Could we have a quick design check on the styling for the disabled options?

I'd want to defer to best practices here. At a glance the low-opacity/grayscale makes it look disabled, but I'm unfamiliar with practices for selected-disabled-item styles. If what is present in this branch passes instincts, let's try that.

[retrofox]

Could we have a quick design check on the styling for the disabled options?

I'd want to defer to best practices here. At a glance the low-opacity/grayscale makes it look disabled, but I'm unfamiliar with practices for selected-disabled-item styles. If what is present in this branch passes instincts, let's try that.

The following shows the current style based on color and background-color values:

Algeria is disabled:

Algeria is disabled and selected:

I decided to apply the $grey-100 background color in the same spirit as aria-disable, to let the user know that the current (disabled) option is focused. However, it isn't possible to select it.

[jasmussen]

Again, will defer to others. To me this is not a design issue, this is a question of: what are the constraints we are reaching for as to how this component should behave in an accessible way. If the gray works, go for it. An alternative is to keep the blue selection style, but instead show a semi-transparent white text-color for the disabled item when it's selected — my instincts would be that this would be less jumpy as you navigate.

[retrofox]

Thanks, Joen

An alternative is to keep the blue selection style, but instead show a semi-transparent white text-color for the disabled item when it's selected — my instincts would be that this would be less jumpy as you navigate.

I do agree.

[retrofox]

An alternative is to keep the blue selection style, but instead show a semi-transparent white text-color for the disabled item when it's selected

https://github.com/WordPress/gutenberg/assets/77539/ec4ec756-62dd-469f-849a-e78271a845f3

[jameskoster]

In a lot of Combobox examples I see, disabled options do tend to lighten the background as well as the text. I presume this is to create adequate visual contrast between disabled/enabled options. Perhaps it would work a bit better if the background was a lighter shade of the admin theme color rather than gray?

[retrofox]

Hi, James. Thanks for your input.

In a lot of Combobox examples I see, disabled options do tend to lighten the background as well as the text.

Could you share a few UI design Combobox examples where disabled options lighten the background and text? I did the same, and considering there are many options... it doesn't help to define which approach we should take :-( However, we should probably follow it, considering (I think) that we'd like to align more with Ariakit. Ariakit applies simply opacity: 0.25;:

example

[jameskoster]

That example is a menu rather than a combobox, so perhaps slightly different? Curiously comboboxes in ariakit don't seem to have any visual treatment for disabled options, which is a bit puzzling.

The example I looked at earlier was this one. There are more here.

Generally disabled options don't share a background treatment with enabled ones. Oftentimes disabled options have no hover effect at all, which could also work here imo.

[retrofox]

The example I looked at earlier was this one. There are more here.

👍

Generally disabled options don't share a background treatment with enabled ones. Oftentimes disabled options have no hover effect at all, which could also work here imo.

having no effect, I think, makes sense for disabled options. For aria-disabled maybe it doesn't? Anyway, I'm open to any implement we want to do

[jameskoster]

having no effect, I think, makes sense for disabled options. For aria-disabled maybe it doesn't?

Yes that's a good point. For sighted keyboard users it does make sense for there to be a background change when an aria-disabled option is highlighted 👍

One small tweak to the mockup above, we might apply cursor: default to the disabled option, to further illustrate the option is not selectable to mouse users. This matches disabled buttons.

[retrofox]

One small tweak to the mockup above, we might apply cursor: default to the disabled option, to further illustrate the option is not selectable to mouse users. This matches disabled buttons.

The mouse pointer is not captured by my screenshots 😅 , but it looks similar to what you shared (believe me :-D ) , with an exception: The style is not applied to the disabled option when the mouse hovers. This is because it applies pointer-events: none;

[jameskoster]

This is because it applies pointer-events: none;

Oh is that necessary? I think I'd expect the hover and highlight (via keyboard) visuals to match.

I'm still seeing the solid blue background on disabled options:

For the disabled option background we could potentially use rgba(var(--wp-admin-theme-color--rgb), 0.04) which matches tertiary buttons.

[retrofox]

Oh is that necessary? I think I'd expect the hover and highlight (via keyboard) visuals to match.

This approach, in my view, is not just good but possibly the best way to handle the disabled state. It's a change proposed by our development team and is also a prevalent practice in other libraries like Ariaakit.

I'm still seeing the solid blue background on disabled options: For the disabled option background we could potentially use rgba(var(--wp-admin-theme-color--rgb), 0.04) which matches tertiary buttons.

👍

[retrofox]

item selected	disabled item focused

[retrofox]

Seems in a good spot to me :)

Thanks for your help. Super valuable. Let's wait for the other 👍s!

[retrofox]

Seems in a good spot to me :)

Same :-D Merging...