fix(VBtn): use <span> inside of html buttons

fixes #15029
vuetifyjs · Jul 15, 2022 · 4ee21dc · 4ee21dc
1 parent 4f5795b
commit 4ee21dc
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -163,13 +163,13 @@ export const VBtn = defineComponent({
                 },
               }}
             >
-              <div class="v-btn__prepend">
+              <span class="v-btn__prepend">
                 { slots.prepend?.() ?? (<VIcon />) }
-              </div>
+              </span>
             </VDefaultsProvider>
           ) }
 
-          <div class="v-btn__content" data-no-activator="">
+          <span class="v-btn__content" data-no-activator="">
             <VDefaultsProvider
               key="content"
               defaults={{
@@ -186,7 +186,7 @@ export const VBtn = defineComponent({
                 )
               ) }
             </VDefaultsProvider>
-          </div>
+          </span>
 
           { !props.icon && hasAppend && (
             <VDefaultsProvider
@@ -197,9 +197,9 @@ export const VBtn = defineComponent({
                 },
               }}
             >
-              <div class="v-btn__append">
+              <span class="v-btn__append">
                 { slots.append?.() ?? (<VIcon />) }
-              </div>
+              </span>
             </VDefaultsProvider>
           ) }
 

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
@@ -72,17 +72,17 @@ export const VExpansionPanelTitle = defineComponent({
         onClick={ !props.readonly ? expansionPanel.toggle : undefined }
         v-ripple={ props.ripple }
       >
-        <div class="v-expansion-panel-title__overlay" />
+        <span class="v-expansion-panel-title__overlay" />
 
         { slots.default?.(slotProps.value) }
 
         { !props.hideActions && (
-          <div class="v-expansion-panel-title__icon">
+          <span class="v-expansion-panel-title__icon">
             {
               slots.actions ? slots.actions(slotProps.value)
               : <VIcon icon={ expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon } />
             }
-          </div>
+          </span>
         ) }
       </button>
     ))

diff --git a/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap b/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`VListItem should match a snapshot 1`] = `
 <div class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text">
-  <div class="v-list-item__underlay">
-  </div>
+  <span class="v-list-item__underlay">
+  </span>
 </div>
 `;
diff --git a/packages/vuetify/src/composables/variant.tsx b/packages/vuetify/src/composables/variant.tsx
@@ -28,9 +28,9 @@ export interface VariantProps {
 export function genOverlays (isClickable: boolean, name: string) {
   return (
     <>
-      { isClickable && <div key="overlay" class={`${name}__overlay`} /> }
+      { isClickable && <span key="overlay" class={`${name}__overlay`} /> }
 
-      <div key="underlay" class={`${name}__underlay`} />
+      <span key="underlay" class={`${name}__underlay`} />
     </>
   )
 }