origam 2.17.1 → 2.18.0

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -16,6 +16,7 @@
 			@blur="handleBlur"
 			@change="handleChange"
 			@click:clear="handleClear"
+			@input="handleInput"
 			@mousedown:control="handleMousedownControl"
 	>
 		<template
@@ -244,6 +245,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 },
@@ -312,6 +315,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 },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
 defineEmits(["update:menu", "update:modelValue"]);
@@ -373,6 +378,17 @@ const isMultiple = computed(() => {
 const isRange = computed(() => {
   return props.range && model.value.length > 1;
 });
+const commitTypedDate = (raw) => {
+  if (props.multiple || props.range) return;
+  if (raw === "") {
+    model.value = [];
+    return;
+  }
+  const parsed = adapter.date(raw);
+  if (!parsed || !adapter.isValid(parsed)) return;
+  if (adapter.format(parsed, "keyboardDate") !== raw) return;
+  model.value = [adapter.toISO(parsed)];
+};
 const isFocused = shallowRef(false);
 const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
@@ -419,8 +435,12 @@ const handleBlur = (e) => {
     isFocused.value = true;
   }
 };
-const handleChange = () => {
+const handleInput = (e) => {
+  commitTypedDate(e.target?.value ?? "");
+};
+const handleChange = (e) => {
   if (matchesSelector(origamTextFieldRef.value, ":autofill") || matchesSelector(origamTextFieldRef.value, ":-webkit-autofill")) {
+    commitTypedDate(e.target?.value ?? "");
   }
 };
 const handleAfterLeave = () => {

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -266,6 +266,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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   status: { type: null, required: false },
@@ -398,6 +400,29 @@ defineExpose(forwardRefs({
 			border-radius: var(--origam-dialog---border-radius, 12px);
 			box-shadow: var(--origam-dialog---box-shadow);
 
+			// #563 — la boite qui porte le PLAFOND doit porter le DEFILEMENT.
+			//
+			// `.origam-overlay__content` est `position: absolute` et de hauteur
+			// AUTO : le `max-height: 100%` pose plus bas sur `.origam-card` se
+			// resout donc en `none` (pourcentage contre un parent sans hauteur
+			// definie). La carte grandit sans plafond, et cette boite la laissait
+			// deborder en `overflow: visible`. Mesure Chromium sur `develop`,
+			// dialogue Design + 900px injectes dans `#footer` :
+			//
+			//   .origam-card       overflow hidden  clientH 1047  scrollH 1047  -> ne defile pas
+			//   .origam-overlay__content  visible                               -> ne rogne pas
+			//   document                                                        -> bloque (scrollStrategy 'block')
+			//   => pied du dialogue 459px SOUS le viewport, aucun recours.
+			//
+			// Contrairement a ce que decrit le ticket, `.origam-card__content`
+			// ne defilait pas davantage : sans hauteur definie en amont il
+			// grandit lui aussi (clientH 1647 === scrollH 1647). AUCUNE boite du
+			// dialogue ne defilait.
+			//
+			// La branche `&--fullscreen` ci-dessous pose deja exactement cette
+			// declaration : ceci aligne le mode par defaut sur elle.
+			overflow-y: auto;
+
 			&,
 			> form {
 				> .origam-card {

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -3,6 +3,8 @@
 			:id="id"
 			ref="origamDialogRef"
 			v-model="isActive"
+			:class="rootClasses"
+			:style="rootStyles"
 			v-bind="dialogProps"
 			@is-read="handleIsRead"
 	>
@@ -240,6 +242,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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   status: { type: null, required: false },
@@ -256,6 +260,8 @@ const origamDialogRef = ref();
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");
 const validatable = ref(false);
+const rootClasses = computed(() => [props.class]);
+const rootStyles = computed(() => props.style);
 const dialogProps = computed(() => {
   return origamDialogRef.value?.filterProps(props, ["class", "style", "id", "modelValue"]);
 });

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -175,6 +175,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 },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -20,8 +20,7 @@
 		      v-if="hasPrepend"
 		      key="prepend"
 		      class="origam-expansion-panel-header__prepend"
-		      :role="isPrependClickable ? 'button' : undefined"
-		      :tabindex="isPrependClickable ? 0 : undefined"
+		      v-bind="prependCommandAttrs"
 		      @click="handleClickPrepend"
 		      @keydown="handleKeydownPrepend"
       >
@@ -65,8 +64,7 @@
 					v-if="hasAppend || !hideActions"
 					key="append"
 					class="origam-expansion-panel-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -163,6 +161,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 },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
@@ -207,8 +207,8 @@ const hasTitle = computed(() => {
 const {
   hasAppend,
   hasPrepend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,

package/dist/src/components/Field/OrigamField.vue

@@ -40,8 +40,7 @@
 					v-if="hasPrependInner"
 					key="prependInner"
 					class="origam-field__prepend-inner"
-					:role="isPrependInnerClickable ? 'button' : undefined"
-					:tabindex="isPrependInnerClickable ? 0 : undefined"
+					v-bind="prependInnerCommandAttrs"
 					@click="handleClickPrependInner"
 					@keydown="handleKeydownPrependInner"
 			>
@@ -129,8 +128,7 @@
 					v-if="hasAppendInner"
 					key="appendInner"
 					class="origam-field__append-inner"
-					:role="isAppendInnerClickable ? 'button' : undefined"
-					:tabindex="isAppendInnerClickable ? 0 : undefined"
+					v-bind="appendInnerCommandAttrs"
 					@click="handleClickAppendInner"
 					@keydown="handleKeydownAppendInner"
 			>
@@ -174,7 +172,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamExpandX from "../Transition/OrigamExpandX.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
@@ -196,6 +194,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVariant } from "../../composables/Commons/variant.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { DENSITY } from "../../enums/Commons/density.enum";
 import { EASING } from "../../enums/Transition/transition.enum";
@@ -233,6 +232,8 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   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 },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -286,13 +287,13 @@ const slots = useSlots();
 const attrs = useAttrs();
 const { t } = useLocale();
 const {
+  prependInnerCommandAttrs,
+  appendInnerCommandAttrs,
   hasAppendInner,
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner,
   onKeydownAppendInner: handleKeydownAppendInner,
   onKeydownPrependInner: handleKeydownPrependInner,
-  isAppendInnerClickable,
-  isPrependInnerClickable,
   clickClear: handleClickClear,
   hasPrependInner,
   hasClear
@@ -401,6 +402,21 @@ const { isOn: active, config: activeState, toggle: handleActive } = useStateFlag
 const isActive = computed(() => {
   return props.dirty || active.value || hasPrefix.value || hasSuffix.value;
 });
+const labelFrames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleLabelFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = requestAnimationFrame(() => {
+    labelFrames.delete(id2);
+    cb();
+  });
+  labelFrames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of labelFrames) cancelAnimationFrame(id2);
+  labelFrames.clear();
+});
 onMounted(() => {
   watch(isFocused, (newVal, oldVal) => {
     if (newVal !== oldVal) {
@@ -411,7 +427,7 @@ onMounted(() => {
     if (hasLabel.value && newVal !== oldVal) {
       const el = origamLabelRef.value.$el;
       const targetEl = origamFloatingLabelRef.value.$el;
-      requestAnimationFrame(() => {
+      scheduleLabelFrame(() => {
         const rect = nullifyTransforms(el);
         const targetRect = targetEl.getBoundingClientRect();
         const x = targetRect.x - rect.x;
@@ -569,8 +585,23 @@ defineExpose({
 		// Floor the inline padding at the effective radius (capped at the control
 		// height for pills). Prepended fields opt out below — their prepend icon
 		// already fills the corner.
+		//
+		// ⛔ LE PLANCHER EST UN CANAL, PAS UNE EXPRESSION FIGEE (#800).
+		// Un champ dont le contenu est CENTRE et sans etiquette (OtpInputField)
+		// n'a aucun risque de collision avec le coin : le plancher n'y a pas
+		// lieu d'etre, et l'appliquer decentre le chiffre. Ce cas s'exprimait
+		// jusqu'ici par un `--origam-field---padding-start: 0` SANS UNITE, qui
+		// melange `<number>` et `<length>` dans le `max()` et fait JETER la
+		// declaration entiere au computed-value time. Le rendu voulu etait donc
+		// obtenu par une erreur CSS — mesure Chromium : mettre l'unite donne
+		// `padding-inline-start: 4px` avec `padding-inline-end: 0px`, soit un
+		// chiffre decentre de 2px. Un consommateur qui veut vraiment zero met
+		// desormais `--origam-field---corner-clearance: 0px` : c'est explicite,
+		// ca survit a un refactor du `max()`, et ca ne repose sur rien d'invalide.
+		--origam-field---corner-clearance:
+			min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px));
 		padding-inline:
-			max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)))
+			max(var(--origam-field---padding-start), var(--origam-field---corner-clearance))
 			var(--origam-field---padding-end);
 		backdrop-filter: var(--origam-field---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
@@ -614,7 +645,7 @@ defineExpose({
 			padding-bottom: var(--origam-field__input---padding-bottom);
 			position: relative;
 			width: 100%;
-			row-gap: calc(8px - var(--origam-input---density, 0));
+			row-gap: calc(8px - var(--origam-input---density, 0px));
 			border: none;
 			background: transparent;
 
@@ -746,9 +777,9 @@ defineExpose({
 		&__label {
 			contain: layout paint;
 			display: block;
-			margin-inline-start: var(--origam-field__input---padding-start, 0);
-			margin-inline-end: var(--origam-field__input---padding-end, 0);
-			max-width: calc(100% - var(--origam-field__input---padding-start, 0) - var(--origam-field__input---padding-end, 0));
+			margin-inline-start: var(--origam-field__input---padding-start, 0px);
+			margin-inline-end: var(--origam-field__input---padding-end, 0px);
+			max-width: calc(100% - var(--origam-field__input---padding-start, 0px) - var(--origam-field__input---padding-end, 0px));
 			pointer-events: none;
 			position: absolute;
 			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px) - 8px);
@@ -778,7 +809,8 @@ defineExpose({
 
 			#{$this}__outline {
 				&--start {
-					flex: 0 0 max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)));
+					// Meme plancher que le padding, meme canal — cf. #800.
+					flex: 0 0 max(var(--origam-field---padding-start), var(--origam-field---corner-clearance));
 				}
 
 				&--end {
@@ -1083,7 +1115,7 @@ defineExpose({
 						// label"). Keep the 4px on the inline-end for notch
 						// breathing room.
 						margin-block: 0;
-						margin-inline: var(--origam-field__input---padding-start, 0) 4px;
+						margin-inline: var(--origam-field__input---padding-start, 0px) 4px;
 					}
 				}
 

package/dist/src/components/FileField/OrigamFileField.vue

@@ -454,6 +454,8 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false, default: MDI_ICONS.PAPERCLIP },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false, default: true },
+  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 },
@@ -520,7 +522,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 }
 });
 const isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
 const displayMode = computed(() => {

package/dist/src/components/Icon/OrigamSvgIcon.vue

@@ -6,7 +6,7 @@
 			:style="iconStyles"
 	>
 		<svg
-				aria-hidden="true"
+				:aria-hidden="ariaHidden"
 				class="origam-icon__svg"
 				focusable="false"
 				viewBox="0 0 24 24"
@@ -40,6 +40,7 @@ import { computed, StyleValue, toRef } from "vue";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
 import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useIconAccessibility } from "../../composables/Icon/iconAccessibility.composable";
 import { useMargin } from "../../composables/Commons/margin.composable";
 import { usePadding } from "../../composables/Commons/padding.composable";
 import { useProps } from "../../composables/Commons/props.composable";
@@ -101,6 +102,7 @@ defineSlots();
 const isArray = (data) => {
   return Array.isArray(data);
 };
+const { ariaHidden } = useIconAccessibility();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Img/OrigamImg.vue

@@ -260,8 +260,11 @@ const getSrc = () => {
   if (img) currentSrc.value = img.currentSrc || img.src;
 };
 let timer = -1;
+const bootFrames = /* @__PURE__ */ new Set();
 onBeforeUnmount(() => {
   clearTimeout(timer);
+  for (const id2 of bootFrames) cancelAnimationFrame(id2);
+  bootFrames.clear();
 });
 const pollForSize = (img, timeout = 100) => {
   const poll = () => {
@@ -285,11 +288,15 @@ let stop = null;
 const markBooted = (val) => {
   if (val) {
     if (IN_BROWSER) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
+      const outer = requestAnimationFrame(() => {
+        bootFrames.delete(outer);
+        const inner = requestAnimationFrame(() => {
+          bootFrames.delete(inner);
           isBooted.value = true;
         });
+        bootFrames.add(inner);
       });
+      bootFrames.add(outer);
     }
     stop?.();
   }

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamInfiniteScrollIntersect from "./OrigamInfiniteScrollIntersect.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
@@ -125,6 +125,7 @@ import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
 import { INFINITE_SCROLL_MODE, INFINITE_SCROLL_SIDE, INFINITE_SCROLL_STATUS } from "../../enums/InfiniteScroll/infinite-scroll.enum";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
@@ -213,25 +214,40 @@ const handleIntersect = ({ side, isIntersecting: _isIntersecting }) => {
     intersecting(side);
   }
 };
+const frames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.requestAnimationFrame(() => {
+    frames.delete(id2);
+    cb();
+  });
+  frames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of frames) window.cancelAnimationFrame(id2);
+  frames.clear();
+});
+const scheduleFrames = (count, cb) => {
+  scheduleFrame(count <= 1 ? cb : () => scheduleFrames(count - 1, cb));
+};
+const rearmIntersect = () => {
+  intersecting(currentSide.value);
+};
+const afterDoneTick = () => {
+  if (disposed) return;
+  if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
+  if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
+    setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+  }
+  if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
+    nextTick(() => scheduleFrames(3, rearmIntersect));
+  }
+};
 const done = (_status) => {
   status.value = _status;
-  nextTick(() => {
-    if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
-    if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
-      setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
-    }
-    if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
-      nextTick(() => {
-        window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-              intersecting(currentSide.value);
-            });
-          });
-        });
-      });
-    }
-  });
+  nextTick(afterDoneTick);
 };
 const intersecting = (side) => {
   if (props.mode !== "manual" && !isIntersecting.value) return;

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			ref="rootRef"
 			class="origam-inline-edit"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -76,8 +77,8 @@
 						data-cy="origam-inline-edit-input"
 						hide-details
 						@update:model-value="handleInput"
+						@focusout="handleFocusOut"
 						@keydown="handleKeyDown"
-						@blur="handleBlur"
 				>
 					<template
 							v-if="showActions"
@@ -131,8 +132,8 @@
 						data-cy="origam-inline-edit-input"
 						hide-details
 						@update:model-value="handleInput"
+						@focusout="handleFocusOut"
 						@keydown="handleKeyDown"
-						@blur="handleBlur"
 				>
 					<template
 							v-if="showActions"
@@ -260,6 +261,13 @@ const {
 }));
 const inputRef = ref(null);
 const errorId = `origam-inline-edit-error-${useId()}`;
+const rootRef = ref(null);
+const rootEl = () => {
+  const r = rootRef.value;
+  if (!r) return null;
+  const el = r instanceof Element ? r : r.$el;
+  return el instanceof HTMLElement ? el : null;
+};
 const displayValue = computed(() => {
   const v = props.modelValue;
   if (v === null || v === void 0) return "";
@@ -280,16 +288,34 @@ const handleEnterEdit = () => {
   edit();
   emit("edit");
 };
+let restoreFocusOnLeave = false;
+const noteTransition = (fromFocusOut) => {
+  if (fromFocusOut) {
+    restoreFocusOnLeave = false;
+    return;
+  }
+  if (typeof document === "undefined") {
+    restoreFocusOnLeave = false;
+    return;
+  }
+  const root = rootEl();
+  const active = document.activeElement;
+  restoreFocusOnLeave = !!root && !!active && root.contains(active);
+};
 const handleConfirm = () => {
+  noteTransition(false);
   void confirm();
 };
 const handleCancel = () => {
+  noteTransition(false);
   cancel();
 };
 const handleInput = (value) => {
   setValue(value ?? "");
 };
 const handleKeyDown = (event) => {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) return;
   if (event.key === "Enter" && props.confirmOnEnter && !props.multiline) {
     event.preventDefault();
     handleConfirm();
@@ -305,13 +331,28 @@ const handleKeyDown = (event) => {
     handleCancel();
   }
 };
-const handleBlur = () => {
+const handleFocusOut = (event) => {
   if (!props.confirmOnBlur) return;
+  if (!isEditing.value) return;
   if (isPending.value) return;
-  handleConfirm();
+  const root = rootEl();
+  const next = event.relatedTarget;
+  if (root && next instanceof Node && root.contains(next)) return;
+  noteTransition(true);
+  void confirm();
+};
+const restoreFocusAfterEdit = async () => {
+  if (!restoreFocusOnLeave) return;
+  restoreFocusOnLeave = false;
+  await nextTick();
+  const target = rootEl()?.querySelector('[data-cy="origam-inline-edit-display"]');
+  if (target && typeof target.focus === "function") target.focus();
 };
 watch(isEditing, async (next) => {
-  if (!next) return;
+  if (!next) {
+    void restoreFocusAfterEdit();
+    return;
+  }
   if (!props.autoFocus) return;
   await nextTick();
   const el = inputRef.value;

package/dist/src/components/Input/OrigamInput.vue

@@ -9,8 +9,7 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-input__prepend"
-		    :role="isPrependClickable ? 'button' : undefined"
-		    :tabindex="isPrependClickable ? 0 : undefined"
+		    v-bind="prependCommandAttrs"
 		    @click="handleClickPrepend"
 		    @keydown="handleKeydownPrepend"
     >
@@ -44,8 +43,7 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-input__append"
-				:role="isAppendClickable ? 'button' : undefined"
-				:tabindex="isAppendClickable ? 0 : undefined"
+				v-bind="appendCommandAttrs"
 				@click="handleClickAppend"
 				@keydown="handleKeydownAppend"
 		>
@@ -191,6 +189,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 },
@@ -226,8 +226,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable
+  prependCommandAttrs,
+  appendCommandAttrs
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const messages = computed(() => {
   if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {

package/dist/src/components/List/OrigamListGroup.vue

@@ -16,8 +16,10 @@
 						<origam-list-item
 								:active="isOpen"
 								:append-avatar="appendAvatar"
+								:append-aria-label="appendAriaLabel"
 								:append-icon="appendActivatorIcon"
 								:prepend-avatar="prependAvatar"
+								:prepend-aria-label="prependAriaLabel"
 								:prepend-icon="prependActivatorIcon"
 								:title="title"
 								:value="value"
@@ -112,6 +114,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 },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false }