origam 2.17.1 → 2.18.1

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

@@ -27,6 +27,7 @@
 import { computed, inject, ref, StyleValue, watchEffect } from "vue";
 import { useGroupItem } from "../../composables/Commons/groupItem.composable";
 import { useLazy } from "../../composables/Commons/lazy.composable";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import {
@@ -54,7 +55,8 @@ const panelsCtx = inject(ORIGAM_TAB_PANELS_CTX_KEY, null);
 if (!groupItem) {
   throw new Error("[Origam] <OrigamTabPanel> must be used inside an <OrigamTabPanels>");
 }
-const panelDomId = computed(() => props.id || `origam-tab-panel-${groupItem.id}`);
+const uid = getUid();
+const panelDomId = computed(() => props.id || `origam-tab-panel-${uid}`);
 watchEffect(() => {
   const self = groupItem.group.items.value.find((item) => item.id === groupItem.id);
   if (self) self.domId = panelDomId.value;
@@ -64,7 +66,7 @@ const tabLabelledBy = computed(() => {
   if (!tabsGroup) return void 0;
   const tab = tabsGroup.items.value.find((item) => item.value === groupItem.value.value);
   if (!tab) return void 0;
-  return tab.domId || `origam-tab-${tab.id}`;
+  return tab.domId;
 });
 const isShown = computed(() => groupItem.isSelected.value);
 const { hasContent } = useLazy({ eager: !!props.eager }, isShown);

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

@@ -85,7 +85,9 @@ const slotDefaults = computed(() => ({
 const ariaOrientation = computed(() => props.direction === DIRECTION.VERTICAL ? "vertical" : "horizontal");
 const focusTab = (id2) => {
   if (!rootRef.value) return;
-  const target = rootRef.value.querySelector(`[data-origam-tab-id="${id2}"]`);
+  const domId = items.value.find((item) => item.id === id2)?.domId;
+  if (!domId) return;
+  const target = rootRef.value.querySelector(`[id=${JSON.stringify(domId)}]`);
   target?.focus();
 };
 const focusFirstNonDisabled = (offset) => {
@@ -109,12 +111,12 @@ const handleKeydown = (event) => {
   const currentId = selected.value[0];
   if (event.key === prevKey) {
     event.preventDefault();
-    prev();
-    if (selected.value[0] != null) focusTab(selected.value[0]);
+    const movedTo = prev();
+    if (movedTo != null) focusTab(movedTo);
   } else if (event.key === nextKey) {
     event.preventDefault();
-    next();
-    if (selected.value[0] != null) focusTab(selected.value[0]);
+    const movedTo = next();
+    if (movedTo != null) focusTab(movedTo);
   } else if (event.key === "Home") {
     event.preventDefault();
     focusFirstNonDisabled(1);

package/dist/src/components/TextField/OrigamTextField.vue

@@ -245,6 +245,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 },
@@ -312,7 +314,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 emits = defineEmits(["click:control", "mousedown:control", "valid", "complete", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -332,6 +332,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 },
@@ -399,7 +401,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 emits = defineEmits(["update:height", "click:control", "mousedown:control", "format", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();

package/dist/src/components/Transition/OrigamExpandX.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { camelize, computed, Transition, TransitionGroup } from "vue";
+import { camelize, computed, onBeforeUnmount, Transition, TransitionGroup } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { TRANSITION_MODE } from "../../enums/Transition/transition.enum";
 const props = defineProps({
@@ -29,6 +29,22 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const scheduleFrame = (cb) => {
+  if (disposed) return;
+  const id = requestAnimationFrame(() => {
+    frames.delete(id);
+    if (disposed) return;
+    cb();
+  });
+  frames.add(id);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) cancelAnimationFrame(id);
+  frames.clear();
+});
 const tag = computed(() => props.group ? TransitionGroup : Transition);
 const rootProps = computed(() => {
   const bind = {
@@ -88,7 +104,7 @@ const handleEnter = (el) => {
   if (expandedParentClass && element._parent) {
     element._parent.classList.add(expandedParentClass);
   }
-  requestAnimationFrame(() => {
+  scheduleFrame(() => {
     element.style[sizeProperty] = offset;
   });
 };
@@ -128,7 +144,7 @@ const handleLeave = (el) => {
   if (props.hideOnLeave) {
     element.style.setProperty("display", "none", "important");
   } else {
-    requestAnimationFrame(() => element.style[sizeProperty] = "0");
+    scheduleFrame(() => element.style[sizeProperty] = "0");
   }
 };
 const handleAfterLeave = (el) => {

package/dist/src/components/Transition/OrigamExpandY.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { camelize, computed, Transition, TransitionGroup } from "vue";
+import { camelize, computed, onBeforeUnmount, Transition, TransitionGroup } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { TRANSITION_MODE } from "../../enums/Transition/transition.enum";
 const props = defineProps({
@@ -29,6 +29,22 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const scheduleFrame = (cb) => {
+  if (disposed) return;
+  const id = requestAnimationFrame(() => {
+    frames.delete(id);
+    if (disposed) return;
+    cb();
+  });
+  frames.add(id);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) cancelAnimationFrame(id);
+  frames.clear();
+});
 const tag = computed(() => props.group ? TransitionGroup : Transition);
 const rootProps = computed(() => {
   const bind = {
@@ -88,7 +104,7 @@ const handleEnter = (el) => {
   if (expandedParentClass && element._parent) {
     element._parent.classList.add(expandedParentClass);
   }
-  requestAnimationFrame(() => {
+  scheduleFrame(() => {
     element.style[sizeProperty] = offset;
   });
 };
@@ -128,7 +144,7 @@ const handleLeave = (el) => {
   if (props.hideOnLeave) {
     element.style.setProperty("display", "none", "important");
   } else {
-    requestAnimationFrame(() => element.style[sizeProperty] = "0");
+    scheduleFrame(() => element.style[sizeProperty] = "0");
   }
 };
 const handleAfterLeave = (el) => {

package/dist/src/components/Transition/OrigamTranslateScale.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onBeforeUnmount } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { EASING } from "../../enums/Transition/transition.enum";
 import { animate } from "../../utils/Commons/animation.util";
@@ -22,6 +22,26 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const pending = /* @__PURE__ */ new Set();
+const nextFrame = () => new Promise((resolve) => {
+  if (disposed) return resolve();
+  pending.add(resolve);
+  const id = requestAnimationFrame(() => {
+    frames.delete(id);
+    pending.delete(resolve);
+    resolve();
+  });
+  frames.add(id);
+});
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) cancelAnimationFrame(id);
+  frames.clear();
+  for (const resolve of pending) resolve();
+  pending.clear();
+});
 const hasTarget = computed(() => {
   return !!props.target;
 });
@@ -36,8 +56,9 @@ const handleBeforeEnter = (el) => {
   el.style.visibility = "hidden";
 };
 const handleEnter = async (el, done) => {
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await nextFrame();
+  await nextFrame();
+  if (disposed) return;
   el.style.visibility = "";
   const { x, y, sx, sy, speed } = getDimensions(props.target, el);
   const animation = animate(el, [
@@ -67,7 +88,8 @@ const handleBeforeLeave = (el) => {
   el.style.pointerEvents = "none";
 };
 const handleLeave = async (el, done) => {
-  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await nextFrame();
+  if (disposed) return;
   const { x, y, sx, sy, speed } = getDimensions(props.target, el);
   const animation = animate(el, [
     {},

package/dist/src/components/Video/OrigamVideo.vue

@@ -576,11 +576,12 @@ const pipSupported = computed(() => {
 const showPosterOverlay = computed(() => {
   return Boolean(props.poster) && state.paused.value && state.currentTime.value === 0 && !state.error.value;
 });
+const genericErrorMessage = computed(() => t("origam.media.playback_error"));
 const errorMessage = computed(() => {
   const err = state.error.value;
-  if (!err) return "Playback error";
+  if (!err) return genericErrorMessage.value;
   if ("message" in err && err.message) return err.message;
-  return "Playback error";
+  return genericErrorMessage.value;
 });
 const captionsLabelKey = computed(() => {
   return captionsEnabled.value ? "origam.video.disable_captions" : "origam.video.enable_captions";

package/dist/src/components/Window/OrigamWindow.vue

@@ -6,8 +6,7 @@
 			v-touch="touchOptions"
 			:class="windowClasses"
 			:style="windowStyles"
-			aria-roledescription="carousel"
-			role="region"
+			v-bind="landmarkAttrs"
 	>
 		<p
 				class="origam-window__live-region"
@@ -78,7 +77,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
+import { computed, provide, ref, shallowRef, StyleValue, useAttrs, watch } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamSpacer from "../Grids/OrigamSpacer.vue";
 import { useBorder } from "../../composables/Commons/border.composable";
@@ -91,6 +90,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts/Window/window.const";
+import { warnMissingLandmarkName } from "../../utils/Commons/a11y.util";
 import vTouch from "../../directives/Touch/touch.directive";
 import { AXIS } from "../../enums/Commons/drag.enum";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
@@ -154,6 +154,23 @@ defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
+const attrs = useAttrs();
+const hasAccessibleName = computed(() => {
+  const label = attrs["aria-label"];
+  const labelledBy = attrs["aria-labelledby"];
+  return !!(typeof label === "string" ? label.trim() : label) || !!(typeof labelledBy === "string" ? labelledBy.trim() : labelledBy);
+});
+const landmarkAttrs = computed(() => {
+  const roleDescription = t("origam.carousel.role_description");
+  const attributes = {};
+  if (!hasAccessibleName.value) {
+    warnMissingLandmarkName("OrigamWindow", "region", roleDescription);
+    return attributes;
+  }
+  attributes.role = "region";
+  attributes["aria-roledescription"] = roleDescription;
+  return attributes;
+});
 const group = useGroup(props, ORIGAM_WINDOW_GROUP_KEY);
 const rootRef = ref();
 const isReversed = shallowRef(false);

package/dist/src/composables/Commons/accessibleCommand.composable.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAccessibleCommand = useAccessibleCommand;
+var _vue = require("vue");
+var _locale = require("./locale.composable.cjs");
+var _a11y = require("../../utils/Commons/a11y.util.cjs");
+function useAccessibleCommand(options) {
+  const locale = (0, _locale.useLocale)(false);
+  return (0, _vue.computed)(() => {
+    if (!options.active.value) return {};
+    const raw = options.label();
+    const name = raw ? locale ? locale.t(raw) : raw : "";
+    if (!name) {
+      (0, _a11y.warnMissingAccessibleName)(options.component, options.zone, options.prop);
+      return {};
+    }
+    return {
+      role: "button",
+      tabindex: 0,
+      "aria-label": name
+    };
+  });
+}

package/dist/src/composables/Commons/accessibleCommand.composable.d.ts

@@ -0,0 +1,78 @@
+import type { ComputedRef, Ref } from 'vue';
+/*********************************************************
+ * useAccessibleCommand
+ *
+ * @description
+ * ⛔ issues #747 / #653 / #660 — the ONE place the design system decides
+ * whether a non-native element may claim `role="button"`.
+ *
+ * The three tickets are three readings of the same defect: the DS puts an
+ * ARIA claim on an element it has no name for. `useAdjacent` /
+ * `useAdjacentInner` promote the prepend/append zone to `role="button"` +
+ * `tabindex="0"` the moment a consumer attaches `click:prepend` /
+ * `click:append` (#443) — but neither hook, nor any of the 13 templates
+ * that bind them, ever had a channel through which a name could arrive.
+ * Measured against axe-core in Chromium, that produced **54
+ * `aria-command-name` nodes (impact `serious`, WCAG 2.1 4.1.2 level A)
+ * across 17 components** on untouched `develop`, every one of them
+ * announced to a screen reader as "button" and nothing else.
+ *
+ * @description
+ * **The rule this hook encodes: the DS never emits an ARIA role it cannot
+ * name, and it never invents the name.**
+ *
+ * - A name IS available → `role="button"` + `tabindex="0"` + `aria-label`.
+ *   The zone is a real, reachable, announceable control.
+ * - No name → the returned object is EMPTY: no role, no tab stop. The
+ *   `@click` listener the template binds is untouched and still fires on
+ *   mouse, exactly as it did before #443 added the role; what disappears is
+ *   the false claim, not a working feature. A dev-only warning names the
+ *   prop to add.
+ *
+ * @description
+ * ⛔ The rejected third option was to keep the role and fabricate a
+ * default label ("Prepend action", or an i18n key resolving to it). It
+ * would silence axe while telling a screen-reader user strictly nothing
+ * about what the control does — the failure mode #622 already shipped
+ * once (an auto-label that overwrote a visible `<label for>`), and the
+ * reason #653 chose a warning over a fabricated string on the icon family.
+ * "No ARIA is better than bad ARIA" is the same principle
+ * `useIconAccessibility` applies when it refuses to announce a glyph as a
+ * control it cannot operate.
+ *
+ * @description
+ * ⛔ A NATIVE control cannot use this escape hatch — a `<button>` is a
+ * button whether or not anyone named it. `OrigamBtn`'s icon-only mode
+ * therefore keeps rendering its `<button>` and only warns; see
+ * `warnMissingAccessibleName` and `OrigamBtn.vue`.
+ *
+ * @description
+ * `label` is resolved through `useLocale().t`, matching the existing
+ * `closeLabel` contract on Alert / Chip / Dialog: an i18n key resolves,
+ * and any other string is returned verbatim by the builtin adapter — so
+ * a consumer may pass either. `useLocale(false)` (non-strict) is used on
+ * purpose: this hook runs inside 13 components, several of which are
+ * mounted in unit tests without `createOrigam()` installed, and a strict
+ * `useLocale()` would throw there.
+ *
+ * @description
+ * ADR-005: the label is read INSIDE the returned `computed`, never in the
+ * `setup()` body, so a value coming from a theme's `components` block is
+ * seen at render time rather than snapshotted too early.
+ *
+ * @description
+ * OPTIONS. `component` and `zone` name the offender in the dev warning
+ * (`OrigamCardHeader` / `prepend`); `prop` names the prop that fixes it
+ * (`prependAriaLabel`). `active` is true when the zone is meant to behave as
+ * a command — raw clickability for most consumers, clickability AND
+ * not-a-link for the three `useLink` ones, whose `<a>` root forbids a
+ * descendant tab stop. `label` is a GETTER, not a value, precisely so the
+ * read stays inside the computed.
+ ********************************************************/
+export declare function useAccessibleCommand(options: {
+    component: string;
+    zone: string;
+    prop: string;
+    active: Ref<boolean> | ComputedRef<boolean>;
+    label: () => string | undefined;
+}): ComputedRef<Record<string, unknown>>;

package/dist/src/composables/Commons/accessibleCommand.composable.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { useLocale } from "./locale.composable.js";
+import { warnMissingAccessibleName } from "../../utils/Commons/a11y.util.js";
+export function useAccessibleCommand(options) {
+  const locale = useLocale(false);
+  return computed(() => {
+    if (!options.active.value) return {};
+    const raw = options.label();
+    const name = raw ? locale ? locale.t(raw) : raw : "";
+    if (!name) {
+      warnMissingAccessibleName(options.component, options.zone, options.prop);
+      return {};
+    }
+    return {
+      role: "button",
+      tabindex: 0,
+      "aria-label": name
+    };
+  });
+}

package/dist/src/composables/Commons/activator.composable.cjs

@@ -158,15 +158,24 @@ function useActivator(props, {
       isActive.value = false;
     }
   });
+  let cursorResetTimer;
   (0, _vue.watch)(isActive, val => {
     if (!val) {
-      setTimeout(() => {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = setTimeout(() => {
+        cursorResetTimer = void 0;
         cursorTarget.value = void 0;
       });
     }
   }, {
     flush: "post"
   });
+  (0, _commons2.tryOnScopeDispose)(() => {
+    if (cursorResetTimer !== void 0) {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = void 0;
+    }
+  });
   const activatorRef = (0, _vue.ref)();
   (0, _vue.watchEffect)(() => {
     if (!activatorRef.value) return;

package/dist/src/composables/Commons/activator.composable.js

@@ -3,7 +3,7 @@ import { useDelay } from "./delay.composable.js";
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 import { ORIGAM_MENU_KEY } from "../../consts/Menu/menu.const.js";
 import { activator, getTargetActivator } from "../../utils/Commons/activator.util.js";
-import { matchesSelector, refElement } from "../../utils/Commons/commons.util.js";
+import { matchesSelector, refElement, tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 export function useActivator(props, { isActive, isTop }) {
   const vm = getCurrentInstance("useActivator");
@@ -146,13 +146,22 @@ export function useActivator(props, { isActive, isTop }) {
       isActive.value = false;
     }
   });
+  let cursorResetTimer;
   watch(isActive, (val) => {
     if (!val) {
-      setTimeout(() => {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = setTimeout(() => {
+        cursorResetTimer = void 0;
         cursorTarget.value = void 0;
       });
     }
   }, { flush: "post" });
+  tryOnScopeDispose(() => {
+    if (cursorResetTimer !== void 0) {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = void 0;
+    }
+  });
   const activatorRef = ref();
   watchEffect(() => {
     if (!activatorRef.value) return;

package/dist/src/composables/Commons/adjacent.composable.cjs

@@ -7,6 +7,7 @@ exports.useAdjacent = useAdjacent;
 var _vue = require("vue");
 var _hotkey = require("../../enums/Commons/hotkey.enum.cjs");
 var _commons = require("../../utils/Commons/commons.util.cjs");
+var _accessibleCommand = require("./accessibleCommand.composable.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 function useAdjacent(props, prependIcon, appendIcon) {
   const vm = (0, _getCurrentInstance.getCurrentInstance)("OrigamAdjacent");
@@ -49,7 +50,23 @@ function useAdjacent(props, prependIcon, appendIcon) {
     e.preventDefault();
     onClickAppend(e);
   };
+  const prependCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prepend",
+    prop: "prependAriaLabel",
+    active: isPrependClickable,
+    label: () => props.prependAriaLabel
+  });
+  const appendCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "append",
+    prop: "appendAriaLabel",
+    active: isAppendClickable,
+    label: () => props.appendAriaLabel
+  });
   return {
+    prependCommandAttrs,
+    appendCommandAttrs,
     hasPrependMedia,
     hasPrepend,
     hasAppendMedia,

package/dist/src/composables/Commons/adjacent.composable.d.ts

@@ -29,8 +29,20 @@ import type { IAdjacentProps } from '../../interfaces/Commons/adjacent.interface
  * consumer actually attached a `click:prepend`/`click:append`
  * listener — a decorative icon with nobody listening stays exactly
  * as inert as before, no spurious tab stop.
+ *
+ * @description
+ * ⛔ issue #747 — being CLICKABLE was never sufficient. `role="button"`
+ * with no accessible name is a WCAG 2.1 4.1.2 failure, and it was the
+ * shipped behaviour of every consumer of this hook: axe-core measured
+ * **54 `aria-command-name` nodes (`serious`) across 17 components** on
+ * untouched `develop`. `prependCommandAttrs` / `appendCommandAttrs`
+ * replace the raw `:role` / `:tabindex` bindings the templates used to
+ * write by hand — they emit the role AND the name together, or neither.
+ * See `useAccessibleCommand` for why no default label is fabricated.
  ********************************************************/
 export declare function useAdjacent(props: IAdjacentProps, prependIcon?: Ref | ComputedRef, appendIcon?: Ref | ComputedRef): {
+    prependCommandAttrs: ComputedRef<Record<string, unknown>>;
+    appendCommandAttrs: ComputedRef<Record<string, unknown>>;
     hasPrependMedia: ComputedRef<boolean>;
     hasPrepend: ComputedRef<boolean>;
     hasAppendMedia: ComputedRef<boolean>;

package/dist/src/composables/Commons/adjacent.composable.js

@@ -1,6 +1,7 @@
 import { computed, useSlots } from "vue";
 import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum.js";
 import { hasEvent } from "../../utils/Commons/commons.util.js";
+import { useAccessibleCommand } from "./accessibleCommand.composable.js";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 export function useAdjacent(props, prependIcon, appendIcon) {
   const vm = getCurrentInstance("OrigamAdjacent");
@@ -43,7 +44,23 @@ export function useAdjacent(props, prependIcon, appendIcon) {
     e.preventDefault();
     onClickAppend(e);
   };
+  const prependCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prepend",
+    prop: "prependAriaLabel",
+    active: isPrependClickable,
+    label: () => props.prependAriaLabel
+  });
+  const appendCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "append",
+    prop: "appendAriaLabel",
+    active: isAppendClickable,
+    label: () => props.appendAriaLabel
+  });
   return {
+    prependCommandAttrs,
+    appendCommandAttrs,
     hasPrependMedia,
     hasPrepend,
     hasAppendMedia,

package/dist/src/composables/Commons/adjacentInner.composable.cjs

@@ -7,6 +7,7 @@ exports.useAdjacentInner = useAdjacentInner;
 var _vue = require("vue");
 var _hotkey = require("../../enums/Commons/hotkey.enum.cjs");
 var _commons = require("../../utils/Commons/commons.util.cjs");
+var _accessibleCommand = require("./accessibleCommand.composable.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 function useAdjacentInner(props) {
   const vm = (0, _getCurrentInstance.getCurrentInstance)("OrigamAdjacentInner");
@@ -41,19 +42,38 @@ function useAdjacentInner(props) {
   const isAppendInnerClickable = (0, _vue.computed)(() => {
     return (0, _commons.hasEvent)(vm.attrs, "click:appendInner") || (0, _commons.hasEvent)(vm.vnode.props ?? {}, "click:appendInner");
   });
+  const ownsKey = e => e.target === e.currentTarget;
   const onKeydownPrependInner = e => {
     if (!isPrependInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== _hotkey.KEYBOARD_VALUES.ENTER && e.key !== _hotkey.KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickPrependInner(e);
   };
   const onKeydownAppendInner = e => {
     if (!isAppendInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== _hotkey.KEYBOARD_VALUES.ENTER && e.key !== _hotkey.KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickAppendInner(e);
   };
+  const prependInnerCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prependInner",
+    prop: "prependInnerAriaLabel",
+    active: isPrependInnerClickable,
+    label: () => props.prependInnerAriaLabel
+  });
+  const appendInnerCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "appendInner",
+    prop: "appendInnerAriaLabel",
+    active: isAppendInnerClickable,
+    label: () => props.appendInnerAriaLabel
+  });
   return {
+    prependInnerCommandAttrs,
+    appendInnerCommandAttrs,
     hasPrependInnerMedia,
     hasPrependInner,
     hasAppendInnerMedia,