@atlaskit/navigation-system 0.177.2 → 0.178.0

package/dist/types-ts4.5/ui/top-nav-items/search.d.ts

@@ -18,8 +18,8 @@ export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfte
      * The icon component to render before the search input.
      */
     iconBefore?: React.ComponentType<NewIconProps & {
-        spacing: 'spacious';
-    }> | undefined;
+        spacing: "spacious";
+    }>;
     /**
      * The component to render after the search input.
      */
@@ -27,10 +27,10 @@ export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfte
     /**
      * Handler called on click.
      */
-    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /**
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
-    interactionName?: string | undefined;
-    'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
+    interactionName?: string;
+    "aria-haspopup"?: React.AriaAttributes["aria-haspopup"];
 }) => JSX.Element;

package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts

@@ -88,7 +88,7 @@ export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, a
  *
  * A themed link button for the top bar.
  */
-export declare const ThemedLinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const ThemedLinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
  */
@@ -124,5 +124,5 @@ export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<strin
  *
  * A themed link icon button for the top bar.
  */
-export declare const ThemedLinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkIconButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const ThemedLinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkIconButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/themed/has-custom-theme-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Context to let components know if a custom theme is being applied.
  */

package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CustomTheme } from './get-custom-theme-styles';
 type Result = {
     isEnabled: false;

package/examples/company-hub-mock.tsx

@@ -79,10 +79,6 @@ const contentStyles = cssMap({
 		backgroundClip: 'content-box',
 		paddingBlockEnd: token('space.800'),
 	},
-	heroImage: {
-		width: '100%',
-		objectFit: 'cover',
-	},
 	logo: {
 		position: 'absolute',
 		bottom: 0,

package/examples/confluence-mock.tsx

@@ -137,12 +137,9 @@ const contentStyles = cssMap({
 		paddingBlock: token('space.400'),
 		maxWidth: '760px',
 	},
-	title: {
-		marginBottom: token('space.400'),
-	},
 });
 
-export default function ConfluenceMockExample({}: {}) {
+export default function ConfluenceMockExample() {
 	return (
 		<WithResponsiveViewport>
 			<Root testId="root">

package/examples/drag-and-drop-jira-scaling-vr.tsx

@@ -0,0 +1,25 @@
+import React, { type ReactNode, useEffect } from 'react';
+
+import { App } from './drag-and-drop/jira/entry';
+
+const FontScaleContainer = ({ children }: { children: ReactNode }) => {
+	useEffect(() => {
+		const rootElement = document.querySelector('html');
+		if (rootElement) {
+			// Matches Chrome's "very large" font size setting
+			rootElement.style.fontSize = '24px';
+		}
+	}, []);
+
+	return children;
+};
+
+const AppScaled = () => {
+	return (
+		<FontScaleContainer>
+			<App />
+		</FontScaleContainer>
+	);
+};
+
+export default AppScaled;

package/examples/expandable-menu-item.tsx

@@ -591,6 +591,7 @@ export const ExpandableMenuItemWithAllOptions = () => (
 						actionsOnHover={<MoreAction shouldRenderToParent />}
 						elemAfter={<Lozenge>Elem after</Lozenge>}
 						href="#"
+						testId="parent-menu-item"
 					>
 						Parent menu item
 					</ExpandableMenuItemTrigger>

package/examples/page-layout.tsx

@@ -70,9 +70,6 @@ const styles = cssMap({
 		position: 'sticky',
 		insetBlockStart: token('space.150', '12px'),
 	},
-	hidden: {
-		display: 'none',
-	},
 	legacyPositionedSibling: {
 		position: 'absolute',
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.177.2",
+	"version": "0.178.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -116,7 +116,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^27.10.0",
+		"@atlaskit/icon": "^27.11.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -140,7 +140,6 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
-		"@af/react-unit-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^3.1.0",
 		"@atlaskit/badge": "^18.1.0",
@@ -226,6 +225,9 @@
 		},
 		"platform_dst_nav4_flyout_use_capture_outside": {
 			"type": "boolean"
+		},
+		"platform_dst_expandable_menu_item_elembefore_label": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"

package/src/__tests__/informational-vr-tests/layering.vr.tsx

@@ -35,6 +35,9 @@ snapshotInformational(ScrollableVR, {
 	description: 'Side nav expanded on mobile',
 	prepare: async (page) => {
 		await page.getByTestId('side-nav-toggle-button').click();
+
+		// Wait for the tooltip to be displayed, to reduce flakiness
+		await page.getByRole('tooltip').waitFor();
 	},
 });
 
@@ -43,6 +46,9 @@ snapshotInformational(ScrollableNoPanelVR, {
 	description: 'Side nav expanded on mobile without panel',
 	prepare: async (page) => {
 		await page.getByTestId('side-nav-toggle-button').click();
+
+		// Wait for the tooltip to be displayed, to reduce flakiness
+		await page.getByRole('tooltip').waitFor();
 	},
 });
 

package/src/__tests__/vr-tests/a11y-scaling.vr.tsx

@@ -0,0 +1,12 @@
+import { snapshot } from '@af/visual-regression';
+
+import App from '../../../examples/drag-and-drop-jira-scaling-vr';
+
+snapshot(App, {
+	variants: [
+		{
+			environment: { colorScheme: 'light' },
+			name: 'desktop',
+		},
+	],
+});

package/src/ui/menu-item/__tests__/playwright/scroll-into-view.spec.tsx

@@ -34,27 +34,26 @@ test.describe('scroll into view', () => {
 		}) => {
 			await page.setViewportSize(viewportSize);
 
-			await page.visitExample('design-system', 'navigation-system', 'menu-item-scroll-into-view');
+			await page.visitExample('design-system', 'navigation-system', 'menu-item-scroll-into-view', {
+				featureFlag: 'platform_dst_expandable_menu_item_elembefore_label',
+			});
 
 			// Collapse the "Teams" expandable menu item
 			// We need to click on the collapse chevron icon button (instead of the menu item), so we only toggle the menu item and
 			// don't *select* it too.
 			const teamsMenuItemContainer = page.getByTestId('teams-menu-item-trigger-container');
 			await teamsMenuItemContainer.scrollIntoViewIfNeeded();
-			const teamsMenuItemCollapseButton = teamsMenuItemContainer.getByRole('button', {
-				name: /Collapse/,
-			});
-			await teamsMenuItemCollapseButton.click();
+			const teamsMenuItemChevronButton = teamsMenuItemContainer.getByTestId(
+				'teams-menu-item-trigger--elem-before-button',
+			);
+			await teamsMenuItemChevronButton.click();
 
 			// Select the "Team 10" menu item (by clicking the button in the Main slot)
 			const navigateToTeam10MenuItemButton = page.getByTestId('navigate-to-team-10-menu-item');
 			await navigateToTeam10MenuItemButton.click();
 
-			// Expand the "Teams" expandable menu item - using the same button as before, but now the label has changed to Expand
-			const teamsMenuItemExpandButton = teamsMenuItemContainer.getByRole('button', {
-				name: /Expand/,
-			});
-			await teamsMenuItemExpandButton.click();
+			// Expand the "Teams" expandable menu item - using the same button as before
+			await teamsMenuItemChevronButton.click();
 
 			// The "Team 10" menu item should be scrolled into view
 			const team10MenuItem = page.getByRole('link', { name: /Team 10/ });

package/src/ui/menu-item/__tests__/unit/expandable-menu-item.test.tsx

@@ -7,6 +7,7 @@ import { IconButton } from '@atlaskit/button/new';
 import AddIcon from '@atlaskit/icon/core/add';
 import HomeIcon from '@atlaskit/icon/core/home';
 import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import { ButtonMenuItem } from '../../button-menu-item';
 import { ExpandableMenuItem } from '../../expandable-menu-item/expandable-menu-item';
@@ -272,14 +273,16 @@ describe('ExpandableMenuItem', () => {
 		it('should show the expandable content when the chevron icon button is clicked while collapsed', async () => {
 			render(
 				<ExpandableMenuItem>
-					<ExpandableMenuItemTrigger href="/test">Parent menu item</ExpandableMenuItemTrigger>
+					<ExpandableMenuItemTrigger href="/test" testId="trigger-test-id">
+						Parent menu item
+					</ExpandableMenuItemTrigger>
 					<ExpandableMenuItemContent>
 						<ButtonMenuItem>Test expandable content</ButtonMenuItem>
 					</ExpandableMenuItemContent>
 				</ExpandableMenuItem>,
 			);
 
-			await userEvent.click(screen.getByRole('button', { name: /Expand/ }), {
+			await userEvent.click(screen.getByTestId('trigger-test-id--elem-before-button'), {
 				// Skipping pointer events check as the `:not(:has(button,a))` selector
 				// to disable pointer-events when there is no interactive child element
 				// is not working correctly in our unit test environment
@@ -292,14 +295,16 @@ describe('ExpandableMenuItem', () => {
 		it('should hide the expandable content when the chevron icon button is clicked while expanded', async () => {
 			render(
 				<ExpandableMenuItem isDefaultExpanded>
-					<ExpandableMenuItemTrigger href="/test">Parent menu item</ExpandableMenuItemTrigger>
+					<ExpandableMenuItemTrigger href="/test" testId="trigger-test-id">
+						Parent menu item
+					</ExpandableMenuItemTrigger>
 					<ExpandableMenuItemContent>
 						<ButtonMenuItem>Test expandable content</ButtonMenuItem>
 					</ExpandableMenuItemContent>
 				</ExpandableMenuItem>,
 			);
 
-			await userEvent.click(screen.getByRole('button', { name: /Collapse/ }), {
+			await userEvent.click(screen.getByTestId('trigger-test-id--elem-before-button'), {
 				// Skipping pointer events check as the `:not(:has(button,a))` selector
 				// to disable pointer-events when there is no interactive child element
 				// is not working correctly in our unit test environment
@@ -344,44 +349,6 @@ describe('ExpandableMenuItem', () => {
 
 			expect(onClick).toHaveBeenCalled();
 		});
-
-		describe('aria-expanded', () => {
-			const itemText = 'Parent menu item';
-			const chevronExpandedText = 'Collapse';
-			const chevronCollapsedText = 'Expand';
-
-			it('should be `false` when collapsed', () => {
-				render(
-					<ExpandableMenuItem>
-						<ExpandableMenuItemTrigger href="/test">{itemText}</ExpandableMenuItemTrigger>
-						<ExpandableMenuItemContent>
-							<ButtonMenuItem>Test expandable content</ButtonMenuItem>
-						</ExpandableMenuItemContent>
-					</ExpandableMenuItem>,
-				);
-
-				expect(screen.getByRole('button', { name: chevronCollapsedText })).toHaveAttribute(
-					'aria-expanded',
-					'false',
-				);
-			});
-
-			it('should be `true` when expanded', () => {
-				render(
-					<ExpandableMenuItem isDefaultExpanded>
-						<ExpandableMenuItemTrigger href="/test">{itemText}</ExpandableMenuItemTrigger>
-						<ExpandableMenuItemContent>
-							<ButtonMenuItem>Test expandable content</ButtonMenuItem>
-						</ExpandableMenuItemContent>
-					</ExpandableMenuItem>,
-				);
-
-				expect(screen.getByRole('button', { name: chevronExpandedText })).toHaveAttribute(
-					'aria-expanded',
-					'true',
-				);
-			});
-		});
 	});
 
 	describe('when a href is not provided', () => {
@@ -597,36 +564,94 @@ describe('ExpandableMenuItemTrigger', () => {
 	});
 
 	describe('when a href is provided', () => {
-		it('should display an icon button with correct label when expanded', () => {
+		it('should display an icon button with correct test id', () => {
 			render(
-				<ExpandableMenuItem isDefaultExpanded>
-					<ExpandableMenuItemTrigger
-						href="/test"
-						elemBefore={<HomeIcon label="" />}
-						actions={actions}
-					>
+				<ExpandableMenuItem>
+					<ExpandableMenuItemTrigger href="/test" testId="trigger-test-id">
 						Menu trigger
 					</ExpandableMenuItemTrigger>
 				</ExpandableMenuItem>,
 			);
 
-			expect(screen.getByRole('button', { name: /Collapse/ })).toBeVisible();
+			expect(screen.getByTestId('trigger-test-id--elem-before-button')).toBeVisible();
 		});
 
-		it('should display an icon button with correct label when collapsed', () => {
-			render(
-				<ExpandableMenuItem>
-					<ExpandableMenuItemTrigger
-						href="/test"
-						elemBefore={<HomeIcon label="" />}
-						actions={actions}
-					>
-						Menu trigger
-					</ExpandableMenuItemTrigger>
-				</ExpandableMenuItem>,
-			);
+		ffTest.on('platform_dst_expandable_menu_item_elembefore_label', 'aria-expanded', () => {
+			it('should display an icon button with correct label and aria-expanded when expanded', () => {
+				render(
+					<ExpandableMenuItem isDefaultExpanded>
+						<ExpandableMenuItemTrigger
+							href="/test"
+							elemBefore={<HomeIcon label="" />}
+							actions={actions}
+						>
+							Menu trigger
+						</ExpandableMenuItemTrigger>
+					</ExpandableMenuItem>,
+				);
+
+				const chevronIconButton = screen.getByRole('button', { name: /Menu trigger/ });
+
+				expect(chevronIconButton).toBeVisible();
+				expect(chevronIconButton).toHaveAttribute('aria-expanded', 'true');
+			});
+
+			it('should display an icon button with correct label and aria-expanded when collapsed', () => {
+				render(
+					<ExpandableMenuItem>
+						<ExpandableMenuItemTrigger
+							href="/test"
+							elemBefore={<HomeIcon label="" />}
+							actions={actions}
+						>
+							Menu trigger
+						</ExpandableMenuItemTrigger>
+					</ExpandableMenuItem>,
+				);
+
+				const chevronIconButton = screen.getByRole('button', { name: /Menu trigger/ });
+
+				expect(chevronIconButton).toBeVisible();
+				expect(chevronIconButton).toHaveAttribute('aria-expanded', 'false');
+			});
+		});
+
+		ffTest.off('platform_dst_expandable_menu_item_elembefore_label', 'aria-expanded', () => {
+			const itemText = 'Parent menu item';
+			const chevronExpandedText = 'Collapse';
+			const chevronCollapsedText = 'Expand';
+
+			it('should be `false` when collapsed', () => {
+				render(
+					<ExpandableMenuItem>
+						<ExpandableMenuItemTrigger href="/test">{itemText}</ExpandableMenuItemTrigger>
+						<ExpandableMenuItemContent>
+							<ButtonMenuItem>Test expandable content</ButtonMenuItem>
+						</ExpandableMenuItemContent>
+					</ExpandableMenuItem>,
+				);
+
+				expect(screen.getByRole('button', { name: chevronCollapsedText })).toHaveAttribute(
+					'aria-expanded',
+					'false',
+				);
+			});
+
+			it('should be `true` when expanded', () => {
+				render(
+					<ExpandableMenuItem isDefaultExpanded>
+						<ExpandableMenuItemTrigger href="/test">{itemText}</ExpandableMenuItemTrigger>
+						<ExpandableMenuItemContent>
+							<ButtonMenuItem>Test expandable content</ButtonMenuItem>
+						</ExpandableMenuItemContent>
+					</ExpandableMenuItem>,
+				);
 
-			expect(screen.getByRole('button', { name: /Expand/ })).toBeVisible();
+				expect(screen.getByRole('button', { name: chevronExpandedText })).toHaveAttribute(
+					'aria-expanded',
+					'true',
+				);
+			});
 		});
 
 		it('should display custom icon when not hovered over', () => {

package/src/ui/menu-item/__tests__/vr-tests/expandable.vr.tsx

@@ -190,13 +190,13 @@ snapshot(ExpandableMenuItemWithAllOptions, {
 		{
 			state: 'hovered',
 			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Expand',
-				},
+				byTestId: 'parent-menu-item--elem-before-button',
 			},
 		},
 	],
+	featureFlags: {
+		platform_dst_expandable_menu_item_elembefore_label: true,
+	},
 });
 
 snapshot(ExpandableMenuItemWithAllOptions, {
@@ -206,13 +206,13 @@ snapshot(ExpandableMenuItemWithAllOptions, {
 		{
 			state: 'focused',
 			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Expand',
-				},
+				byTestId: 'parent-menu-item--elem-before-button',
 			},
 		},
 	],
+	featureFlags: {
+		platform_dst_expandable_menu_item_elembefore_label: true,
+	},
 });
 
 snapshot(ExpandableMenuItemWithAllOptions, {

package/src/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.tsx

@@ -3,7 +3,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { forwardRef, type ReactNode, useCallback, useRef } from 'react';
+import React, { forwardRef, type ReactNode, useCallback, useId, useRef } from 'react';
 
 import { cssMap, jsx } from '@compiled/react';
 
@@ -12,6 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import type { IconProps } from '@atlaskit/icon';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
@@ -229,6 +230,7 @@ export const ExpandableMenuItemTrigger = forwardRef<
 		},
 		forwardedRef,
 	) => {
+		const id = useId();
 		const onExpansionToggle = useOnExpansionToggle();
 		const isExpanded = useIsExpanded();
 		const setIsExpanded = useSetIsExpanded();
@@ -271,11 +273,25 @@ export const ExpandableMenuItemTrigger = forwardRef<
 					/>
 				)}
 				aria-expanded={isExpanded}
-				label={isExpanded ? 'Collapse' : 'Expand'}
+				// We are labelling the icon button using the containing menu item's content, to provide context to
+				// screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+				// `aria-expanded` attribute to indicate the expanded state of the menu item.
+				// We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+				aria-labelledby={fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined}
+				// IconButton requires a label prop, however it will not be used by screen readers as we are setting
+				// `aria-labelledby`, which will be used instead.
+				label={
+					fg('platform_dst_expandable_menu_item_elembefore_label')
+						? ''
+						: isExpanded
+							? 'Collapse'
+							: 'Expand'
+				}
 				appearance="subtle"
 				spacing="compact"
 				onClick={handleIconClick}
 				interactionName={interactionName}
+				testId={testId ? `${testId}--elem-before-button` : undefined}
 			/>
 		) : (
 			<ExpandableMenuItemIcon
@@ -292,6 +308,7 @@ export const ExpandableMenuItemTrigger = forwardRef<
 				ref={itemRef}
 			>
 				<MenuItemBase
+					id={id}
 					actions={actions}
 					actionsOnHover={actionsOnHover}
 					elemBefore={elemBefore}

package/src/ui/menu-item/menu-item.tsx

@@ -216,7 +216,8 @@ const containerStyles = cssMap({
 		 * are unusable.
 		 */
 		minWidth: '72px',
-		height: '32px',
+		// Using rem so it scales with browser font size and rem-based spacing/typography
+		height: '2rem',
 		alignItems: 'center',
 		userSelect: 'none',
 		borderRadius: token('border.radius'),
@@ -246,12 +247,6 @@ const containerStyles = cssMap({
 	showHoverActions: {
 		[actionsOnHoverDisplayVar]: 'flex',
 	},
-	removeElemAfterOnHover: {
-		// On hover of the menu item, remove the elemAfter
-		'&:hover, &:focus-within': {
-			[elemAfterDisplayVar]: 'none',
-		},
-	},
 	removeElemAfterOnHoverOrOpenNestedPopup: {
 		// On hover of the menu item, remove the elemAfter
 		'&:hover, &:focus-within': {
@@ -286,7 +281,7 @@ const containerStyles = cssMap({
 	},
 	hasDescription: {
 		/* Standard 32px + another 16px for the description */
-		height: '48px',
+		height: '3rem',
 	},
 	dragging: {
 		opacity: 0.4,
@@ -524,6 +519,11 @@ function getTextColor({
  */
 type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> =
 	MenuItemLinkOrButtonCommonProps & {
+		/**
+		 * ID attribute, passed to the interactive element (anchor/button). This is not publicly exposed, and is currently only
+		 * used internally by `ExpandableMenuItemTrigger` for the `aria-labelledby` attribute.
+		 */
+		id?: string;
 		href?: string | Record<string, any>;
 		target?: HTMLAnchorElement['target'];
 		isDisabled?: boolean;
@@ -545,6 +545,7 @@ type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> =
  */
 const MenuItemBaseNoRef = <T extends HTMLAnchorElement | HTMLButtonElement>(
 	{
+		id,
 		testId,
 		actions,
 		actionsOnHover,
@@ -736,6 +737,7 @@ const MenuItemBaseNoRef = <T extends HTMLAnchorElement | HTMLButtonElement>(
 							'aria-controls': ariaControls,
 							'aria-haspopup': ariaHasPopup,
 							ref: mergeRefs([forwardedRef, tooltipProps.ref]),
+							id,
 							testId,
 							interactionName,
 						};

package/src/ui/page-layout/__tests__/unit/react-safety.test.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { toBeSuspendable, toPassStrictMode } from '@af/react-unit-testing';
-
 import CompositionExample from '../../../../../examples/composition';
 
 import { resetMatchMedia } from './_test-utils';
@@ -10,12 +8,6 @@ beforeEach(() => {
 	resetMatchMedia();
 });
 
-// TODO: move to `jestFrameworkSetup.js` in follow up pull request
-expect.extend({
-	toBeSuspendable,
-	toPassStrictMode,
-});
-
 it('should support being suspended', async () => {
 	await expect(() => <CompositionExample />).toBeSuspendable();
 });