Components: upgrade Ariakit to latest

package.json

@@ -98,7 +98,7 @@
 		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
 		"@apidevtools/json-schema-ref-parser": "11.6.4",
-		"@ariakit/test": "^0.3.7",
+		"@ariakit/test": "0.3.16",
 		"@babel/core": "7.24.3",
 		"@babel/plugin-proposal-export-namespace-from": "7.18.9",
 		"@babel/plugin-syntax-jsx": "7.24.1",

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -220,7 +220,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
-                          data-active-item=""
+                          data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"

packages/block-editor/src/components/colors-gradients/test/control.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		render(
+		await render(
 			<ColorGradientControl
 				label="Test Color Gradient"
 				colorValue="#f00"

packages/components/package.json

@@ -31,7 +31,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "0.4.7",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",

packages/components/src/composite/legacy/test/index.tsx

@@ -47,7 +47,7 @@ async function renderAndValidate( ...args: Parameters< typeof render > ) {
 		const activeButton = queryByAttribute(
 			'data-active-item',
 			view.baseElement,
-			''
+			'true'
 		);
 		expect( activeButton ).not.toBeNull();
 	} );