fix: fix template for manage aria-attributes correctly

LUI-UI · Aug 9, 2024 · 22f8788 · 22f8788
1 parent eaf9485
commit 22f8788
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/packages/vue/src/components/MenuItem/LuiMenuItem.vue b/packages/vue/src/components/MenuItem/LuiMenuItem.vue
@@ -47,6 +47,10 @@ const props = defineProps({
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  disableWrapper: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
 })
 const slots = useSlots()
 const menuItemRef = ref<HTMLElement>()
@@ -105,11 +109,14 @@ const computedAppendAndPrependClasses = computed(() => {
   return Object.values(appendAndPrependClasses)
 })
 const computedDefaultSlotClasses = computed(() => {
-  const defaultSlotClasses: FlexGridInterface | LayoutInterface | TypographyInterface = {
-    display: 'flex flex-1',
-    alignItems: 'items-center',
-    textColor: 'text-inherit',
-  }
+  const defaultSlotClasses:
+    | FlexGridInterface
+    | LayoutInterface
+    | TypographyInterface = {
+      display: 'flex flex-1',
+      alignItems: 'items-center',
+      textColor: 'text-inherit',
+    }
   return Object.values(defaultSlotClasses)
 })
 const focus = () => menuItemRef.value?.focus()
@@ -120,7 +127,7 @@ defineExpose({
 </script>
 
 <template>
-  <li>
+  <li v-if="!disableWrapper">
     <component
       :is="tag"
       :id="menuItemId"
@@ -141,4 +148,24 @@ defineExpose({
       </span>
     </component>
   </li>
+  <component
+    :is="tag"
+    v-else
+    :id="menuItemId"
+    ref="menuItemRef"
+    role="menuitem"
+    class="lui-menu-item"
+    :class="customStyle ? '' : computedMenuItemClasses"
+    v-bind="$attrs"
+  >
+    <span v-if="$slots.prepend" :class="computedAppendAndPrependClasses">
+      <slot name="prepend" />
+    </span>
+    <div :class="computedDefaultSlotClasses">
+      <slot />
+    </div>
+    <span v-if="$slots.append" :class="computedAppendAndPrependClasses">
+      <slot name="append" />
+    </span>
+  </component>
 </template>
diff --git a/packages/vue/src/components/Tabs/LuiTabButton.vue b/packages/vue/src/components/Tabs/LuiTabButton.vue
@@ -122,6 +122,7 @@ const buttonSlotProps = computed(() => ({
     :tabindex="buttonSlotProps.tabindex"
     :aria-selected="buttonSlotProps.isSelected"
     :aria-controls="injection?.context.panels[injection.context.selectedIndex]?.id"
+    :disable-wrapper="true"
     :disabled="disabled"
     class="relative whitespace-nowrap cursor-pointer after:w-full after:h-0.5 after:absolute after:z-20 after:left-0 after:bottom-0 after:inline-block after:rounded-full"
     :class="[isSelected ? 'after:bg-primary-500' : 'after:bg-transparent']"