woocommerce/packages/woocommerce-blocks/assets/js/base/components/label/index.tsx
2021-12-10 12:03:04 +00:00

63 lines
1.5 KiB
TypeScript

/**
* External dependencies
*/
import { Fragment } from '@wordpress/element';
import classNames from 'classnames';
import type { ReactElement, HTMLProps } from 'react';
interface LabelProps extends HTMLProps< HTMLElement > {
label?: string;
screenReaderLabel?: string;
wrapperElement?: string;
wrapperProps?: HTMLProps< HTMLElement >;
}
/**
* 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 = {},
}: LabelProps ): ReactElement => {
let Wrapper;
const hasLabel = typeof label !== 'undefined' && label !== null;
const hasScreenReaderLabel =
typeof screenReaderLabel !== 'undefined' && screenReaderLabel !== null;
if ( ! hasLabel && hasScreenReaderLabel ) {
Wrapper = wrapperElement || 'span';
wrapperProps = {
...wrapperProps,
className: classNames(
wrapperProps.className,
'screen-reader-text'
),
};
return <Wrapper { ...wrapperProps }>{ screenReaderLabel }</Wrapper>;
}
Wrapper = wrapperElement || Fragment;
if ( hasLabel && hasScreenReaderLabel && label !== screenReaderLabel ) {
return (
<Wrapper { ...wrapperProps }>
<span aria-hidden="true">{ label }</span>
<span className="screen-reader-text">
{ screenReaderLabel }
</span>
</Wrapper>
);
}
return <Wrapper { ...wrapperProps }>{ label }</Wrapper>;
};
export default Label;