@wordpress/components 32.4.1-next.v.202603102151.0 → 32.5.0

package/src/navigation/stories/index.story.tsx

@@ -26,7 +26,7 @@ import './style.css';
  * This component is deprecated. Consider using `Navigator` instead.
  */
 const meta: Meta< typeof Navigation > = {
-	title: 'Components (Deprecated)/Navigation',
+	title: 'Components/Deprecated/Navigation',
 	id: 'components-navigation',
 	component: Navigation,
 	subcomponents: {

package/src/radio-control/index.tsx

@@ -87,6 +87,7 @@ export function RadioControl(
 	return (
 		<fieldset
 			id={ id }
+			role="radiogroup"
 			className={ clsx( className, 'components-radio-control' ) }
 			aria-describedby={ !! help ? generateHelpId( id ) : undefined }
 		>

package/src/radio-control/test/index.tsx

@@ -56,18 +56,18 @@ describe.each( [
 	const [ , Component ] = modeAndComponent;
 
 	describe( 'semantics and labelling', () => {
-		it( 'should group all radios under a fieldset with an accessible label (legend)', () => {
+		it( 'should render a radiogroup with an accessible label (legend)', () => {
 			const onChangeSpy = jest.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
 
 			expect(
-				screen.getByRole( 'group', { name: defaultProps.label } )
+				screen.getByRole( 'radiogroup', { name: defaultProps.label } )
 			).toBeVisible();
 		} );
 
-		it( 'should group all radios under a fieldset with an accessible label even when the label is visually hidden', () => {
+		it( 'should render a radiogroup with an accessible label even when the label is visually hidden', () => {
 			const onChangeSpy = jest.fn();
 			render(
 				<Component
@@ -78,7 +78,7 @@ describe.each( [
 			);
 
 			expect(
-				screen.getByRole( 'group', { name: defaultProps.label } )
+				screen.getByRole( 'radiogroup', { name: defaultProps.label } )
 			).toBeVisible();
 		} );
 
@@ -93,7 +93,7 @@ describe.each( [
 			);
 
 			expect(
-				screen.getByRole( 'group', { name: defaultProps.label } )
+				screen.getByRole( 'radiogroup', { name: defaultProps.label } )
 			).toHaveAccessibleDescription( 'Test help text' );
 		} );
 

package/src/radio-group/stories/index.story.tsx

@@ -16,7 +16,7 @@ import { RadioGroup } from '..';
 import { Radio } from '../radio';
 
 const meta: Meta< typeof RadioGroup > = {
-	title: 'Components (Deprecated)/RadioGroup',
+	title: 'Components/Deprecated/RadioGroup',
 	id: 'components-radiogroup',
 	component: RadioGroup,
 	subcomponents: { Radio },

package/src/snackbar/style.scss

@@ -14,7 +14,7 @@
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
-	max-width: 600px;
+	max-width: var(--wpds-dimension-surface-width-lg);
 	box-sizing: border-box;
 	cursor: pointer;
 

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

@@ -90,6 +90,7 @@ Default.args = {
 		{ value: 'right', label: 'Right' },
 		{ value: 'justify', label: 'Justify' },
 	].map( mapPropsToOptionComponent ),
+	help: 'Help text to describe the control.',
 	isBlock: true,
 	label: 'Label',
 };