From 9f79d0f7cc2b28ac9c6d80ab21dcde37b306311d Mon Sep 17 00:00:00 2001 From: jmfrancois Date: Tue, 17 Oct 2023 09:52:52 +0200 Subject: [PATCH] test: add a11y test using jest.axe --- .../components/Accordion/Accordion.test.tsx | 2 - .../src/components/Badge/Badge.test.tsx | 52 ++++ .../Badge/__snapshots__/Badge.test.tsx.snap | 273 ++++++++++++++++++ .../components/Badge/button/BadgeButton.tsx | 2 +- .../Breadcrumbs/Breadcrumbs.test.tsx | 54 ++++ .../__snapshots__/Breadcrumbs.test.tsx.snap | 195 +++++++++++++ .../src/components/Button/Button.test.tsx | 34 +++ .../src/components/Button/Button.tsx | 4 +- .../Button/Primitive/ButtonPrimitive.tsx | 2 +- .../Button/__snapshots__/Button.test.tsx.snap | 132 +++++++++ .../src/components/Button/index.ts | 2 +- .../ButtonAsLink/ButtonAsLink.test.tsx | 34 +++ .../components/ButtonAsLink/ButtonAsLink.tsx | 4 +- .../__snapshots__/ButtonAsLink.test.tsx.snap | 75 +++++ .../src/components/ButtonAsLink/index.ts | 3 +- .../Primitive/ButtonIconPrimitive.tsx | 6 +- .../src/components/Card/Card.test.tsx | 19 ++ .../Card/__snapshots__/Card.test.tsx.snap | 26 ++ .../src/components/Clickable/Clickable.tsx | 3 +- .../components/Clickable/Clikable.test.tsx | 19 ++ .../__snapshots__/Clikable.test.tsx.snap | 14 + .../src/components/Clickable/index.ts | 5 +- .../src/components/Combobox/Combobox.test.tsx | 27 ++ .../__snapshots__/Combobox.test.tsx.snap | 34 +++ .../src/components/Divider/Divider.test.tsx | 34 +++ .../__snapshots__/Divider.test.tsx.snap | 31 ++ .../src/components/Dropdown/Dropdown.tsx | 23 +- .../Dropdown/Primitive/DropdownButton.tsx | 2 +- .../Dropdown/Primitive/DropdownShell.tsx | 2 +- .../Form/Affix/variations/AffixButton.tsx | 2 +- .../Field/Input/hooks/useRevealPassword.tsx | 2 +- .../components/LinkAsButton/LinkAsButton.tsx | 2 +- 32 files changed, 1084 insertions(+), 35 deletions(-) create mode 100644 packages/design-system/src/components/Badge/Badge.test.tsx create mode 100644 packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap create mode 100644 packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx create mode 100644 packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap create mode 100644 packages/design-system/src/components/Button/Button.test.tsx create mode 100644 packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap create mode 100644 packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx create mode 100644 packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap create mode 100644 packages/design-system/src/components/Card/Card.test.tsx create mode 100644 packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap create mode 100644 packages/design-system/src/components/Clickable/Clikable.test.tsx create mode 100644 packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap create mode 100644 packages/design-system/src/components/Combobox/Combobox.test.tsx create mode 100644 packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap create mode 100644 packages/design-system/src/components/Divider/Divider.test.tsx create mode 100644 packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap diff --git a/packages/design-system/src/components/Accordion/Accordion.test.tsx b/packages/design-system/src/components/Accordion/Accordion.test.tsx index 17ea1c60c88..4054c71c715 100644 --- a/packages/design-system/src/components/Accordion/Accordion.test.tsx +++ b/packages/design-system/src/components/Accordion/Accordion.test.tsx @@ -13,8 +13,6 @@ jest.mock('@talend/utils', () => { describe('Accordion', () => { it('should render a11y html', async () => { - // note we need to add the aria-label to be accessible - // TODO: make it required const { container } = render(
diff --git a/packages/design-system/src/components/Badge/Badge.test.tsx b/packages/design-system/src/components/Badge/Badge.test.tsx new file mode 100644 index 00000000000..ba54febe539 --- /dev/null +++ b/packages/design-system/src/components/Badge/Badge.test.tsx @@ -0,0 +1,52 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Badge, BadgeDropdown } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +describe('Badge', () => { + it('should render a11y html', async () => { + const selectedValue = '3'; + const setSelectedValue = jest.fn(); + const { container } = render( +
+
+ +
+
+ +
+ TODO: add popover and tag +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap b/packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap new file mode 100644 index 00000000000..764475d9b55 --- /dev/null +++ b/packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap @@ -0,0 +1,273 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Badge should render a11y html 1`] = ` +
+
+ +
+ + Awesome + + +
+ + + +
+ +
+
+ +
+ + Awesome + + +
+ + + +
+ +
+ TODO: add popover and tag +
+`; diff --git a/packages/design-system/src/components/Badge/button/BadgeButton.tsx b/packages/design-system/src/components/Badge/button/BadgeButton.tsx index b5d97d8afac..b8779591997 100644 --- a/packages/design-system/src/components/Badge/button/BadgeButton.tsx +++ b/packages/design-system/src/components/Badge/button/BadgeButton.tsx @@ -3,7 +3,7 @@ import { forwardRef, Ref } from 'react'; import classnames from 'classnames'; import styles from './BadgeButton.module.scss'; import { DataAttributes } from 'src/types'; -import Clickable from '../../Clickable/Clickable'; +import { Clickable } from '../../Clickable/Clickable'; type BadgeButtonProps = { /** diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx new file mode 100644 index 00000000000..65d8c217c40 --- /dev/null +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -0,0 +1,54 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Breadcrumbs } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +describe('Breadcrumbs', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap new file mode 100644 index 00000000000..e52fe526530 --- /dev/null +++ b/packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap @@ -0,0 +1,195 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumbs should render a11y html 1`] = ` +
+ +
+`; diff --git a/packages/design-system/src/components/Button/Button.test.tsx b/packages/design-system/src/components/Button/Button.test.tsx new file mode 100644 index 00000000000..22141e45565 --- /dev/null +++ b/packages/design-system/src/components/Button/Button.test.tsx @@ -0,0 +1,34 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Button } from './'; + +describe('Button', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ + + + + + +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx index b88c660e39f..73a3cce3e13 100644 --- a/packages/design-system/src/components/Button/Button.tsx +++ b/packages/design-system/src/components/Button/Button.tsx @@ -54,8 +54,6 @@ function ButtonPlatform( } } -const Button = forwardRef(ButtonPlatform) as ( +export const Button = forwardRef(ButtonPlatform) as ( props: ButtonType & { ref?: Ref }, ) => ReturnType; - -export default Button; diff --git a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx index dc2aa61bc63..8781866ee89 100644 --- a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx +++ b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx @@ -11,7 +11,7 @@ import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; import styles from './ButtonStyles.module.scss'; import { SizedIcon } from '../../Icon'; -import Clickable from '../../Clickable/Clickable'; +import { Clickable } from '../../Clickable/Clickable'; export type AvailableVariantsTypes = 'primary' | 'destructive' | 'secondary' | 'tertiary'; export type AvailableSizes = 'M' | 'S'; diff --git a/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap new file mode 100644 index 00000000000..b9d45e891cf --- /dev/null +++ b/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -0,0 +1,132 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button should render a11y html 1`] = ` +
+ + + + + + +
+`; diff --git a/packages/design-system/src/components/Button/index.ts b/packages/design-system/src/components/Button/index.ts index e6aa9458c09..030cc6dd7c1 100644 --- a/packages/design-system/src/components/Button/index.ts +++ b/packages/design-system/src/components/Button/index.ts @@ -2,7 +2,7 @@ import { ButtonPrimary } from './variations/ButtonPrimary'; import ButtonSecondary from './variations/ButtonSecondary'; import ButtonTertiary from './variations/ButtonTertiary'; import ButtonDestructive from './variations/ButtonDestructive'; -import Button from './Button'; +import { Button } from './Button'; import { AvailableSizes, BaseButtonProps } from './Primitive/ButtonPrimitive'; diff --git a/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx new file mode 100644 index 00000000000..b9e9a89349e --- /dev/null +++ b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx @@ -0,0 +1,34 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { ButtonAsLink } from './'; + +describe('ButtonAsLink', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ + Primary + + + Destructive + + + Secondary + + + Tertiary submit + + + Tertiary + + + Tertiary + +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx index e6445c965b3..addf27ac47a 100644 --- a/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx @@ -65,8 +65,6 @@ function ButtonPlatform(props: ButtonType, ref: Ref } } -const ButtonAsLink = forwardRef(ButtonPlatform) as ( +export const ButtonAsLink = forwardRef(ButtonPlatform) as ( props: ButtonType & { ref?: Ref }, ) => ReturnType; - -export default ButtonAsLink; diff --git a/packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap b/packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap new file mode 100644 index 00000000000..ff0c2f7bf25 --- /dev/null +++ b/packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap @@ -0,0 +1,75 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ButtonAsLink should render a11y html 1`] = ` +
+ + + Primary + + + + + + + + Destructive + + + + + Secondary + + + + + Tertiary submit + + + + + Tertiary + + + + + Tertiary + + +
+`; diff --git a/packages/design-system/src/components/ButtonAsLink/index.ts b/packages/design-system/src/components/ButtonAsLink/index.ts index 567ee15986f..42c7a3b6cf2 100644 --- a/packages/design-system/src/components/ButtonAsLink/index.ts +++ b/packages/design-system/src/components/ButtonAsLink/index.ts @@ -2,10 +2,9 @@ import ButtonPrimaryAsLink from './variations/ButtonPrimaryAsLink'; import ButtonSecondaryAsLink from './variations/ButtonSecondaryAsLink'; import ButtonTertiaryAsLink from './variations/ButtonTertiaryAsLink'; import ButtonDestructiveAsLink from './variations/ButtonDestructiveAsLink'; -import ButtonAsLink from './ButtonAsLink'; +export * from './ButtonAsLink'; export { - ButtonAsLink, ButtonPrimaryAsLink, ButtonSecondaryAsLink, ButtonTertiaryAsLink, diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx index aabfd2ca996..3ade281cf7e 100644 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx @@ -8,7 +8,7 @@ import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import { mergeRefs } from '../../../mergeRef'; import { DeprecatedIconNames } from '../../../types'; -import Button from '../../Clickable'; +import { Clickable } from '../../Clickable'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; import { Loading } from '../../Loading'; import { Tooltip, TooltipPlacement } from '../../Tooltip'; @@ -70,7 +70,7 @@ function Primitive( return ( {(triggerProps, triggerRef) => ( - + )} ); diff --git a/packages/design-system/src/components/Card/Card.test.tsx b/packages/design-system/src/components/Card/Card.test.tsx new file mode 100644 index 00000000000..bc57648b6d1 --- /dev/null +++ b/packages/design-system/src/components/Card/Card.test.tsx @@ -0,0 +1,19 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Card } from './'; + +describe('Card', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ +

Content

+ +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap new file mode 100644 index 00000000000..74f84a4c604 --- /dev/null +++ b/packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card should render a11y html 1`] = ` +
+
+
+
+ header +
+
+

+ Content +

+
+
+
+
+`; diff --git a/packages/design-system/src/components/Clickable/Clickable.tsx b/packages/design-system/src/components/Clickable/Clickable.tsx index 6c52ade8ae7..64ee5630fb6 100644 --- a/packages/design-system/src/components/Clickable/Clickable.tsx +++ b/packages/design-system/src/components/Clickable/Clickable.tsx @@ -12,7 +12,7 @@ export type ClickableProps = Omit< onClick?: (event: MouseEvent | KeyboardEvent) => void; }; -const Clickable = forwardRef( +export const Clickable = forwardRef( // Ref: Clickable is polymorphic. Could be any HTML element ({ type = 'button', className, ...props }: ClickableProps, ref: Ref) => { return ( @@ -26,4 +26,3 @@ const Clickable = forwardRef( }, ); Clickable.displayName = 'Clickable'; -export default Clickable; diff --git a/packages/design-system/src/components/Clickable/Clikable.test.tsx b/packages/design-system/src/components/Clickable/Clikable.test.tsx new file mode 100644 index 00000000000..5a3f7d1488d --- /dev/null +++ b/packages/design-system/src/components/Clickable/Clikable.test.tsx @@ -0,0 +1,19 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Clickable } from './'; + +describe('Clickable', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ +

Content

+ +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap b/packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap new file mode 100644 index 00000000000..267fd8f5839 --- /dev/null +++ b/packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Clickable should render a11y html 1`] = ` +
+ +
+`; diff --git a/packages/design-system/src/components/Clickable/index.ts b/packages/design-system/src/components/Clickable/index.ts index c5458624f5b..cc29524ac92 100644 --- a/packages/design-system/src/components/Clickable/index.ts +++ b/packages/design-system/src/components/Clickable/index.ts @@ -1,4 +1 @@ -import Clickable, { ClickableProps } from './Clickable'; - -export type { ClickableProps }; -export default Clickable; +export * from './Clickable'; diff --git a/packages/design-system/src/components/Combobox/Combobox.test.tsx b/packages/design-system/src/components/Combobox/Combobox.test.tsx new file mode 100644 index 00000000000..273da64d98a --- /dev/null +++ b/packages/design-system/src/components/Combobox/Combobox.test.tsx @@ -0,0 +1,27 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Combobox } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +const fruits = ['Acerola', 'Apple', 'Apricots', 'Avocado']; + +describe('Combobox', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap new file mode 100644 index 00000000000..6bbb872a4af --- /dev/null +++ b/packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Combobox should render a11y html 1`] = ` +
+
+ + +
+
+`; diff --git a/packages/design-system/src/components/Divider/Divider.test.tsx b/packages/design-system/src/components/Divider/Divider.test.tsx new file mode 100644 index 00000000000..8cb19da292b --- /dev/null +++ b/packages/design-system/src/components/Divider/Divider.test.tsx @@ -0,0 +1,34 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Divider } from './'; + +// jest.mock('@talend/utils', () => { +// let i = 0; +// return { +// // we need stable but different uuid (is fixed to 42 by current mock) +// randomUUID: () => `mocked-uuid-${i++}`, +// }; +// }); + +describe('Divider', () => { + it('should render a11y html', async () => { + const { container } = render( +
+
+

test

+ +

lorem ipsum

+
+ +
+

Side

+

lorem ipsum content

+
+
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap new file mode 100644 index 00000000000..c8e87f167b3 --- /dev/null +++ b/packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Divider should render a11y html 1`] = ` +
+
+

+ test +

+
+

+ lorem ipsum +

+
+
+
+

+ Side +

+

+ lorem ipsum content +

+
+
+`; diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx index a05ca6262e4..590bc0c249d 100644 --- a/packages/design-system/src/components/Dropdown/Dropdown.tsx +++ b/packages/design-system/src/components/Dropdown/Dropdown.tsx @@ -1,4 +1,4 @@ -import { cloneElement, MouseEvent, ReactElement, useState } from 'react'; +import { cloneElement, MouseEvent, ReactElement, useEffect, useState } from 'react'; import { useDismiss, @@ -10,13 +10,14 @@ import { } from '@floating-ui/react'; import { DataAttributes, DeprecatedIconNames } from '../../types'; -import Clickable, { ClickableProps } from '../Clickable'; +import { Clickable, ClickableProps } from '../Clickable'; import { LinkableType } from '../Linkable'; import DropdownDivider from './Primitive/DropdownDivider'; import DropdownLink from './Primitive/DropdownLink'; import DropdownShell from './Primitive/DropdownShell'; import DropdownTitle from './Primitive/DropdownTitle'; import { DropdownButton } from './Primitive/DropdownButton'; +import { randomUUID } from '@talend/utils'; type DropdownButtonType = Omit & { label: string; @@ -60,6 +61,11 @@ export const Dropdown = ({ ...rest }: DropdownPropsType) => { const [isOpen, setIsOpen] = useState(false); + const [itemIds, setItemIds] = useState(items.map(() => randomUUID())); + + useEffect(() => { + setItemIds(items.map(() => randomUUID())); + }, [items]); const floating = useFloating({ placement: 'bottom-start', @@ -101,6 +107,7 @@ export const Dropdown = ({ {...getFloatingProps()} > {items.map((entry, index) => { + const uuid = itemIds[index]; if (entry.type === 'button') { const { label, ...entryRest } = entry; const id = `${label}-${index}`; @@ -112,9 +119,9 @@ export const Dropdown = ({ entry.onClick(event); setIsOpen(false); }} - key={id} + key={uuid} tabIndex={0} - id={id} + id={uuid} data-testid={`${menuItemTestId}.${id}`} data-test={`${menuItemTest}.${id}`} > @@ -128,7 +135,7 @@ export const Dropdown = ({ const id = `${label}-${index}`; return ( @@ -142,7 +149,7 @@ export const Dropdown = ({ return ( @@ -156,8 +163,8 @@ export const Dropdown = ({ as={as} {...entryRest} // {...menu} - key={id} - id={id} + key={uuid} + id={uuid} onClick={(event: MouseEvent) => { setIsOpen(false); if (entry.onClick) { diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx index aec4796a817..940bef4240c 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx @@ -4,7 +4,7 @@ import { forwardRef, Ref } from 'react'; import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import { DeprecatedIconNames } from '../../../types'; -import Clickable, { ClickableProps } from '../../Clickable'; +import { Clickable, ClickableProps } from '../../Clickable'; import { SizedIcon } from '../../Icon'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx index 503275f1ae4..23240ef5345 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useEffect } from 'react'; +import { forwardRef } from 'react'; import type { HTMLAttributes, ReactNode } from 'react'; import styles from './DropdownShell.module.scss'; import { StackVertical } from '../../Stack'; diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx index 3bff6dcb57a..17efeee1ebd 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx @@ -7,7 +7,7 @@ import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import { DeprecatedIconNames } from '../../../../types'; import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; import { StackHorizontal } from '../../../Stack'; -import Clickable, { ClickableProps } from '../../../Clickable'; +import { Clickable, ClickableProps } from '../../../Clickable'; import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper'; import { SizedIcon } from '../../../Icon'; diff --git a/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx b/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx index a4e37e2b1be..8298704dfc9 100644 --- a/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx +++ b/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx @@ -3,7 +3,7 @@ import type { MouseEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../../constants'; -import Clickable from '../../../../Clickable'; +import { Clickable } from '../../../../Clickable'; import { Tooltip } from '../../../../Tooltip'; import { SizedIcon } from '../../../../Icon'; import styles from './passwordButton.module.scss'; diff --git a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx index bf85becc428..efc07cfdb19 100644 --- a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx +++ b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx @@ -1,7 +1,7 @@ import { cloneElement, forwardRef, Ref } from 'react'; import classnames from 'classnames'; import { useTranslation } from 'react-i18next'; -import Clickable, { ClickableProps } from '../Clickable'; +import { Clickable, ClickableProps } from '../Clickable'; import { Icon } from '../Icon/Icon'; import { LinkComponentProps } from '../Link';