Adds aria description to toggle control for improved a11y context

packages/block-editor/src/components/responsive-block-control/index.js

@@ -36,6 +36,8 @@ function ResponsiveBlockControl( props ) {
 
 	const toggleControlLabel = toggleLabel || sprintf( __( 'Use the same %s on all screensizes.' ), property );
 
+	const toggleHelpText = __( 'Toggle between using the same value for all screen sizes or using a unique value per screen size.' );
+
 	const defaultControl = renderDefaultControl( defaultLabel );
 
 	const defaultResponsiveControls = devices.map( ( deviceLabel, index ) => {
@@ -57,6 +59,7 @@ function ResponsiveBlockControl( props ) {
 					label={ toggleControlLabel }
 					checked={ ! isOpen }
 					onChange={ onToggle }
+					help={ toggleHelpText }
 				/>
 
 				<div hidden={ isOpen }>

packages/block-editor/src/components/responsive-block-control/style.scss

@@ -1,3 +1,16 @@
+@mixin screen-reader-text() {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
 .block-editor-responsive-block-control {
 	margin-bottom: $block-padding*2;
 	border-bottom: 1px solid $light-gray-600;
@@ -29,3 +42,6 @@
 	margin-left: 1px;
 }
 
+.block-editor-responsive-block-control .components-base-control__help {
+	@include screen-reader-text();
+}