@wordpress/components 22.0.0 → 22.1.0

package/src/surface/test/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
-import type { RenderResult } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,39 +9,40 @@ import type { RenderResult } from '@testing-library/react';
 import { Surface } from '../index';
 
 describe( 'props', () => {
-	let base: RenderResult;
-	beforeEach( () => {
-		base = render( <Surface>Surface</Surface> );
-	} );
-
 	test( 'should render correctly', () => {
-		expect( base.container ).toMatchSnapshot();
+		const { container } = render( <Surface>Surface</Surface> );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render variants', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render(
 			<Surface variant="secondary">Surface</Surface>
 		);
-		expect( container ).toMatchDiffSnapshot( base.container );
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderLeft', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderLeft>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( base.container );
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderRight', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderRight>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( base.container );
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderTop', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderTop>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( base.container );
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderBottom', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderBottom>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( base.container );
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 } );

package/src/tab-panel/index.tsx

@@ -7,7 +7,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -85,10 +85,13 @@ export function TabPanel( {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
-	const handleTabSelection = ( tabKey: string ) => {
-		setSelected( tabKey );
-		onSelect?.( tabKey );
-	};
+	const handleTabSelection = useCallback(
+		( tabKey: string ) => {
+			setSelected( tabKey );
+			onSelect?.( tabKey );
+		},
+		[ onSelect ]
+	);
 
 	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
 		child.click();
@@ -100,7 +103,7 @@ export function TabPanel( {
 		if ( ! selectedTab?.name && tabs.length > 0 ) {
 			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
-	}, [ tabs, selectedTab?.name, initialTabName ] );
+	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
 
 	return (
 		<div className={ className }>

package/src/tab-panel/style.scss

@@ -33,13 +33,12 @@
 	}
 
 	&:focus:not(:disabled) {
-		box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
-
 	&.is-active {
 		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 $components-color-accent;
 		position: relative;
 
 		// This border appears in Windows High Contrast mode instead of the box-shadow.
@@ -55,10 +54,10 @@
 	}
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 -#{$border-width-tab * 2} 0 0 $components-color-accent;
 	}
 }

package/src/text/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -92,11 +92,11 @@ describe( 'Text', () => {
 	} );
 
 	test( 'should render highlighted words', async () => {
-		const wrapper = render(
+		const { container } = render(
 			<Text highlightWords={ [ 'm' ] }>Lorem ipsum.</Text>
 		);
-		expect( wrapper.container.firstChild?.childNodes ).toHaveLength( 5 );
-		const words = await wrapper.findAllByText( 'm' );
+		expect( container.firstChild?.childNodes ).toHaveLength( 5 );
+		const words = await screen.findAllByText( 'm' );
 		expect( words ).toHaveLength( 2 );
 		words.forEach( ( word ) => expect( word.tagName ).toEqual( 'MARK' ) );
 	} );

package/src/toggle-group-control/stories/index.tsx

@@ -81,6 +81,7 @@ Default.args = {
 		{ value: 'right', label: 'Right' },
 		{ value: 'justify', label: 'Justify' },
 	].map( mapPropsToOptionComponent ),
+	isBlock: true,
 	label: 'Label',
 };
 
@@ -121,6 +122,7 @@ WithIcons.args = {
 		{ value: 'uppercase', label: 'Uppercase', icon: formatUppercase },
 		{ value: 'lowercase', label: 'Lowercase', icon: formatLowercase },
 	].map( mapPropsToOptionIconComponent ),
+	isBlock: false,
 };
 
 /**

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -41,6 +41,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
+  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -51,8 +52,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
-  border-color: #757575;
-  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -66,8 +65,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: none;
   z-index: 1;
 }
@@ -377,6 +376,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
+  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -387,8 +387,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
-  border-color: #757575;
-  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -402,8 +400,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: none;
   z-index: 1;
 }

package/src/toggle-group-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -73,7 +73,10 @@ describe( 'ToggleGroupControl', () => {
 			expect( container ).toMatchSnapshot();
 		} );
 	} );
-	it( 'should call onChange with proper value', () => {
+	it( 'should call onChange with proper value', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const mockOnChange = jest.fn();
 
 		render(
@@ -86,13 +89,15 @@ describe( 'ToggleGroupControl', () => {
 			</ToggleGroupControl>
 		);
 
-		const firstRadio = screen.getByRole( 'radio', { name: 'R' } );
-
-		fireEvent.click( firstRadio );
+		await user.click( screen.getByRole( 'radio', { name: 'R' } ) );
 
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
-	it( 'should render tooltip where `showTooltip` === `true`', () => {
+
+	it( 'should render tooltip where `showTooltip` === `true`', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -103,14 +108,19 @@ describe( 'ToggleGroupControl', () => {
 			'Click for Delicious Gnocchi'
 		);
 
-		fireEvent.focus( firstRadio );
+		await user.hover( firstRadio );
 
-		expect(
-			screen.getByText( 'Click for Delicious Gnocchi' )
-		).toBeInTheDocument();
+		await waitFor( () =>
+			expect(
+				screen.getByText( 'Click for Delicious Gnocchi' )
+			).toBeVisible()
+		);
 	} );
 
-	it( 'should not render tooltip', () => {
+	it( 'should not render tooltip', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -121,11 +131,13 @@ describe( 'ToggleGroupControl', () => {
 			'Click for Sumptuous Caponata'
 		);
 
-		fireEvent.focus( secondRadio );
+		await user.hover( secondRadio );
 
-		expect(
-			screen.queryByText( 'Click for Sumptuous Caponata' )
-		).not.toBeInTheDocument();
+		await waitFor( () =>
+			expect(
+				screen.queryByText( 'Click for Sumptuous Caponata' )
+			).not.toBeInTheDocument()
+		);
 	} );
 
 	describe( 'isDeselectable', () => {
@@ -196,7 +208,7 @@ describe( 'ToggleGroupControl', () => {
 				);
 
 				await user.click(
-					await screen.getByRole( 'button', {
+					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: true,
 					} )
@@ -208,7 +220,7 @@ describe( 'ToggleGroupControl', () => {
 						name: 'R',
 						pressed: false,
 					} )
-				).toBeInTheDocument();
+				).toBeVisible();
 			} );
 
 			it( 'should tab to the next option button', async () => {

package/src/toggle-group-control/toggle-group-control/README.md

@@ -50,9 +50,16 @@ Determines if segments should be rendered with equal widths.
 -   Required: No
 -   Default: `false`
 
+### `isDeselectable`: `boolean`
+
+Whether an option can be deselected by clicking it again.
+
+-   Required: No
+-   Default: `false`
+
 ### `isBlock`: `boolean`
 
-Renders `ToggleGroupControl` as a (CSS) block element.
+Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of the available space. This is the recommended style when the options are text-based and not icons.
 
 -   Required: No
 -   Default: `false`

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -50,7 +50,7 @@ function UnconnectedToggleGroupControl(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { isDeselectable, size } ),
+				styles.ToggleGroupControl( { isBlock, isDeselectable, size } ),
 				isBlock && styles.block,
 				className
 			),

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -11,14 +11,15 @@ import { CONFIG, COLORS, reduceMotion } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
 export const ToggleGroupControl = ( {
+	isBlock,
 	isDeselectable,
 	size,
-}: {
-	isDeselectable?: boolean;
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
+	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
 	padding: 2px;
@@ -27,24 +28,29 @@ export const ToggleGroupControl = ( {
 	${ reduceMotion( 'transition' ) }
 
 	${ toggleGroupControlSize( size ) }
-	${ ! isDeselectable && enclosingBorder }
+	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
-const enclosingBorder = css`
-	border-color: ${ COLORS.ui.border };
-	border-radius: ${ CONFIG.controlBorderRadius };
+const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
+	const enclosingBorder = css`
+		border-color: ${ COLORS.ui.border };
+	`;
+
+	return css`
+		${ isBlock && enclosingBorder }
 
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
+		&:hover {
+			border-color: ${ COLORS.ui.borderHover };
+		}
 
-	&:focus-within {
-		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-		outline: none;
-		z-index: 1;
-	}
-`;
+		&:focus-within {
+			border-color: ${ COLORS.ui.borderFocus };
+			box-shadow: ${ CONFIG.controlBoxShadowFocus };
+			outline: none;
+			z-index: 1;
+		}
+	`;
+};
 
 export const toggleGroupControlSize = (
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >

package/src/toggle-group-control/types.ts

@@ -92,7 +92,8 @@ export type ToggleGroupControlProps = Pick<
 	 */
 	isAdaptiveWidth?: boolean;
 	/**
-	 * Renders `ToggleGroupControl` as a (CSS) block element.
+	 * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of
+	 * the available space. This is the recommended style when the options are text-based and not icons.
 	 *
 	 * @default false
 	 */

package/src/tools-panel/styles.ts

@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: var( --wp-admin-theme-color-darker-10 );
+	color: ${ COLORS.ui.themeDark10 };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;

package/src/tools-panel/tools-panel-item/hook.ts

@@ -108,11 +108,15 @@ export function useToolsPanelItem(
 	const menuGroup = isShownByDefault ? 'default' : 'optional';
 	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
 	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
+	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {
-		if ( isResetting || ! hasMatchingPanel ) {
+		// We check whether this item is currently registered as items rendered
+		// via fills can persist through the parent panel being remounted.
+		// See: https://github.com/WordPress/gutenberg/pull/45673
+		if ( ! isRegistered || isResetting || ! hasMatchingPanel ) {
 			return;
 		}
 
@@ -126,6 +130,7 @@ export function useToolsPanelItem(
 	}, [
 		hasMatchingPanel,
 		isMenuItemChecked,
+		isRegistered,
 		isResetting,
 		isValueSet,
 		wasMenuItemChecked,

package/src/tree-grid/test/index.js

@@ -97,7 +97,7 @@ describe( 'TreeGrid', () => {
 			);
 
 			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowRight',
@@ -149,7 +149,7 @@ describe( 'TreeGrid', () => {
 			);
 
 			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowLeft',
@@ -188,8 +188,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowDown',
@@ -210,8 +210,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 1' ).focus();
 
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'End',
@@ -232,8 +232,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowUp',
@@ -254,8 +254,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 3' ).focus();
 
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
 				key: 'Home',
@@ -276,8 +276,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowUp',

package/src/truncate/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,34 +10,34 @@ import { Truncate } from '..';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( container.firstChild ).toHaveTextContent( 'Lorem ipsum.' );
+		render( <Truncate>Lorem ipsum.</Truncate> );
+		expect( screen.getByText( 'Lorem ipsum.' ) ).toBeVisible();
 	} );
 
 	test( 'should render limit', () => {
-		const { container } = render(
+		render(
 			<Truncate limit={ 1 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'L…' );
+		expect( screen.getByText( 'L…' ) ).toBeVisible();
 	} );
 
 	test( 'should render custom ellipsis', () => {
-		const { container } = render(
+		render(
 			<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'Lorem!!!' );
+		expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
 	} );
 
 	test( 'should render custom ellipsizeMode', () => {
-		const { container } = render(
+		render(
 			<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'Lo!!!m.' );
+		expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
 	} );
 } );

package/src/ui/form-group/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -20,44 +20,43 @@ const TextInput = ( { id: idProp, ...props } ) => {
 /* eslint-disable no-restricted-syntax */
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
+		render(
 			<FormGroup id="fname" label="First name">
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toHaveAttribute( 'for', 'fname' );
-		expect( label ).toContainHTML( 'First name' );
-
-		const input = container.querySelector( 'input' );
-		expect( input ).toHaveAttribute( 'id', 'fname' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
 	} );
 
 	test( 'should render label without prop correctly', () => {
-		const { container } = render(
+		render(
 			<FormGroup id="fname">
 				<ControlLabel htmlFor="fname">First name</ControlLabel>
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toHaveAttribute( 'for', 'fname' );
-		expect( label ).toContainHTML( 'First name' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
 	} );
 
 	test( 'should render labelHidden', () => {
-		const { container } = render(
+		render(
 			<FormGroup labelHidden id="fname" label="First name">
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toContainHTML( 'First name' );
-		// @todo: Refactor this after adding next VisuallyHidden.
-		expect( label ).toHaveClass( 'components-visually-hidden' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
+		expect( screen.getByText( 'First name' ) ).toHaveClass(
+			'components-visually-hidden'
+		);
 	} );
 
 	test( 'should render alignLabel', () => {