@gechiui/block-editor/src/components/responsive-block-control/label.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { useInstanceId } from '@gechiui/compose';
import { VisuallyHidden } from '@gechiui/components';
import { _x, sprintf } from '@gechiui/i18n';
import { Fragment } from '@gechiui/element';

export default function ResponsiveBlockControlLabel( {
	property,
	viewport,
	desc,
} ) {
	const instanceId = useInstanceId( ResponsiveBlockControlLabel );
	const accessibleLabel =
		desc ||
		sprintf(
			/* translators: 1: property name. 2: viewport name. */
			_x(
				'Controls the %1$s property for %2$s viewports.',
				'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.'
			),
			property,
			viewport.label
		);
	return (
		<Fragment>
			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
				{ viewport.label }
			</span>
			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
				{ accessibleLabel }
			</VisuallyHidden>
		</Fragment>
	);
}