chore: update react-aria-components to v1.4.1 (#4227)

* chore(deps): update react-aria

* fix tests

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

packages/components/package.json

@@ -27,25 +27,25 @@
     "@marigold/icons": "workspace:*",
     "@marigold/system": "workspace:*",
     "@marigold/types": "workspace:*",
-    "@react-aria/accordion": "3.0.0-alpha.34",
-    "@react-aria/button": "3.10.0",
-    "@react-aria/calendar": "3.5.12",
-    "@react-aria/focus": "3.18.3",
+    "@react-aria/accordion": "3.0.0-alpha.35",
+    "@react-aria/button": "3.10.1",
+    "@react-aria/calendar": "3.5.13",
+    "@react-aria/focus": "3.18.4",
     "@react-aria/i18n": "3.12.3",
-    "@react-aria/interactions": "3.22.3",
-    "@react-aria/overlays": "3.23.3",
-    "@react-aria/selection": "3.20.0",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/selection": "3.20.1",
     "@react-aria/ssr": "3.9.6",
-    "@react-aria/table": "3.15.4",
+    "@react-aria/table": "3.15.5",
     "@react-aria/utils": "3.25.3",
-    "@react-aria/visually-hidden": "3.8.16",
+    "@react-aria/visually-hidden": "3.8.17",
     "@react-stately/collections": "3.11.0",
     "@react-stately/data": "3.11.7",
     "@react-stately/table": "3.12.3",
     "@react-stately/tree": "3.8.5",
     "@react-types/shared": "3.25.0",
     "@react-types/table": "3.10.2",
-    "react-aria-components": "1.4.0"
+    "react-aria-components": "1.4.1"
   },
   "peerDependencies": {
     "react": "18.x",

packages/components/src/Checkbox/CheckboxGroup.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Theme, cva } from '@marigold/system';
 import { FieldGroup } from '../FieldBase';
 import { setup } from '../test.utils';
@@ -38,6 +39,7 @@ const theme: Theme = {
 };
 
 const { render } = setup({ theme });
+const user = userEvent.setup();
 
 test('renders label and group of checkboxes', () => {
   render(
@@ -97,10 +99,9 @@ test('passes down "disabled" to checkboxes', () => {
     </Checkbox.Group>
   );
 
-  // Bug in `react-aria-components` props are spread on input AND label...
-  expect(screen.getAllByTestId('one')[1]).toBeDisabled();
-  expect(screen.getAllByTestId('two')[1]).toBeDisabled();
-  expect(screen.getAllByTestId('three')[1]).toBeDisabled();
+  expect(screen.getByTestId('one')!.querySelector('input')).toBeDisabled();
+  expect(screen.getByTestId('two')!.querySelector('input')).toBeDisabled();
+  expect(screen.getByTestId('three')!.querySelector('input')).toBeDisabled();
 });
 
 test('passes down "read-only" to checkboxes', () => {
@@ -118,16 +119,15 @@ test('passes down "read-only" to checkboxes', () => {
     </Checkbox.Group>
   );
 
-  // Bug in `react-aria-components` props are spread on input AND label...
-  expect(screen.getAllByTestId('one')[1]).toHaveAttribute(
+  expect(screen.getByTestId('one')!.querySelector('input')).toHaveAttribute(
     'aria-readonly',
     'true'
   );
-  expect(screen.getAllByTestId('two')[1]).toHaveAttribute(
+  expect(screen.getByTestId('two')!.querySelector('input')).toHaveAttribute(
     'aria-readonly',
     'true'
   );
-  expect(screen.getAllByTestId('three')[1]).toHaveAttribute(
+  expect(screen.getByTestId('three')!.querySelector('input')).toHaveAttribute(
     'aria-readonly',
     'true'
   );
@@ -149,21 +149,21 @@ test('passes down "error" to checkboxes', () => {
   );
 
   // Bug in `react-aria-components` props are spread on input AND label...
-  expect(screen.getAllByTestId('one')[1]).toHaveAttribute(
+  expect(screen.getByTestId('one')!.querySelector('input')).toHaveAttribute(
     'aria-invalid',
     'true'
   );
-  expect(screen.getAllByTestId('two')[1]).toHaveAttribute(
+  expect(screen.getByTestId('two')!.querySelector('input')).toHaveAttribute(
     'aria-invalid',
     'true'
   );
-  expect(screen.getAllByTestId('three')[1]).toHaveAttribute(
+  expect(screen.getByTestId('three')!.querySelector('input')).toHaveAttribute(
     'aria-invalid',
     'true'
   );
 });
 
-test('controlled', () => {
+test('controlled', async () => {
   const onChange = jest.fn();
   render(
     <Checkbox.Group label="Group of Checkboxes" onChange={onChange}>
@@ -179,16 +179,16 @@ test('controlled', () => {
     </Checkbox.Group>
   );
 
-  fireEvent.click(screen.getAllByTestId('one')[1]);
+  await user.click(screen.getByTestId('one'));
   expect(onChange).toHaveBeenCalledWith(['one']);
 
-  fireEvent.click(screen.getAllByTestId('three')[1]);
+  await user.click(screen.getByTestId('three'));
   expect(onChange).toHaveBeenCalledWith(['one', 'three']);
 
-  fireEvent.click(screen.getAllByTestId('two')[1]);
+  await user.click(screen.getByTestId('two'));
   expect(onChange).toHaveBeenCalledWith(['one', 'three', 'two']);
 
-  fireEvent.click(screen.getAllByTestId('three')[1]);
+  await user.click(screen.getByTestId('three'));
   expect(onChange).toHaveBeenCalledWith(['one', 'two']);
 });