Components: upgrade Ariakit to latest

[DaniGuardiola]

Moved over from personal repo, see original PR: #60992

Went through all breaking changes in all relevant versions. Only 0.4.0 had breaking changes (it's a "pseudo-major", so it makes sense). Here's a summary of those changes, TL;DR it doesn't seem like we need to do anything about them, and we just need to test enough to be confident in the upgrade.

Change	Notes
Improved animation support	n/a
ComboboxList is no longer focusable	Only instance is packages/dataviews/src/search-widget.tsx, unaffected.
Composite widgets with grid role	Inspected all instances, unaffected.
Radio types have improved	Inspected all instances, unaffected.
Public data attributes have now boolean values	Inspected all instances, unaffected.
Removed deprecated features	All mentioned breakages would cause type errors.

There is another change not considered "breaking" by Ariakit, but it deserves consideration:

Previously, Ariakit added aria-describedBy to tooltip anchors. Now, it doesn't, and users are responsible for making anchors accessible, see: https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names

---

Update 1 - Initial state of tests as of v0.3.13 (79fa2887735afe2dc8a30a85284242ccf74e182d):

After turning a couple of getByRole into await findByRole (179f3746d2ea603a565e38ab85ba653194a69578):

(sometimes it fails on 16 tests, not sure which one yet)

---

Remaining work:

• [ ] Look into the failing test cases, find causes, apply appropriate solutions.
• [ ] Smoke test.

[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: DaniGuardiola <[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: +2.82 kB (+0.16%)

Total Size: 1.76 MB

Filename	Size	Change
build/components/index.min.js	223 kB	+1.73 kB (+0.78%)
build/edit-site/index.min.js	214 kB	+1.09 kB (+0.51%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	951 B
build/annotations/index.min.js	2.26 kB
build/api-fetch/index.min.js	2.31 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.29 kB
build/block-directory/style-rtl.css	1.01 kB
build/block-directory/style.css	1.01 kB
build/block-editor/content-rtl.css	4.59 kB
build/block-editor/content.css	4.59 kB
build/block-editor/default-editor-styles-rtl.css	394 B
build/block-editor/default-editor-styles.css	394 B
build/block-editor/index.min.js	254 kB
build/block-editor/style-rtl.css	16.2 kB
build/block-editor/style.css	16.2 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	149 B
build/block-library/blocks/audio/editor.css	151 B
build/block-library/blocks/audio/style-rtl.css	132 B
build/block-library/blocks/audio/style.css	132 B
build/block-library/blocks/audio/theme-rtl.css	134 B
build/block-library/blocks/audio/theme.css	134 B
build/block-library/blocks/avatar/editor-rtl.css	115 B
build/block-library/blocks/avatar/editor.css	115 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/button/editor-rtl.css	310 B
build/block-library/blocks/button/editor.css	310 B
build/block-library/blocks/button/style-rtl.css	538 B
build/block-library/blocks/button/style.css	538 B
build/block-library/blocks/buttons/editor-rtl.css	336 B
build/block-library/blocks/buttons/editor.css	336 B
build/block-library/blocks/buttons/style-rtl.css	328 B
build/block-library/blocks/buttons/style.css	328 B
build/block-library/blocks/calendar/style-rtl.css	240 B
build/block-library/blocks/calendar/style.css	240 B
build/block-library/blocks/categories/editor-rtl.css	132 B
build/block-library/blocks/categories/editor.css	131 B
build/block-library/blocks/categories/style-rtl.css	152 B
build/block-library/blocks/categories/style.css	152 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	122 B
build/block-library/blocks/code/theme.css	122 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	420 B
build/block-library/blocks/columns/style.css	420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	124 B
build/block-library/blocks/comment-author-avatar/editor.css	124 B
build/block-library/blocks/comment-content/style-rtl.css	90 B
build/block-library/blocks/comment-content/style.css	90 B
build/block-library/blocks/comment-template/style-rtl.css	200 B
build/block-library/blocks/comment-template/style.css	199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	221 B
build/block-library/blocks/comments-pagination/editor.css	211 B
build/block-library/blocks/comments-pagination/style-rtl.css	234 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	832 B
build/block-library/blocks/comments/editor.css	832 B
build/block-library/blocks/comments/style-rtl.css	632 B
build/block-library/blocks/comments/style.css	631 B
build/block-library/blocks/cover/editor-rtl.css	668 B
build/block-library/blocks/cover/editor.css	669 B
build/block-library/blocks/cover/style-rtl.css	1.62 kB
build/block-library/blocks/cover/style.css	1.6 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	314 B
build/block-library/blocks/embed/editor.css	314 B
build/block-library/blocks/embed/style-rtl.css	419 B
build/block-library/blocks/embed/style.css	419 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	326 B
build/block-library/blocks/file/style-rtl.css	278 B
build/block-library/blocks/file/style.css	279 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	198 B
build/block-library/blocks/footnotes/style.css	197 B
build/block-library/blocks/form-input/editor-rtl.css	229 B
build/block-library/blocks/form-input/editor.css	229 B
build/block-library/blocks/form-input/style-rtl.css	342 B
build/block-library/blocks/form-input/style.css	342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	344 B
build/block-library/blocks/form-submission-notification/editor.css	341 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	470 B
build/block-library/blocks/freeform/editor-rtl.css	2.6 kB
build/block-library/blocks/freeform/editor.css	2.6 kB
build/block-library/blocks/gallery/editor-rtl.css	958 B
build/block-library/blocks/gallery/editor.css	962 B
build/block-library/blocks/gallery/style-rtl.css	1.71 kB
build/block-library/blocks/gallery/style.css	1.71 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	402 B
build/block-library/blocks/group/editor.css	402 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	79 B
build/block-library/blocks/group/theme.css	79 B
build/block-library/blocks/heading/style-rtl.css	188 B
build/block-library/blocks/heading/style.css	188 B
build/block-library/blocks/html/editor-rtl.css	346 B
build/block-library/blocks/html/editor.css	347 B
build/block-library/blocks/image/editor-rtl.css	862 B
build/block-library/blocks/image/editor.css	861 B
build/block-library/blocks/image/style-rtl.css	1.59 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
build/block-library/blocks/image/view.min.js	1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css	355 B
build/block-library/blocks/latest-comments/style.css	354 B
build/block-library/blocks/latest-posts/editor-rtl.css	204 B
build/block-library/blocks/latest-posts/editor.css	204 B
build/block-library/blocks/latest-posts/style-rtl.css	509 B
build/block-library/blocks/latest-posts/style.css	510 B
build/block-library/blocks/list/style-rtl.css	107 B
build/block-library/blocks/list/style.css	107 B
build/block-library/blocks/media-text/editor-rtl.css	304 B
build/block-library/blocks/media-text/editor.css	303 B
build/block-library/blocks/media-text/style-rtl.css	516 B
build/block-library/blocks/media-text/style.css	515 B
build/block-library/blocks/more/editor-rtl.css	427 B
build/block-library/blocks/more/editor.css	427 B
build/block-library/blocks/navigation-link/editor-rtl.css	663 B
build/block-library/blocks/navigation-link/editor.css	664 B
build/block-library/blocks/navigation-link/style-rtl.css	192 B
build/block-library/blocks/navigation-link/style.css	191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	295 B
build/block-library/blocks/navigation-submenu/editor.css	294 B
build/block-library/blocks/navigation/editor-rtl.css	2.2 kB
build/block-library/blocks/navigation/editor.css	2.21 kB
build/block-library/blocks/navigation/style-rtl.css	2.25 kB
build/block-library/blocks/navigation/style.css	2.23 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	392 B
build/block-library/blocks/nextpage/editor.css	392 B
build/block-library/blocks/page-list/editor-rtl.css	378 B
build/block-library/blocks/page-list/editor.css	378 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	236 B
build/block-library/blocks/paragraph/editor.css	236 B
build/block-library/blocks/paragraph/style-rtl.css	341 B
build/block-library/blocks/paragraph/style.css	340 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	527 B
build/block-library/blocks/post-comments-form/style.css	528 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	62 B
build/block-library/blocks/post-date/style.css	62 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	729 B
build/block-library/blocks/post-featured-image/editor.css	726 B
build/block-library/blocks/post-featured-image/style-rtl.css	341 B
build/block-library/blocks/post-featured-image/style.css	341 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	399 B
build/block-library/blocks/post-template/style.css	398 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	70 B
build/block-library/blocks/post-time-to-read/style.css	70 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	134 B
build/block-library/blocks/pullquote/editor.css	134 B
build/block-library/blocks/pullquote/style-rtl.css	342 B
build/block-library/blocks/pullquote/style.css	342 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	121 B
build/block-library/blocks/query-pagination-numbers/editor.css	118 B
build/block-library/blocks/query-pagination/editor-rtl.css	220 B
build/block-library/blocks/query-pagination/editor.css	208 B
build/block-library/blocks/query-pagination/style-rtl.css	287 B
build/block-library/blocks/query-pagination/style.css	283 B
build/block-library/blocks/query-title/style-rtl.css	64 B
build/block-library/blocks/query-title/style.css	64 B
build/block-library/blocks/query/editor-rtl.css	452 B
build/block-library/blocks/query/editor.css	451 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	238 B
build/block-library/blocks/quote/style.css	238 B
build/block-library/blocks/quote/theme-rtl.css	221 B
build/block-library/blocks/quote/theme.css	225 B
build/block-library/blocks/read-more/style-rtl.css	138 B
build/block-library/blocks/read-more/style.css	138 B
build/block-library/blocks/rss/editor-rtl.css	101 B
build/block-library/blocks/rss/editor.css	101 B
build/block-library/blocks/rss/style-rtl.css	288 B
build/block-library/blocks/rss/style.css	287 B
build/block-library/blocks/search/editor-rtl.css	193 B
build/block-library/blocks/search/editor.css	193 B
build/block-library/blocks/search/style-rtl.css	672 B
build/block-library/blocks/search/style.css	671 B
build/block-library/blocks/search/theme-rtl.css	113 B
build/block-library/blocks/search/theme.css	113 B
build/block-library/blocks/search/view.min.js	475 B
build/block-library/blocks/separator/editor-rtl.css	100 B
build/block-library/blocks/separator/editor.css	100 B
build/block-library/blocks/separator/style-rtl.css	248 B
build/block-library/blocks/separator/style.css	248 B
build/block-library/blocks/separator/theme-rtl.css	195 B
build/block-library/blocks/separator/theme.css	195 B
build/block-library/blocks/shortcode/editor-rtl.css	286 B
build/block-library/blocks/shortcode/editor.css	286 B
build/block-library/blocks/site-logo/editor-rtl.css	806 B
build/block-library/blocks/site-logo/editor.css	803 B
build/block-library/blocks/site-logo/style-rtl.css	218 B
build/block-library/blocks/site-logo/style.css	218 B
build/block-library/blocks/site-tagline/editor-rtl.css	87 B
build/block-library/blocks/site-tagline/editor.css	87 B
build/block-library/blocks/site-title/editor-rtl.css	123 B
build/block-library/blocks/site-title/editor.css	123 B
build/block-library/blocks/site-title/style-rtl.css	71 B
build/block-library/blocks/site-title/style.css	71 B
build/block-library/blocks/social-link/editor-rtl.css	338 B
build/block-library/blocks/social-link/editor.css	338 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.51 kB
build/block-library/blocks/social-links/style.css	1.5 kB
build/block-library/blocks/spacer/editor-rtl.css	346 B
build/block-library/blocks/spacer/editor.css	346 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	394 B
build/block-library/blocks/table/editor.css	394 B
build/block-library/blocks/table/style-rtl.css	640 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/editor-rtl.css	63 B
build/block-library/blocks/tag-cloud/editor.css	63 B
build/block-library/blocks/tag-cloud/style-rtl.css	266 B
build/block-library/blocks/tag-cloud/style.css	265 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	113 B
build/block-library/blocks/template-part/theme.css	113 B
build/block-library/blocks/term-description/style-rtl.css	126 B
build/block-library/blocks/term-description/style.css	126 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	165 B
build/block-library/blocks/text-columns/style.css	165 B
build/block-library/blocks/verse/style-rtl.css	98 B
build/block-library/blocks/verse/style.css	98 B
build/block-library/blocks/video/editor-rtl.css	553 B
build/block-library/blocks/video/editor.css	554 B
build/block-library/blocks/video/style-rtl.css	192 B
build/block-library/blocks/video/style.css	192 B
build/block-library/blocks/video/theme-rtl.css	134 B
build/block-library/blocks/video/theme.css	134 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	11.9 kB
build/block-library/editor.css	11.9 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	216 kB
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.7 kB
build/block-library/style.css	14.6 kB
build/block-library/theme-rtl.css	702 B
build/block-library/theme.css	707 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	52.3 kB
build/commands/index.min.js	16.1 kB
build/commands/style-rtl.css	955 B
build/commands/style.css	952 B
build/components/style-rtl.css	12 kB
build/components/style.css	12 kB
build/compose/index.min.js	12.9 kB
build/core-commands/index.min.js	2.81 kB
build/core-data/index.min.js	73 kB
build/customize-widgets/index.min.js	11 kB
build/customize-widgets/style-rtl.css	1.35 kB
build/customize-widgets/style.css	1.35 kB
build/data-controls/index.min.js	641 B
build/data/index.min.js	8.98 kB
build/date/index.min.js	18 kB
build/deprecated/index.min.js	458 B
build/dom-ready/index.min.js	325 B
build/dom/index.min.js	4.65 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	580 B
build/edit-post/index.min.js	12.6 kB
build/edit-post/style-rtl.css	2.31 kB
build/edit-post/style.css	2.31 kB
build/edit-site/posts-rtl.css	6.8 kB
build/edit-site/posts.css	6.81 kB
build/edit-site/style-rtl.css	12 kB
build/edit-site/style.css	12 kB
build/edit-widgets/index.min.js	17.6 kB
build/edit-widgets/style-rtl.css	4.2 kB
build/edit-widgets/style.css	4.2 kB
build/editor/index.min.js	99.5 kB
build/editor/style-rtl.css	9.32 kB
build/editor/style.css	9.32 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	506 B
build/format-library/style.css	505 B
build/hooks/index.min.js	1.54 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
build/interactivity/debug.min.js	16.5 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.78 kB
build/interactivity/index.min.js	13.4 kB
build/interactivity/navigation.min.js	1.16 kB
build/interactivity/query.min.js	742 B
build/interactivity/router.min.js	2.8 kB
build/interactivity/search.min.js	615 B
build/is-shallow-equal/index.min.js	526 B
build/keyboard-shortcuts/index.min.js	1.31 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.16 kB
build/list-reusable-blocks/style-rtl.css	846 B
build/list-reusable-blocks/style.css	846 B
build/media-utils/index.min.js	2.92 kB
build/modules/importmap-polyfill.min.js	12.3 kB
build/notices/index.min.js	946 B
build/nux/index.min.js	1.59 kB
build/nux/style-rtl.css	749 B
build/nux/style.css	745 B
build/patterns/index.min.js	7.36 kB
build/patterns/style-rtl.css	687 B
build/patterns/style.css	685 B
build/plugins/index.min.js	1.81 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.9 kB
build/preferences/style-rtl.css	554 B
build/preferences/style.css	554 B
build/primitives/index.min.js	829 B
build/priority-queue/index.min.js	1.54 kB
build/private-apis/index.min.js	1.01 kB
build/react-i18n/index.min.js	630 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.76 kB
build/redux-routine/index.min.js	2.69 kB
build/reusable-blocks/index.min.js	2.54 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.96 kB
build/server-side-render/index.min.js	1.94 kB
build/shortcode/index.min.js	1.4 kB
build/style-engine/index.min.js	2.03 kB
build/token-list/index.min.js	581 B
build/url/index.min.js	3.85 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react-jsx-runtime.min.js	560 B
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	965 B
build/warning/index.min.js	250 B
build/widgets/index.min.js	7.19 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.03 kB

_{compressed-size-action}

[DaniGuardiola]

Since there are no evident breaking changes that affect us on changelog inspection, but we have many failing tests, I'm going to take another strategy. I will go version by version and addressing any errors step by step.

[DaniGuardiola]

Also ping @WordPress/gutenberg-components if you can take a look at failing tests in CI and see if anything rings a bell or if you have any ideas. Since you're more familiar with the code, you might be able to save me some research in some cases.

[github-actions[bot]]

Flaky tests detected in 49a959f55fd468fe29315b6833d9f02093f4301a. 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/10109063935 📝 Reported issues:

• #62434 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js

[ciampo]

Happy to pair on this one whenever you've got time to work on it

[tyxla]

Also ping @WordPress/gutenberg-components if you can take a look at failing tests in CI and see if anything rings a bell or if you have any ideas. Since you're more familiar with the code, you might be able to save me some research in some cases.

For some of the tests, it might be as easy as replacing the @testing-library/user-event library with @ariakit/test. For example, for the should populate tooltip with description content for buttons with visible labels (buttons with children) test, it works for me if I change:

await user.tab();

to:

import { press } from '@ariakit/test';
// ...
await press.Tab();

Note that historically when tabbing, we needed to do await sleep(); before tabbing to quick-solve some flaky testing behavior. Hopefully after the update this is no longer the case and we can remove all those await sleep(); instances.

[ciampo]

For some of the tests, it might be as easy as replacing the @testing-library/user-event library with @ariakit/test

That has definitely proven true for other ariakt-based components like Tabs and DropdownMenuV2 (cc @diegohaz )

[DaniGuardiola]

I have some unpushed fixes like that, let me push soon and I'll let y'all know so we can figure out any remaining cases.

[ciampo]

Flagging related conversation in https://github.com/WordPress/gutenberg/pull/63433#issuecomment-2222973211

[ciampo]

After a pairing session with @DaniGuardiola , we determined that the test failures caused by the act(...) warnings are caused at the ariakit level. We opened https://github.com/ariakit/ariakit/issues/3939

[diegohaz]

Quoting my comment from the other PR to ensure it doesn't get lost in the conversation:

Looks like most of the failing tests are due to a change on data-* attributes: Public data attributes have now boolean values

Also, tooltips no longer assign aria-labelledby/aria-describedby attributes: ariakit/ariakit#3318

Other failures appear to prompt act warnings, potentially indicating an internal change in sync/async stuff. Typically, replacing getBy with findBy, or waitFor a change on the screen before making an assertion resolves the problem. Alternatively, you can use @ariakit/test events, which may also be beneficial and prevent these warnings from recurring since it doesn't depend on act. More context: #54225 (comment)

[ciampo]

Also quoting this other suggestion from Diego:

With RTL, you will need to waitFor something in the DOM immediately after calling render.

In Ariakit, we use our own render utility from @ariakit/test/react, which is asynchronous and accounts for those timers.

[tyxla]

Also quoting this other suggestion from Diego:

With RTL, you will need to waitFor something in the DOM immediately after calling render. In Ariakit, we use our own render utility from @ariakit/test/react, which is asynchronous and accounts for those timers.

Have we tried this already, and whether it has an effect on the act failures?

Also, it looks like the branch is quite behind and needs to be rebased. Some of the failures are in the v1 CustomSelectControl tests, which are no longer in trunk.

[DaniGuardiola]

@tyxla unless I missed something, the branch was synced with trunk yesterday.

waitFor works in some instances; in others, it's a bit unclear what we should be waiting for that makes sense.

I'm also trying our render locally and it seems to work in a few instances I tested, with a few remaining things to look into (like re-renders).

[ciampo]

in others, it's a bit unclear what we should be waiting for that makes sense.

out of experience, we'd usually wait for some data- or aria- attribute added by ariakit that would signify that the internal state was initialised and applied to the DOM.

[tyxla]

in others, it's a bit unclear what we should be waiting for that makes sense.

out of experience, we'd usually wait for some data- or aria- attribute added by ariakit that would signify that the internal state was initialised and applied to the DOM.

This. Or historically it's been tabindex. Here's some prior art:

https://github.com/WordPress/gutenberg/blob/decaae66b0e4ca173b1bbb1ee7a059819074a918/packages/components/src/alignment-matrix-control/test/index.tsx#L20-L29

[ciampo]

Also adding a link to this convo that I found while reviewing old notifications — we should be able to remove that timer in the tooltip tests after updating to latest ariakit.

[DaniGuardiola]

@ciampo yep, already on my backlog as a follow-up to this, thanks!

[DaniGuardiola]

After investigation, it does NOT seem like the ariakit render utility supports rerenders properly: https://github.com/ariakit/ariakit/issues/3939#issuecomment-2251231903

Waiting on Diego to know if supporting re-renders is a possibility, since that'd help us fix tests where we depend on it.

[DaniGuardiola]

Update 5 (see description) is a breakthrough! With re-render support in my temporary fork of Ariakit's render, all tests so far have been fixed :)

Next up: apply the re-render API to other tests to see how far we can get with it.

[DaniGuardiola]

Gonna use the local fork for now, but I'm aiming to contribute this to upstream Ariakit so we don't depend on our local fork, see https://github.com/ariakit/ariakit/issues/3939#issuecomment-2251499387

[DaniGuardiola]

[DaniGuardiola]

See last update (update 8) - 0.4.0 version makes a bunch of tests fail.

[tyxla]

See last update (update 8) - 0.4.0 version makes a bunch of tests fail.

At a first glance, it seems like something changed with the ariakit test helpers like click, press, etc., where changes are not immediately reflected and our tests are not prepared for that change. A fix can be straightforward by providing the test some wait time where necessary.

For example, I've pushed 49a959f55fd468fe29315b6833d9f02093f4301a, which should resolve the CustomSelectControl test failures. Similar fixes should resolve many, if not most, of the failures.

[DaniGuardiola]

See update 9, I found the root causes to all test failures on v0.4.0 🎉

Edit: fixed now and all tests pass, see update 10.

[mirka]

All mentioned breakages would cause type errors.

Unfortunately a large portion of the Gutenberg app is not type checked 😅 (@wordpress/block-editor, @wordpress/edit-site, etc)

[DaniGuardiola]

@mirka good point. Fortunately, I think most of these features were not exposed by components in the first place (child render function, as prop, etc). With the quoted comment I was referring to the components package itself, which afaik is typed for the most part, at least in the parts where we interact with Ariakit.

That said, I will do another exhaustive pass to see if there's something missing in regards to this.

[DaniGuardiola]

Thanks @ciampo! I'm moving to https://github.com/WordPress/gutenberg/pull/64066 because it was better to start clean due to the annoying npm issue.

@WordPress/gutenberg-components this PR can still be useful to reference old information I left here, but I tried to make the new PR "complete enough" in terms of context needed to understand what's going on. I also ensured that CI unit tests ran completely for the versions with failures, so that we can check those logs if necessary and for the record. Plus the version-by-version commit history should help in future git bisects.

See you there!