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: {},
};