fix: use spans inside labels for correct html (#2217)

Author: felix-ico

packages/components/src/components/checkbox/__snapshots__/checkbox.spec.ts.snap

@@ -5,8 +5,8 @@ exports[`Checkbox should match snapshot 1`] = `
   <!---->
   <input id="input-checkbox-0" part="input" type="checkbox" value="">
   <label htmlfor="input-checkbox-0" part="container">
-    <div part="checkbox"></div>
-    <div part="label"></div>
+    <span part="checkbox"></span>
+    <span part="label"></span>
   </label>
 </scale-checkbox>
 `;
@@ -16,8 +16,8 @@ exports[`Checkbox should match snapshot 2`] = `
   <!---->
   <input aria-describedby="helper-message-2" id="input-checkbox-2" part="input" type="checkbox" value="">
   <label htmlfor="input-checkbox-2" part="container">
-    <div part="checkbox"></div>
-    <div part="label"></div>
+    <span part="checkbox"></span>
+    <span part="label"></span>
   </label>
   <div aria-live="polite" aria-relevant="additions removals" id="helper-message-2" part="helper-text">
     <scale-icon-alert-information size="11"></scale-icon-alert-information>

packages/components/src/components/checkbox/checkbox.tsx

@@ -195,9 +195,9 @@ export class Checkbox {
           onChange={this.handleChange}
         />
         <label part="container" htmlFor={this.inputId}>
-          <div part="checkbox">{this.renderIcon()}</div>
+          <span part="checkbox">{this.renderIcon()}</span>
           {/* TODO: discuss deprecation of the slot (move closer so W3C spec) */}
-          <div part="label">{this.label || <slot></slot>}</div>
+          <span part="label">{this.label || <slot></slot>}</span>
         </label>
         {this.renderHelperText(helperText)}
       </Host>

packages/components/src/components/switch/__snapshots__/switch.spec.ts.snap

@@ -5,17 +5,17 @@ exports[`Switch should match snapshot 1`] = `
   <div class="switch switch--focus-visible-not-supported switch--size-large">
     <label class="switch__wrapper" id="switch-0-label">
       <input aria-labelledby="switch-0-label" class="switch__control" id="switch-0" type="checkbox">
-      <div aria-hidden="true" class="switch__toggle">
-        <div class="switch__thumb">
+      <span aria-hidden="true" class="switch__toggle">
+        <span class="switch__thumb">
           <scale-icon-action-checkmark decorative="" selected="" size="12"></scale-icon-action-checkmark>
-        </div>
-        <div class="switch__io-text">
+        </span>
+        <span class="switch__io-text">
           <span>
             0
           </span>
-        </div>
-      </div>
-      <div aria-hidden="true" class="switch__toggle--overlay"></div>
+        </span>
+      </span>
+      <span aria-hidden="true" class="switch__toggle--overlay"></span>
     </label>
   </div>
 </scale-switch>

packages/components/src/components/switch/switch.css

@@ -202,6 +202,7 @@ scale-switch {
   transition-timing-function: var(--transition-easing);
   color: transparent;
   border: 1px solid rgba(0, 0, 0, 0.04);
+  display: inline-block;
 }
 
 .switch--checked .switch__thumb {

packages/components/src/components/switch/switch.tsx

@@ -70,15 +70,15 @@ export class Switch {
                 emitEvent(this, 'scaleChange', { value: this.checked });
               }}
             />
-            <div class="switch__toggle" aria-hidden="true">
-              <div class="switch__thumb">
+            <span class="switch__toggle" aria-hidden="true">
+              <span class="switch__thumb">
                 <scale-icon-action-checkmark size={12} decorative selected />
-              </div>
-              <div class="switch__io-text">
+              </span>
+              <span class="switch__io-text">
                 <span>{this.checked ? 'I' : '0'}</span>
-              </div>
-            </div>
-            <div class="switch__toggle--overlay" aria-hidden="true"></div>
+              </span>
+            </span>
+            <span class="switch__toggle--overlay" aria-hidden="true"></span>
             {this.label && <span class="switch__label-text">{this.label}</span>}
           </label>
         </div>