fix(choice): use span instead of div

- labels shouldn't wrap divs; switching to spans instead
telus · Feb 5, 2018 · 4c6ee5b · 4c6ee5b
1 parent 1639989
commit 4c6ee5b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.spec.jsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.spec.jsx.snap
@@ -7,7 +7,7 @@ exports[`Checkbox renders 1`] = `
   <label
     for="the-group-name_the-value"
   >
-    <div
+    <span
       class="betweenRightMarginDesktop-3 inline alignFlexStart"
     >
       <span
@@ -28,7 +28,7 @@ exports[`Checkbox renders 1`] = `
       >
         A label
       </span>
-    </div>
+    </span>
   </label>
 </div>
 `;
diff --git a/src/components/Choice/Choice.jsx b/src/components/Choice/Choice.jsx
@@ -138,7 +138,7 @@ class Choice extends React.Component {
       <Box between={2}>
         {feedback === 'error' && error && renderError(error, errorId)}
         <label htmlFor={choiceId}>
-          <Box inline between={3} dangerouslyAddClassName={styles.alignFlexStart}>
+          <Box tag="span" inline between={3} dangerouslyAddClassName={styles.alignFlexStart}>
             <span className={fakeInputClassNames} data-testid="fake-input">
               <input
                 {...safeRest(rest)}

diff --git a/src/components/Radio/__tests__/__snapshots__/Radio.spec.jsx.snap b/src/components/Radio/__tests__/__snapshots__/Radio.spec.jsx.snap
@@ -7,7 +7,7 @@ exports[`Radio renders 1`] = `
   <label
     for="the-group_the-value"
   >
-    <div
+    <span
       class="betweenRightMarginDesktop-3 inline alignFlexStart"
     >
       <span
@@ -28,7 +28,7 @@ exports[`Radio renders 1`] = `
       >
         A label
       </span>
-    </div>
+    </span>
   </label>
 </div>
 `;