diff --git a/package-lock.json b/package-lock.json index 6680025d768bef..4d4f63fee046de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -86,7 +86,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.4.0", "@babel/core": "7.24.3", "@babel/plugin-proposal-export-namespace-from": "7.18.9", "@babel/plugin-syntax-jsx": "7.24.1", @@ -1527,55 +1527,25 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@ariakit/core": { - "version": "0.3.10", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.10.tgz", - "integrity": "sha512-AcN+GSoVXuUOzKx5d3xPL3YsEHevh4PIO6QIt/mg/nRX1XQ6cvxQEiAjO/BJQm+/MVl7/VbuGBoTFjr0tPU6NQ==" - }, - "node_modules/@ariakit/react": { - "version": "0.3.12", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.12.tgz", - "integrity": "sha512-HxKMZZhWSkwwS/Sh9OdWyuNKQ2tjDAIQIy2KVI7IRa8ZQ6ze/4g3YLUHbfCxO7oDupXHfXaeZ4hWx8lP7l1U/g==", - "dependencies": { - "@ariakit/react-core": "0.3.12" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/ariakit" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, - "node_modules/@ariakit/react-core": { - "version": "0.3.12", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.12.tgz", - "integrity": "sha512-w6P1A7TYb1fKUe9QbwaoTOWofl13g7TEuXdV4JyefJCQL1e9HQdEw9UL67I8aXRo8/cFHH94/z0N37t8hw5Ogg==", - "dependencies": { - "@ariakit/core": "0.3.10", - "@floating-ui/dom": "^1.0.0", - "use-sync-external-store": "^1.2.0" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, "node_modules/@ariakit/test": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.3.7.tgz", - "integrity": "sha512-rOa9pJA0ZfPPSI4SkDX41CsBcvxs6BmxgzFEElZWZo/uBBqtnr8ZL4oe5HySeZKEAHRH86XDqfxFISkhV76m5g==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.0.tgz", + "integrity": "sha512-AcrppK61/AbsMDyDS3AxY3WXI6fcL+WedNpJm44Qx603dVYkS/potk0PrD1MfdC6aRt+2bRRj0n9dLN5lVMtbg==", "dev": true, + "license": "MIT", "dependencies": { - "@ariakit/core": "0.3.10", - "@testing-library/dom": "^8.0.0 || ^9.0.0" + "@ariakit/core": "0.4.7", + "@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0" }, "peerDependencies": { - "@testing-library/react": "^12.0.0 || ^13.0.0 || ^14.0.0", - "react": "^17.0.0 || ^18.0.0" + "@playwright/test": "^1.27.0", + "@testing-library/react": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { + "@playwright/test": { + "optional": true + }, "@testing-library/react": { "optional": true }, @@ -1584,6 +1554,12 @@ } } }, + "node_modules/@ariakit/test/node_modules/@ariakit/core": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz", + "integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==", + "dev": true + }, "node_modules/@aw-web-design/x-default-browser": { "version": "1.4.126", "resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz", @@ -52645,7 +52621,7 @@ "version": "28.4.0", "license": "GPL-2.0-or-later", "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", @@ -52701,6 +52677,41 @@ "react-dom": "^18.0.0" } }, + "packages/components/node_modules/@ariakit/core": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz", + "integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==" + }, + "packages/components/node_modules/@ariakit/react": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz", + "integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==", + "dependencies": { + "@ariakit/react-core": "0.4.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ariakit" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "packages/components/node_modules/@ariakit/react-core": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz", + "integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==", + "dependencies": { + "@ariakit/core": "0.4.7", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "packages/components/node_modules/@floating-ui/react-dom": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", @@ -52969,7 +52980,7 @@ "version": "4.0.0", "license": "GPL-2.0-or-later", "dependencies": { - "@ariakit/react": "^0.3.12", + "@ariakit/react": "^0.4.7", "@babel/runtime": "^7.16.0", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", @@ -52991,38 +53002,38 @@ } }, "packages/dataviews/node_modules/@ariakit/core": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.1.tgz", - "integrity": "sha512-Rdhw0/K0x+50gFvzuMW9wp+WJxpkrgiMgegRTOZSU92bv1K+6XfQWnlieIkLt2FC7pZGrDpGlS4C7ztEVF+JRg==" + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz", + "integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==" }, "packages/dataviews/node_modules/@ariakit/react": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.1.tgz", - "integrity": "sha512-hKfCYjc3MFW20kn2dcvejB5zbYt/uU33Teq82c414/utf5sEoeRF+bxjNku8x1baJby9/SDP6zj2IgWPuedFNA==", + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz", + "integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==", "dependencies": { - "@ariakit/react-core": "0.4.1" + "@ariakit/react-core": "0.4.7" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/ariakit" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "packages/dataviews/node_modules/@ariakit/react-core": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.1.tgz", - "integrity": "sha512-cwDczl9XWBloXNg0CuHmJtBfEe7qF265JE0Pwlcp8wMSY9PsJeb0mKBlTygUPKn/FsKpKGaYSI7DlDntbcZciw==", + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz", + "integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==", "dependencies": { - "@ariakit/core": "0.4.1", + "@ariakit/core": "0.4.7", "@floating-ui/dom": "^1.0.0", "use-sync-external-store": "^1.2.0" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "packages/date": { @@ -56146,37 +56157,22 @@ } } }, - "@ariakit/core": { - "version": "0.3.10", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.10.tgz", - "integrity": "sha512-AcN+GSoVXuUOzKx5d3xPL3YsEHevh4PIO6QIt/mg/nRX1XQ6cvxQEiAjO/BJQm+/MVl7/VbuGBoTFjr0tPU6NQ==" - }, - "@ariakit/react": { - "version": "0.3.12", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.12.tgz", - "integrity": "sha512-HxKMZZhWSkwwS/Sh9OdWyuNKQ2tjDAIQIy2KVI7IRa8ZQ6ze/4g3YLUHbfCxO7oDupXHfXaeZ4hWx8lP7l1U/g==", - "requires": { - "@ariakit/react-core": "0.3.12" - } - }, - "@ariakit/react-core": { - "version": "0.3.12", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.12.tgz", - "integrity": "sha512-w6P1A7TYb1fKUe9QbwaoTOWofl13g7TEuXdV4JyefJCQL1e9HQdEw9UL67I8aXRo8/cFHH94/z0N37t8hw5Ogg==", - "requires": { - "@ariakit/core": "0.3.10", - "@floating-ui/dom": "^1.0.0", - "use-sync-external-store": "^1.2.0" - } - }, "@ariakit/test": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.3.7.tgz", - "integrity": "sha512-rOa9pJA0ZfPPSI4SkDX41CsBcvxs6BmxgzFEElZWZo/uBBqtnr8ZL4oe5HySeZKEAHRH86XDqfxFISkhV76m5g==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.0.tgz", + "integrity": "sha512-AcrppK61/AbsMDyDS3AxY3WXI6fcL+WedNpJm44Qx603dVYkS/potk0PrD1MfdC6aRt+2bRRj0n9dLN5lVMtbg==", "dev": true, "requires": { - "@ariakit/core": "0.3.10", - "@testing-library/dom": "^8.0.0 || ^9.0.0" + "@ariakit/core": "0.4.7", + "@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0" + }, + "dependencies": { + "@ariakit/core": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz", + "integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==", + "dev": true + } } }, "@aw-web-design/x-default-browser": { @@ -67524,7 +67520,7 @@ "@wordpress/components": { "version": "file:packages/components", "requires": { - "@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", @@ -67572,6 +67568,29 @@ "uuid": "^9.0.1" }, "dependencies": { + "@ariakit/core": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz", + "integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==" + }, + "@ariakit/react": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz", + "integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==", + "requires": { + "@ariakit/react-core": "0.4.7" + } + }, + "@ariakit/react-core": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz", + "integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==", + "requires": { + "@ariakit/core": "0.4.7", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + } + }, "@floating-ui/react-dom": { "version": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==", @@ -67757,7 +67776,7 @@ "@wordpress/dataviews": { "version": "file:packages/dataviews", "requires": { - "@ariakit/react": "^0.3.12", + "@ariakit/react": "^0.4.7", "@babel/runtime": "^7.16.0", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", @@ -67772,23 +67791,24 @@ }, "dependencies": { "@ariakit/core": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.1.tgz", - "integrity": "sha512-Rdhw0/K0x+50gFvzuMW9wp+WJxpkrgiMgegRTOZSU92bv1K+6XfQWnlieIkLt2FC7pZGrDpGlS4C7ztEVF+JRg==" + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz", + "integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==" }, "@ariakit/react": { - "version": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.1.tgz", - "integrity": "sha512-hKfCYjc3MFW20kn2dcvejB5zbYt/uU33Teq82c414/utf5sEoeRF+bxjNku8x1baJby9/SDP6zj2IgWPuedFNA==", + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz", + "integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==", "requires": { - "@ariakit/react-core": "0.4.1" + "@ariakit/react-core": "0.4.7" } }, "@ariakit/react-core": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.1.tgz", - "integrity": "sha512-cwDczl9XWBloXNg0CuHmJtBfEe7qF265JE0Pwlcp8wMSY9PsJeb0mKBlTygUPKn/FsKpKGaYSI7DlDntbcZciw==", + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz", + "integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==", "requires": { - "@ariakit/core": "0.4.1", + "@ariakit/core": "0.4.7", "@floating-ui/dom": "^1.0.0", "use-sync-external-store": "^1.2.0" } diff --git a/package.json b/package.json index 412ff34b91d8c1..4ca360f7e8753e 100644 --- a/package.json +++ b/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.4.0", "@babel/core": "7.24.3", "@babel/plugin-proposal-export-namespace-from": "7.18.9", "@babel/plugin-syntax-jsx": "7.24.1", diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index bd9175782a224a..3c4cef664a3103 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/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);" diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js index 0bda16071ef99b..19640d41daeb35 100644 --- a/packages/block-editor/src/components/colors-gradients/test/control.js +++ b/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( () =>
); @@ -73,12 +73,10 @@ describe( 'Button', () => { } ); it( 'should render a button element with has-text when children are passed', async () => { - const user = userEvent.setup(); - render( ); // Move focus to the button - await user.tab(); + await press.Tab(); expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' ); } ); @@ -113,8 +111,6 @@ describe( 'Button', () => { } ); it( 'should render correctly as a tooltip anchor', async () => { - const user = userEvent.setup(); - render( <> @@ -128,7 +124,7 @@ describe( 'Button', () => { name: 'Tooltip anchor', } ); - await user.tab(); + await press.Tab(); expect( anchor ).toHaveFocus(); @@ -138,7 +134,7 @@ describe( 'Button', () => { expect( tooltip ).toBeVisible(); - await user.tab(); + await press.Tab(); expect( screen.getByRole( 'button', { name: 'Focus me' } ) @@ -152,8 +148,6 @@ describe( 'Button', () => { } ); it( 'should render correctly as a tooltip anchor, ignoring its internal tooltip in favour of the external tooltip', async () => { - const user = userEvent.setup(); - render( <> @@ -167,7 +161,7 @@ describe( 'Button', () => { name: 'Button label', } ); - await user.tab(); + await press.Tab(); expect( anchor ).toHaveFocus(); @@ -184,7 +178,7 @@ describe( 'Button', () => { } ) ).not.toBeInTheDocument(); - await user.tab(); + await press.Tab(); expect( screen.getByRole( 'button', { name: 'Focus me' } ) @@ -198,8 +192,6 @@ describe( 'Button', () => { } ); it( 'should not trash the rendered HTML elements when toggling between showing and not showing a tooltip', async () => { - const user = userEvent.setup(); - const { rerender } = render( ); @@ -210,7 +202,7 @@ describe( 'Button', () => { expect( button ).toBeVisible(); - await user.tab(); + await press.Tab(); expect( button ).toHaveFocus(); @@ -307,14 +299,12 @@ describe( 'Button', () => { } ); it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => { - const user = userEvent.setup(); - render( { ); expect( await getSelectedTab() ).toHaveFocus(); - rerender( + await rerender( <> { describe( 'When `selectOnMove` is `true`', () => { it( 'should automatically select a newly focused tab', async () => { - render( ); + await render( + + ); await sleep(); await press.Tab(); @@ -1361,7 +1368,7 @@ describe( 'Tabs', () => { } ); describe( 'When `selectOnMove` is `false`', () => { it( 'should apply focus without automatically changing the selected tab', async () => { - render( + await render( { it( 'should associate each `Tab` with the correct `TabPanel`, even if they are not rendered in the same order', async () => { const TABS_WITH_DELTA_REVERSED = [ ...TABS_WITH_DELTA ].reverse(); - render( + await render( { TABS_WITH_DELTA.map( ( tabObj ) => ( diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index 908e15927e3b86..81afc7ac67b05f 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -258,7 +258,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = aria-checked="true" aria-label="Uppercase" class="emotion-12 components-toggle-group-control-option-base" - data-active-item="" + data-active-item="true" data-value="uppercase" data-wp-c16t="true" data-wp-component="ToggleGroupControlOptionBase" @@ -818,7 +818,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] aria-checked="true" aria-label="Uppercase" class="emotion-12 components-toggle-group-control-option-base" - data-active-item="" + data-active-item="true" data-value="uppercase" data-wp-c16t="true" data-wp-component="ToggleGroupControlOptionBase" diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx index 1b6285a4ac09c4..e832119393282a 100644 --- a/packages/components/src/tooltip/index.tsx +++ b/packages/components/src/tooltip/index.tsx @@ -13,6 +13,7 @@ import { useContext, createContext, forwardRef, + cloneElement, } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; @@ -92,6 +93,7 @@ function UnforwardedTooltip( placement: computedPlacement, showTimeout: delay, } ); + const mounted = tooltipStore.useState( 'mounted' ); if ( isNestedInTooltip ) { return isOnlyChild ? ( @@ -101,12 +103,24 @@ function UnforwardedTooltip( ); } + // TODO: this is a temporary workaround to minimize the effects of the + // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to + // the tooltip anchor anymore since 0.4.0, so we need to add it manually. + // See: https://github.com/WordPress/gutenberg/pull/64066 + function addDescribedById( element: React.ReactElement ) { + return describedById && mounted + ? cloneElement( element, { 'aria-describedby': describedById } ) + : element; + } + return ( { isOnlyChild ? undefined : children } @@ -135,7 +149,6 @@ function UnforwardedTooltip( ); } - export const Tooltip = forwardRef( UnforwardedTooltip ); export default Tooltip; diff --git a/packages/components/src/tooltip/test/utils/index.tsx b/packages/components/src/tooltip/test/utils/index.tsx index 01b0931c1a7900..1e32a10f71bd20 100644 --- a/packages/components/src/tooltip/test/utils/index.tsx +++ b/packages/components/src/tooltip/test/utils/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { UserEvent } from '@testing-library/user-event/dist/types/setup/setup'; +import { click, press } from '@ariakit/test'; // TODO: may need to be tested with Playwright; further context: // https://github.com/WordPress/gutenberg/pull/52133#issuecomment-1613691258 @@ -13,8 +13,8 @@ import type { UserEvent } from '@testing-library/user-event/dist/types/setup/set * to avoid leaking into other tests * */ -export default async function cleanupTooltip( user: UserEvent ) { - await user.tab(); - await user.tab(); - await user.click( document.body ); +export default async function cleanupTooltip() { + await press.Tab(); + await press.Tab(); + await click( document.body ); } diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 2fc569b44f634c..881d666aa0613b 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,20 +2,24 @@ ## Unreleased +## Internal + +- Upgraded `@ariakit/react` (v0.4.7) ([#64066](https://github.com/WordPress/gutenberg/pull/64066)). + ## 4.0.0 (2024-07-24) ### Breaking Changes -- `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids. -- `setSelection` prop has been removed. Please use `onChangeSelection` instead. -- `header` field property has been renamed to `label`. +- `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids. +- `setSelection` prop has been removed. Please use `onChangeSelection` instead. +- `header` field property has been renamed to `label`. ## 3.0.0 (2024-07-10) ### Breaking Changes -- Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead. -- Replace the `supportedLayouts` prop in the `DataViews` component with a `defaultLayouts` prop that accepts an object whose keys are the layout names and values are the default view objects for these layouts. +- Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead. +- Replace the `supportedLayouts` prop in the `DataViews` component with a `defaultLayouts` prop that accepts an object whose keys are the layout names and values are the default view objects for these layouts. ### New features diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index 238e2bdd5be8bc..d95192957a1a43 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -28,7 +28,7 @@ "types": "build-types", "sideEffects": false, "dependencies": { - "@ariakit/react": "^0.3.12", + "@ariakit/react": "^0.4.7", "@babel/runtime": "^7.16.0", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose",