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

package/src/form-token-field/token-input.tsx

@@ -28,6 +28,7 @@ export function UnForwardedTokenInput(
 		onChange,
 		onFocus,
 		onBlur,
+		'aria-describedby': ariaDescribedBy,
 		...restProps
 	} = props;
 
@@ -86,7 +87,12 @@ export function UnForwardedTokenInput(
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}
-			aria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }
+			aria-describedby={ [
+				`components-form-token-suggestions-howto-${ instanceId }`,
+				ariaDescribedBy,
+			]
+				.filter( Boolean )
+				.join( ' ' ) }
 		/>
 	);
 }

package/src/guide/style.scss

@@ -6,9 +6,11 @@
 
 .components-guide {
 	$image-height: 300px;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	$image-width: 320px;
 
 	@include break-small() {
+		// TODO: Replace with a --wpds-dimension-surface-width-* token.
 		width: 600px;
 	}
 
@@ -86,6 +88,7 @@
 
 .components-modal__frame.components-guide {
 	border: none;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	min-width: 312px;
 	max-height: 575px;
 

package/src/modal/style.scss

@@ -65,7 +65,7 @@
 		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
-		min-width: $modal-min-width;
+		min-width: var(--wpds-dimension-surface-width-sm);
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
@@ -88,17 +88,14 @@
 			width: 100%;
 		}
 
-		// The following widths were selected to align with existing baselines
-		// found elsewhere in the editor.
-		// See https://github.com/WordPress/gutenberg/pull/54471#issuecomment-1723818809
 		&.has-size-small {
-			max-width: $modal-width-small;
+			max-width: var(--wpds-dimension-surface-width-md);
 		}
 		&.has-size-medium {
-			max-width: $modal-width-medium;
+			max-width: var(--wpds-dimension-surface-width-lg);
 		}
 		&.has-size-large {
-			max-width: $modal-width-large;
+			max-width: var(--wpds-dimension-surface-width-2xl);
 		}
 
 	}

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/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',
 };