Refactor Label so we don't need to check Symbol

woocommerce · Aug 23, 2019 · d398806 · d398806
1 parent 0751dbf
commit d398806
Showing 1 changed file with 18 additions and 17 deletions.
diff --git 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 (
-			<Wrapper { ...wrapperProps }>
-				<span aria-hidden>
-					{ label }
-				</span>
-				<span className="screen-reader-text">
-					{ screenReaderLabel }
-				</span>
-			</Wrapper>
-		);
-	}
+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 (
+			<Wrapper { ...wrapperProps }>
+				<span aria-hidden>
+					{ label }
+				</span>
+				<span className="screen-reader-text">
+					{ screenReaderLabel }
+				</span>
+			</Wrapper>
+		);
+	}
+
 	return (
 		<Wrapper { ...wrapperProps }>
 			{ label }
@@ -54,7 +56,6 @@ Label.propTypes = {
 };
 
 Label.defaultProps = {
-	wrapperElement: Fragment,
 	wrapperProps: {},
 };