origam 2.17.1 → 2.18.1

package/dist/src/components/Radio/OrigamRadioGroup.vue

@@ -13,16 +13,21 @@
 					v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
 			>
 
-				<slot
-						name="label"
-						v-bind="{label, required}"
+				<div
+						:id="groupLabelId"
+						class="origam-radio-group__label"
 				>
-					<origam-label
-							:id="id"
-							:required="required"
-							:text="label"
-					/>
-				</slot>
+					<slot
+							name="label"
+							v-bind="{label, required}"
+					>
+						<origam-label
+								:required="required"
+								:text="label"
+								tag="span"
+						/>
+					</slot>
+				</div>
 
 				<origam-defaults-provider :defaults="radioDefaults">
 					<origam-selection-control-group
@@ -30,7 +35,7 @@
 							ref="origamSelectionControlGroupRef"
 							v-model="model"
 							:aria-describedby="messagesId"
-							:aria-labelledby="label ? id : undefined"
+							:aria-labelledby="groupLabelledBy"
 							:disabled="isDisabled"
 							:items="items"
 							:multiple="false"
@@ -141,6 +146,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
@@ -161,7 +168,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   items: { type: [Array, Object], required: false }
 });
-defineSlots();
+const slots = defineSlots();
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
@@ -172,6 +179,10 @@ const id = computed(() => {
   return props.id || `radio-group-${uid}`;
 });
 const model = useVModel(props, "modelValue");
+const groupLabelId = computed(() => `${id.value}-label`);
+const groupLabelledBy = computed(() => {
+  return props.label || slots.label ? groupLabelId.value : void 0;
+});
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "id", "focused", "style", "class"]);
@@ -213,3 +224,17 @@ defineExpose({
   styleId
 });
 </script>
+
+<style lang="scss" scoped>
+	/*
+	 * Le wrapper n'existe que pour porter l'id cible d'`aria-labelledby`
+	 * (#814). `display: contents` le retire de l'arbre des boites : les
+	 * enfants du slot `label` restent les elements flex directs de
+	 * `.origam-input__control`, donc la mise en page est inchangee — mesure
+	 * avant/apres identique au pixel sur les variantes « Default » et
+	 * « Slots - Label ».
+	 */
+	.origam-radio-group__label {
+		display: contents;
+	}
+</style>

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -3,8 +3,11 @@
 			:id="id"
 			ref="origamInputRef"
 			v-model="model"
+			:aria-labelledby="groupLabelledBy"
+			:aria-readonly="readonly || undefined"
 			:class="ratingFieldClasses"
 			:style="ratingFieldStyles"
+			role="radiogroup"
 			v-bind="{...rootAttrs, ...inputProps}"
 	>
 		<template
@@ -19,12 +22,15 @@
 					name="default"
 					v-bind="{id,messagesId,isDisabled,isReadonly,isValid}"
 			>
-				<div class="origam-rating-field__label">
+				<div
+						:id="groupLabelId"
+						class="origam-rating-field__label"
+				>
 					<slot name="label">
 						<origam-label
-								:for="id"
 								:required="required"
 								:text="label"
+								tag="span"
 						/>
 					</slot>
 				</div>
@@ -158,7 +164,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
+import { computed, nextTick, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamInput from "../Input/OrigamInput.vue";
 import OrigamLabel from "../Label/OrigamLabel.vue";
@@ -167,8 +173,14 @@ import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
+import {
+  RATING_FIELD_ENABLED_RADIO_SELECTOR,
+  RATING_FIELD_MUTATING_KEYS,
+  RATING_FIELD_ROOT_SELECTOR
+} from "../../consts/RatingField/rating-field.const";
 import { BLOCK } from "../../enums/Commons/anchor.enum";
 import { DENSITY } from "../../enums/Commons/density.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
 import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { SIZES } from "../../enums/Commons/size.enum";
 import { VARIANT } from "../../enums/Commons/variant.enum";
@@ -253,6 +265,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false, default: SIZES.DEFAULT },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
@@ -286,6 +300,21 @@ const name = computed(() => {
   return props.name ?? `origam-rating-${getUid()}`;
 });
 const hoverIndex = shallowRef(-1);
+const handleKeydown = (e) => {
+  if (props.disabled || props.readonly) {
+    if (RATING_FIELD_MUTATING_KEYS.includes(e.key)) e.preventDefault();
+    return;
+  }
+  if (e.key !== KEYBOARD_VALUES.HOME && e.key !== KEYBOARD_VALUES.END) return;
+  const group = e.target?.closest(RATING_FIELD_ROOT_SELECTOR);
+  if (!group) return;
+  const radios = Array.from(group.querySelectorAll(RATING_FIELD_ENABLED_RADIO_SELECTOR));
+  if (!radios.length) return;
+  e.preventDefault();
+  const target = e.key === KEYBOARD_VALUES.HOME ? radios[0] : radios[radios.length - 1];
+  target.focus();
+  if (!target.checked) target.click();
+};
 const itemState = computed(() => {
   return increments.value.map((value) => {
     const isFilled = normalizedValue.value >= value;
@@ -303,20 +332,38 @@ const eventState = computed(() => {
     const onMouseleave = () => {
       hoverIndex.value = -1;
     };
-    const onClick = () => {
-      if (props.disabled || props.readonly) return;
-      model.value = normalizedValue.value === value && props.clearable ? 0 : value;
+    const onClick = (e) => {
+      if (!props.disabled && !props.readonly) {
+        model.value = normalizedValue.value === value && props.clearable ? 0 : value;
+      }
+      void nextTick(() => resyncRadios(e?.target));
+    };
+    const onChange = (e) => {
+      if (!props.disabled && !props.readonly) {
+        model.value = value;
+      }
+      void nextTick(() => resyncRadios(e?.target));
     };
     return {
       onMouseenter: props.hover ? onMouseenter : void 0,
       onMouseleave: props.hover ? onMouseleave : void 0,
-      onClick
+      onClick,
+      onChange,
+      onKeydown: handleKeydown
     };
   });
 });
 const isChecked = (value) => {
   return normalizedValue.value === value;
 };
+const resyncRadios = (source) => {
+  const group = source?.closest(RATING_FIELD_ROOT_SELECTOR);
+  if (!group) return;
+  group.querySelectorAll('input[type="radio"]').forEach((radio) => {
+    const shouldBeChecked = isChecked(parseFloat(radio.value));
+    if (radio.checked !== shouldBeChecked) radio.checked = shouldBeChecked;
+  });
+};
 const hasLabels = computed(() => {
   return !!props.itemLabels?.length || slots.itemLabel;
 });
@@ -346,6 +393,10 @@ const ratingFieldClasses = computed(() => {
   ];
 });
 const { id, css, load, isLoaded, unload } = useStyle(ratingFieldStyles, () => props.id);
+const groupLabelId = computed(() => `${id.value}-label`);
+const groupLabelledBy = computed(() => {
+  return props.label || slots.label ? groupLabelId.value : void 0;
+});
 defineExpose({
   filterProps,
   css,

package/dist/src/components/RatingField/OrigamRatingFieldItem.vue

@@ -4,37 +4,39 @@
 			:class="ratingFieldItemClasses"
 			:style="ratingFieldItemStyles"
 	>
-		<label
-				:for="id"
-				class="origam-rating-field-item__label"
-		>
-			<span class="origam-rating-field-item__hidden">{{ t(itemAriaLabel, value, length) }}</span>
-			<slot
-					v-if="showStar"
-					name="item"
-					v-bind="{props: ratingBtnProps, value}"
+		<template v-if="showStar">
+			<label
+					:for="id"
+					class="origam-rating-field-item__label"
 			>
-				<origam-btn
-						ref="origamBtnRef"
-						v-bind="{...ratingBtnProps}"
-						@click="handleClick"
-						@mouseenter="handleMouseEnter"
-						@mouseleave="handleMouseLeave"
-				/>
-			</slot>
-		</label>
+				<span class="origam-rating-field-item__hidden">{{ t(itemAriaLabel, value, length) }}</span>
+				<slot
+						name="item"
+						v-bind="{props: ratingBtnProps, value}"
+				>
+					<origam-btn
+							ref="origamBtnRef"
+							v-bind="{...ratingBtnProps}"
+							@click="handleClick"
+							@mouseenter="handleMouseEnter"
+							@mouseleave="handleMouseLeave"
+					/>
+				</slot>
+			</label>
 
-		<input
-				:id="id"
-				:checked="checked"
-				:disabled="disabled"
-				:name="name"
-				:readonly="readonly"
-				:value="value"
-				class="origam-rating-field-item__hidden"
-				tabindex="-1"
-				type="radio"
-		/>
+			<input
+					:id="id"
+					:checked="checked"
+					:disabled="disabled"
+					:name="name"
+					:readonly="readonly"
+					:value="value"
+					class="origam-rating-field-item__hidden"
+					type="radio"
+					@change="handleChange"
+					@keydown="handleKeydown"
+			/>
+		</template>
 	</component>
 </template>
 
@@ -105,7 +107,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false }
 });
-const emits = defineEmits(["mouseenter", "mouseleave", "click"]);
+const emits = defineEmits(["mouseenter", "mouseleave", "change", "keydown", "click"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -128,6 +130,12 @@ const handleMouseLeave = (e) => {
 const handleClick = (e) => {
   emits("click", e);
 };
+const handleChange = (e) => {
+  emits("change", e);
+};
+const handleKeydown = (e) => {
+  emits("keydown", e);
+};
 const ratingFieldItemStyles = computed(() => {
   return [
     props.style
@@ -157,6 +165,30 @@ defineExpose({
 
 <style lang="scss" scoped>
 	.origam-rating-field-item {
+		/*
+		 * #812 — WCAG 2.4.7 (Focus Visible).
+		 *
+		 * The control a keyboard user focuses is the native
+		 * `<input type="radio">`, and `&__hidden` below makes it
+		 * `height:0; width:0; opacity:0`. Putting it back in the tab order
+		 * without this rule would have swapped one defect for another: the
+		 * group would become operable while the focus indicator landed on a
+		 * 0x0 transparent element. That is the trade #810 refused to make and
+		 * #812 names explicitly.
+		 *
+		 * `:has()` is the CSS-first answer — the ring is painted on the STAR,
+		 * which is the box the user actually sees, while focus stays on the
+		 * input that owns the radio semantics. No JS, no second focusable
+		 * element, no `tabindex` bookkeeping.
+		 *
+		 * `:focus-visible` (not `:focus`) so a mouse click on a star does not
+		 * leave a ring behind — the browser's own heuristic, not ours.
+		 */
+		&:has(:focus-visible) {
+			outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
+			outline-offset: var(--origam-space---1, 4px);
+		}
+
 		&__label {
 			cursor: pointer;
 
@@ -184,6 +216,22 @@ defineExpose({
 			clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 			z-index: 1;
 
+			/*
+			 * #812 — a `clip-path` clips the element's OWN outline too, not
+			 * just its descendants. Measured: with the shared
+			 * `outline-offset: 4px` above, focusing a half-step radio painted
+			 * a ring entirely outside the polygon — computed `outline-width`
+			 * read `2px` while the screenshot showed nothing at all. That is
+			 * the exact shape of a false green: the property is set, the pixel
+			 * is not there.
+			 *
+			 * An INSET offset puts the ring back inside the clipped region, so
+			 * it survives and outlines precisely the half the step selects.
+			 */
+			&:has(:focus-visible) {
+				outline-offset: calc(-1 * var(--origam-border__width---2, 2px));
+			}
+
 			&,
 			&:hover {
 				:deep(.origam-btn__overlay) {

package/dist/src/components/Select/OrigamSelect.vue

@@ -275,6 +275,7 @@ import {
   inject,
   mergeProps,
   nextTick,
+  onBeforeUnmount,
   onMounted,
   ref,
   shallowRef,
@@ -374,6 +375,8 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -442,6 +445,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   items: { type: Array, required: false, default: () => [] },
   itemTitle: { type: null, required: false, default: "title" },
   itemValue: { type: null, required: false, default: "value" },
@@ -592,6 +597,32 @@ const {
   onListScroll: handleListScroll,
   onListKeydown: handleListKeydown
 } = useScrolling(origamListRef, origamTextFieldRef);
+const scrollFrames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleScrollFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.requestAnimationFrame(() => {
+    scrollFrames.delete(id2);
+    cb();
+  });
+  scrollFrames.add(id2);
+};
+const macrotasks = /* @__PURE__ */ new Set();
+const scheduleMacrotask = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.setTimeout(() => {
+    macrotasks.delete(id2);
+    cb();
+  }, 0);
+  macrotasks.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of scrollFrames) window.cancelAnimationFrame(id2);
+  for (const id2 of macrotasks) window.clearTimeout(id2);
+  scrollFrames.clear();
+  macrotasks.clear();
+});
 const handleSelect = (item, set = true) => {
   if (item.props?.disabled) return;
   if (props.multiple) {
@@ -648,11 +679,11 @@ const handleMousedownControl = (e) => {
   if (menuDisabled.value) return;
   menu.value = !menu.value;
   if (props.autocomplete && !props.multiple && search.value) {
-    setTimeout(() => {
+    scheduleMacrotask(() => {
       const root = vm?.proxy?.$el;
       const input = root?.querySelector("input");
       input?.select();
-    }, 0);
+    });
   }
 };
 const handleMousedownMenuIcon = (e) => {
@@ -759,13 +790,11 @@ const handleKeydown = (e) => {
     if (item !== void 0) {
       model.value = [item];
       const index = displayItems.value.indexOf(item);
-      if (IN_BROWSER) {
-        window.requestAnimationFrame(() => {
-          if (index >= 0) {
-            origamVirtualScrollRef.value?.scrollToIndex(index);
-          }
-        });
-      }
+      scheduleScrollFrame(() => {
+        if (index >= 0) {
+          origamVirtualScrollRef.value?.scrollToIndex(index);
+        }
+      });
     }
   }
 };
@@ -791,7 +820,7 @@ const handleAfterLeave = () => {
 };
 const handleFocusin = () => {
   isFocused.value = true;
-  setTimeout(() => {
+  scheduleMacrotask(() => {
     listHasFocus.value = true;
   });
 };
@@ -880,13 +909,11 @@ watch(menu, () => {
     const index = displayItems.value.findIndex(
       (item) => model.value.some((s) => props.valueComparator ? props.valueComparator(s.value, item.value) : deepEqual(s.value, item.value))
     );
-    if (IN_BROWSER) {
-      window.requestAnimationFrame(() => {
-        if (index >= 0) {
-          origamVirtualScrollRef.value?.scrollToIndex(index);
-        }
-      });
-    }
+    scheduleScrollFrame(() => {
+      if (index >= 0) {
+        origamVirtualScrollRef.value?.scrollToIndex(index);
+      }
+    });
   }
 });
 watch(() => props.items, (newVal, oldVal) => {
@@ -1134,10 +1161,6 @@ defineExpose(forwardRefs({
 		max-width: none;
 	}
 
-	.origam-select__content .origam-menu__list {
-		max-width: none;
-	}
-
 	.origam-select__content .origam-list-item {
 		--origam-list-item---padding-inline-start: 32px;
 	}

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -113,7 +113,7 @@
 						<input
 								:id="`${id}__start`"
 								:aria-describedby="messagesId"
-								:aria-label="label ? `${label} (start)` : undefined"
+								:aria-label="rangeStartAriaLabel"
 								:class="nativeInputClasses(false)"
 								:disabled="isDisabled"
 								:max="resolvedMax"
@@ -139,7 +139,7 @@
 						<input
 								:id="`${id}__stop`"
 								:aria-describedby="messagesId"
-								:aria-label="label ? `${label} (end)` : undefined"
+								:aria-label="rangeEndAriaLabel"
 								:class="nativeInputClasses(true)"
 								:disabled="isDisabled"
 								:max="resolvedMax"
@@ -327,7 +327,7 @@
 			</template>
 			<template v-else>
 				<input
-						:aria-label="label ? `${label} (start)` : undefined"
+						:aria-label="rangeStartAriaLabel"
 						:class="nativeInputClasses(false)"
 						:disabled="disabled"
 						:max="resolvedMax"
@@ -351,7 +351,7 @@
 				/>
 
 				<input
-						:aria-label="label ? `${label} (end)` : undefined"
+						:aria-label="rangeEndAriaLabel"
 						:class="nativeInputClasses(true)"
 						:disabled="disabled"
 						:max="resolvedMax"
@@ -416,6 +416,7 @@ import OrigamSliderFieldTrack from "./OrigamSliderFieldTrack.vue";
 import { OrigamAudioWaveform } from "../Audio";
 import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
 import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useRtl } from "../../composables/Commons/rtl.composable";
@@ -513,6 +514,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
@@ -524,6 +527,7 @@ defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const slots = useSlots();
+const { t } = useLocale();
 const isFieldVariant = computed(() => props.variant === SLIDER_FIELD_VARIANT.FIELD);
 const isAudioVariant = computed(() => props.variant === SLIDER_FIELD_VARIANT.AUDIO);
 const isBareVariant = computed(() => !isFieldVariant.value);
@@ -531,6 +535,12 @@ const isRange = computed(() => !!props.range);
 const isVertical = computed(() => props.direction === DIRECTION.VERTICAL);
 const isReversed = computed(() => !!props.reverse);
 const indexFromEnd = computed(() => isVertical.value !== isReversed.value);
+const rangeStartAriaLabel = computed(() => {
+  return props.label ? t("origam.slider_field.thumb_start_aria_label", props.label) : void 0;
+});
+const rangeEndAriaLabel = computed(() => {
+  return props.label ? t("origam.slider_field.thumb_end_aria_label", props.label) : void 0;
+});
 const steps = useSteps(props);
 const { min: resolvedMin, max: resolvedMax, step: resolvedStep, roundValue } = steps;
 const model = useVModel(
@@ -642,8 +652,8 @@ const parsedTicks = computed(() => {
     if (!step || span <= 0) return [];
     const count = span / step;
     if (!isFinite(count)) return [];
-    return createRange(count + 1).map((t) => {
-      const value = resolvedMin.value + t * step;
+    return createRange(count + 1).map((t2) => {
+      const value = resolvedMin.value + t2 * step;
       return {
         value,
         position: toPercent(value)
@@ -651,10 +661,10 @@ const parsedTicks = computed(() => {
     });
   }
   if (Array.isArray(ticksProp)) {
-    return ticksProp.map((t) => ({
-      value: t,
-      position: toPercent(t),
-      label: String(t)
+    return ticksProp.map((t2) => ({
+      value: t2,
+      position: toPercent(t2),
+      label: String(t2)
     }));
   }
   if (typeof ticksProp === "object" && ticksProp !== null) {

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -123,7 +123,7 @@ const stackClasses = computed(() => {
   ];
 });
 const resolvedDomId = computed(() => `origam-snackbar-group-${props.id}`);
-const { id: styleId, css, load, isLoaded, unload } = useStyle(stackStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(stackStyles, () => resolvedDomId.value);
 defineExpose({
   filterProps,
   visibleItems,

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -229,6 +229,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },

package/dist/src/components/Tabs/OrigamTab.vue

@@ -13,7 +13,6 @@
 			:aria-disabled="isDisabled || undefined"
 			:tabindex="tabIndex"
 			:disabled="isDisabled || undefined"
-			:data-origam-tab-id="groupItem?.id"
 			@click="handleClick"
 	>
 		<span
@@ -75,6 +74,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import vContrast from "../../directives/Contrast/contrast.directive";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_LINK_KEY } from "../../consts/Tabs/tabs.const";
 const props = defineProps({
   tag: { type: String, required: false, default: "button" },
@@ -93,7 +93,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 defineEmits(["group:selected"]);
 defineSlots();
@@ -116,7 +118,8 @@ const slotProps = computed(() => ({
   value: groupItem.value.value,
   disabled: groupItem.disabled.value
 }));
-const tabDomId = computed(() => props.id || `origam-tab-${groupItem.id}`);
+const uid = getUid();
+const tabDomId = computed(() => props.id || `origam-tab-${uid}`);
 watchEffect(() => {
   const self = groupItem.group.items.value.find((item) => item.id === groupItem.id);
   if (self) self.domId = tabDomId.value;
@@ -126,7 +129,7 @@ const panelId = computed(() => {
   if (!panelsGroup) return void 0;
   const panel = panelsGroup.items.value.find((item) => item.value === groupItem.value.value);
   if (!panel) return void 0;
-  return panel.domId || `origam-tab-panel-${panel.id}`;
+  return panel.domId;
 });
 const ariaSelected = computed(() => groupItem.isSelected.value ? "true" : "false");
 const tabIndex = computed(() => {