woocommerce/plugins/woocommerce-blocks/assets/js/base/components/label/index.js

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import { Fragment } from 'react';
import classNames from 'classnames';

/**
 * Component used to render an accessible text given a label and/or a
 * screenReaderLabel. The wrapper element and wrapper props can also be
 * specified via props.
 */
const Label = ( {
	label,
	screenReaderLabel,
	wrapperElement,
	wrapperProps,
} ) => {
	let Wrapper;

	if ( ! label && screenReaderLabel ) {
		Wrapper = wrapperElement || 'span';
		wrapperProps = {
			...wrapperProps,
			className: classNames(
				wrapperProps.className,
				'screen-reader-text'
			),
		};

		return <Wrapper { ...wrapperProps }>{ screenReaderLabel }</Wrapper>;
	}

	Wrapper = wrapperElement || Fragment;

	if ( label && screenReaderLabel && label !== screenReaderLabel ) {
		return (
			<Wrapper { ...wrapperProps }>
				<span aria-hidden="true">{ label }</span>
				<span className="screen-reader-text">
					{ screenReaderLabel }
				</span>
			</Wrapper>
		);
	}

	return <Wrapper { ...wrapperProps }>{ label }</Wrapper>;
};

Label.propTypes = {
	label: PropTypes.node,
	screenReaderLabel: PropTypes.node,
	wrapperElement: PropTypes.elementType,
	wrapperProps: PropTypes.object,
};

Label.defaultProps = {
	wrapperProps: {},
};

export default Label;