diff --git a/assets/js/base/components/label/index.js b/assets/js/base/components/label/index.js index dcf6ad69d68..a0a2037fed0 100644 --- a/assets/js/base/components/label/index.js +++ b/assets/js/base/components/label/index.js @@ -6,24 +6,11 @@ import elementType from 'prop-types-elementtype'; import { Fragment } from 'react'; import classNames from 'classnames'; -const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProps } ) => { - if ( label && screenReaderLabel && label !== screenReaderLabel ) { - return ( - - - { label } - - - { screenReaderLabel } - - - ); - } +const Label = ( { label, screenReaderLabel, wrapperElement, wrapperProps } ) => { + let Wrapper; if ( ! label && screenReaderLabel ) { - if ( typeof Wrapper === 'symbol' && Symbol.keyFor( Wrapper ) === 'react.fragment' ) { - Wrapper = 'span'; - } + Wrapper = wrapperElement || 'span'; wrapperProps = { ...wrapperProps, className: classNames( wrapperProps.className, 'screen-reader-text' ), @@ -36,6 +23,21 @@ const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProp ); } + Wrapper = wrapperElement || Fragment; + + if ( label && screenReaderLabel && label !== screenReaderLabel ) { + return ( + + + { label } + + + { screenReaderLabel } + + + ); + } + return ( { label } @@ -54,7 +56,6 @@ Label.propTypes = { }; Label.defaultProps = { - wrapperElement: Fragment, wrapperProps: {}, };