origam 2.17.0 → 2.18.0

package/dist/src/components/Chart/OrigamChartLegend.vue

@@ -7,28 +7,30 @@
 		<li
 				v-for="entry in safeItems"
 				:key="entry.series?.name ?? entry.index"
-				:aria-label="itemAriaLabel(entry)"
-				:aria-pressed="!isHidden(entry)"
 				class="origam-chart__legend-item"
 				:class="{ 'origam-chart__legend-item--hidden': isHidden(entry) }"
 				:data-cy="`origam-chart-legend-${ entry.index }`"
-				role="button"
-				tabindex="0"
-				@click="onItemClick(entry)"
-				@keydown.enter.prevent="onItemClick(entry)"
-				@keydown.space.prevent="onItemClick(entry)"
 		>
-			<slot
-					name="legend-item"
-					v-bind="{ series: entry.series, index: entry.index, visible: entry.visible }"
+			<button
+					type="button"
+					class="origam-chart__legend-button"
+					:aria-label="itemAriaLabel(entry)"
+					:aria-pressed="!isHidden(entry)"
+					:data-cy="`origam-chart-legend-button-${ entry.index }`"
+					@click="handleItemClick(entry)"
 			>
-				<span
-						class="origam-chart__legend-swatch"
-						:style="{ backgroundColor: entry.color }"
-						aria-hidden="true"
-				/>
-				<span class="origam-chart__legend-label">{{ entry.series?.name ?? '' }}</span>
-			</slot>
+				<slot
+						name="legend-item"
+						v-bind="{ series: entry.series, index: entry.index, visible: entry.visible }"
+				>
+					<span
+							class="origam-chart__legend-swatch"
+							:style="{ backgroundColor: entry.color }"
+							aria-hidden="true"
+					/>
+					<span class="origam-chart__legend-label">{{ entry.series?.name ?? '' }}</span>
+				</slot>
+			</button>
 		</li>
 	</ul>
 </template>
@@ -57,9 +59,28 @@ const itemAriaLabel = (entry) => {
   const state = isHidden(entry) ? t("origam.chart.legend.item_hidden") : t("origam.chart.legend.item_visible");
   return `${entry.series?.name ?? ""}: ${state}`;
 };
-const onItemClick = (entry) => {
+const handleItemClick = (entry) => {
   emit("legend-click", entry.series, entry.index);
   const nextVisible = entry.visible === false;
   emit("series-toggle", entry.series, nextVisible);
 };
 </script>
+
+<style lang="scss" scoped>
+	.origam-chart__legend-button {
+		display: flex;
+		align-items: center;
+		gap: inherit;
+
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+
+		font: inherit;
+		color: inherit;
+		text-align: inherit;
+		text-decoration: inherit;
+		cursor: inherit;
+	}
+</style>

package/dist/src/components/Chart/OrigamChartPareto.vue

@@ -617,7 +617,13 @@ const svgDesc = computed(() => {
   const n = bars.value.length;
   return t("origam.chart.pareto.desc", n);
 });
-const barAriaLabel = (bar) => `${bar.category}: ${bar.formattedValue} (${Math.round(bar.share * 100)}%, cumulative ${Math.round(bar.cumulative * 100)}%)`;
+const barAriaLabel = (bar) => t(
+  "origam.chart.pareto.bar_aria_label",
+  bar.category,
+  bar.formattedValue,
+  Math.round(bar.share * 100),
+  Math.round(bar.cumulative * 100)
+);
 const onBarEnter = (bar) => {
   hoveredIndex.value = bar.index;
 };

package/dist/src/components/Chart/OrigamChartPictorial.vue

@@ -618,7 +618,7 @@ const fillValueLabel = (col) => {
 };
 const fillColumnAriaLabel = (col) => {
   const pct = Math.round(fillRatio(col) * 100);
-  return `${col.category}: ${col.formatted} \u2014 ${pct}% of maximum`;
+  return t("origam.chart.pictorial.fill_column_aria_label", col.category, col.formatted, pct);
 };
 const iconX = (col, slotIdx) => {
   if (props.direction === DIRECTION.HORIZONTAL) {
@@ -739,7 +739,7 @@ const svgDesc = computed(() => {
   const n = visibleColumns.value.length;
   return t("origam.chart.pictorial.desc", n);
 });
-const columnAriaLabel = (col) => `${col.category}: ${col.formatted} (${col.filledSlots} of ${col.totalSlots} icons)`;
+const columnAriaLabel = (col) => t("origam.chart.pictorial.column_aria_label", col.category, col.formatted, col.filledSlots, col.totalSlots);
 const onColumnEnter = (col) => {
   hoveredColKey.value = `${col.seriesIndex}-${col.dataIndex}`;
 };

package/dist/src/components/Chart/OrigamChartRadar.vue

@@ -329,7 +329,9 @@ const pointAriaLabel = (path) => {
   const entry = path.series.data[path.dataIndex ?? 0];
   const y = typeof entry === "number" ? entry : entry.y;
   const cat = props.categories[path.dataIndex ?? 0] ?? path.dataIndex;
-  return `${path.series.name}, ${cat}: ${y}`;
+  const seriesName = path.series.name?.trim();
+  const value = `${cat}: ${y}`;
+  return seriesName ? `${seriesName}, ${value}` : value;
 };
 const onPointActivate = (path, originalEvent) => {
   const dataIndex = path.dataIndex ?? 0;

package/dist/src/components/Chart/OrigamChartSparkline.vue

@@ -432,7 +432,9 @@ const onSvgClick = (event) => {
 const pointAriaLabel = (index) => {
   const point = pointAt(index);
   if (!point) return "";
-  return `${point.seriesName ?? ""}, ${index}: ${point.y}`.trim();
+  const seriesName = point.seriesName?.trim();
+  const value = `${index}: ${point.y}`;
+  return seriesName ? `${seriesName}, ${value}` : value;
 };
 const rootClasses = computed(() => [
   {

package/dist/src/components/Chart/OrigamChartStreamgraph.vue

@@ -511,7 +511,8 @@ const rootClasses = computed(() => [
   elevationClasses.value,
   marginClasses.value,
   paddingClasses.value,
-  roundedClasses.value
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -138,6 +138,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/Checkbox/OrigamCheckboxGroup.vue

@@ -13,16 +13,21 @@
 					v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
 			>
 
-				<slot
-						name="label"
-						v-bind="{label, required}"
+				<div
+						:id="groupLabelId"
+						class="origam-checkbox-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="checkboxDefaults">
 					<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="multiple"
@@ -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 },
@@ -163,7 +170,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();
@@ -174,6 +181,10 @@ const id = computed(() => {
   return props.id || `checkbox-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"]);
@@ -215,3 +226,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-checkbox-group__label {
+		display: contents;
+	}
+</style>

package/dist/src/components/Chip/OrigamChip.vue

@@ -44,8 +44,7 @@
 				v-if="hasPrepend"
 				key="prepend"
 				class="origam-chip__prepend"
-				:role="isPrependZoneFocusable ? 'button' : undefined"
-				:tabindex="isPrependZoneFocusable ? 0 : undefined"
+				v-bind="prependCommandAttrs"
 				@click="handleClickPrepend"
 				@keydown="handleKeydownPrepend"
 		>
@@ -81,8 +80,7 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-chip__append"
-				:role="isAppendZoneFocusable ? 'button' : undefined"
-				:tabindex="isAppendZoneFocusable ? 0 : undefined"
+				v-bind="appendCommandAttrs"
 				@click="handleClickAppend"
 				@keydown="handleKeydownAppend"
 		>
@@ -137,6 +135,7 @@ import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamExpandX from "../Transition/OrigamExpandX.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAccessibleCommand } from "../../composables/Commons/accessibleCommand.composable";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useGroupItem } from "../../composables/Commons/groupItem.composable";
@@ -174,6 +173,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 },
   tag: { type: String, required: false, default: "span" },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -266,6 +267,20 @@ const {
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isPrependZoneFocusable = computed(() => isPrependClickable.value && !link.isLink.value);
 const isAppendZoneFocusable = computed(() => isAppendClickable.value && !link.isLink.value);
+const prependCommandAttrs = useAccessibleCommand({
+  component: "OrigamChip",
+  zone: "prepend",
+  prop: "prependAriaLabel",
+  active: isPrependZoneFocusable,
+  label: () => props.prependAriaLabel
+});
+const appendCommandAttrs = useAccessibleCommand({
+  component: "OrigamChip",
+  zone: "append",
+  prop: "appendAriaLabel",
+  active: isAppendZoneFocusable,
+  label: () => props.appendAriaLabel
+});
 const isButtonSafe = computed(() => {
   return props.tag === "span" && isClickable.value && !link.isLink.value && !hasClose.value && !isPrependZoneFocusable.value && !isAppendZoneFocusable.value;
 });

package/dist/src/components/Code/OrigamCode.vue

@@ -44,11 +44,28 @@
 
 		<span v-if="compact && prompt" class="origam-code__prompt" aria-hidden="true" data-cy="origam-code-prompt">{{ prompt }}</span>
 
-		<div
+		<!--
+			⛔ #781 — `<section>`, not `<div role="region">`.
+
+			`<section>` maps to the `region` role natively AS SOON AS it
+			carries an accessible name (HTML-AAM), and `scrollerLabel` is
+			never empty (`code-scroller-aria-label.spec.ts` pins its two
+			forms). The explicit role was therefore restating what the tag
+			already says — "ARIA is a complement, never a replacement", the
+			DS's own rule.
+
+			`tabindex="0"` STAYS. It is not decoration on a non-interactive
+			element: this box scrolls (`overflow-x: auto`), and a scroll
+			container that no keyboard can reach fails WCAG 2.1.1 — the
+			`scrollable-region-focusable` rule axe-core enforces, already
+			documented in `a11y/marketing-a11y.spec.ts`. Removing it to
+			satisfy a "no tabindex on non-interactive elements" lint would
+			trade a naming nit for a level-A keyboard failure.
+		-->
+		<section
 				class="origam-code__scroller"
 				:aria-label="scrollerLabel"
 				:style="scrollerStyles"
-				role="region"
 				tabindex="0"
 		>
 			<pre class="origam-code__pre" :class="preClasses"><code
@@ -56,7 +73,7 @@
 					class="origam-code__code"
 					:data-lang="lang"
 			></code></pre>
-		</div>
+		</section>
 
 		<origam-btn
 				v-if="copyable && compact"

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -16,6 +16,7 @@
 			@blur="handleBlur"
 			@change="handleChange"
 			@click:clear="handleClear"
+			@input="handleInput"
 			@mousedown:control="handleMousedownControl"
 	>
 		<template
@@ -146,8 +147,8 @@ import { DENSITY } from "../../enums/Commons/density.enum";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
 import { TEXT_FIELD_TYPE } from "../../enums/TextField/text-field.enum";
 import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
-import { HSVtoCSS } from "../../utils/Commons/color.util";
-import { matchesSelector } from "../../utils/Commons/commons.util";
+import { HSVtoCSS, isCompleteCssColor } from "../../utils/Commons/color.util";
+import { has, matchesSelector } from "../../utils/Commons/commons.util";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
   menu: { type: Boolean, required: false },
@@ -192,6 +193,21 @@ 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 },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -210,19 +226,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, 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 },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
-  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -260,6 +263,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 }) }
 });
 const { filterProps } = useProps(props);
@@ -284,8 +289,18 @@ const handleSelectColor = (color) => {
   });
 };
 const selectedValue = computed(() => {
-  return model.value;
+  const v = model.value;
+  return v !== null && typeof v === "object" && has(v, ["h", "s", "v", "a"]) ? null : v;
 });
+const commitTypedColor = (raw) => {
+  if (raw === "") {
+    model.value = null;
+    return;
+  }
+  if (isCompleteCssColor(raw)) {
+    model.value = raw;
+  }
+};
 const effectiveValidationValue = computed(() => {
   return props.validationValue === void 0 ? model.value : props.validationValue;
 });
@@ -346,8 +361,12 @@ const handleBlur = (e) => {
     isFocused.value = true;
   }
 };
-const handleChange = () => {
+const handleInput = (e) => {
+  commitTypedColor(e.target?.value ?? "");
+};
+const handleChange = (e) => {
   if (matchesSelector(origamTextFieldRef.value, ":autofill") || matchesSelector(origamTextFieldRef.value, ":-webkit-autofill")) {
+    commitTypedColor(e.target?.value ?? "");
   }
 };
 const handleAfterLeave = () => {
@@ -420,7 +439,13 @@ defineExpose(forwardRefs({
 <style lang="scss" scoped>
 	.origam-color-picker-field {
 		:deep(.origam-field) {
-			--origam-field---padding-start: 0;
+			// #800 — l'unite est obligatoire : sans elle, `0` est un `<number>`
+			// et tout `max()` / `calc()` qui lit ce token JETTE sa declaration.
+			// Sans effet de rendu ici (mesure Chromium, avant/apres identiques) :
+			// ce champ est TOUJOURS prepended — le `#prependInner` du swatch est
+			// inconditionnel — donc son `padding-inline` vient de la regle
+			// `.origam-field--prepended`, qui n'utilise pas de `max()`.
+			--origam-field---padding-start: 0px;
 		}
 
 		:deep(.origam-field__prepend-inner) {

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -373,9 +373,9 @@ watch(isActive, async (next) => {
     returnFocusEl = null;
   }
 });
-const navigateText = "Navigate";
-const selectText = "Select";
-const closeText = "Close";
+const navigateText = computed(() => t("origam.command_palette.footer_navigate"));
+const selectText = computed(() => t("origam.command_palette.footer_select"));
+const closeText = computed(() => t("origam.close"));
 const hasDefaultFooter = computed(() => true);
 const { typographyStyles: groupTitleTypographyStyles } = useTypography(props, "command-palette__group-title");
 const { typographyStyles: inputTypographyStyles } = useTypography(props, "command-palette__input");

package/dist/src/components/ConfirmWrapper/OrigamConfirmWrapper.vue

@@ -13,8 +13,7 @@
 		        v-if="hasPrepend"
 		        key="prepend"
 		        class="origam-confirm-wrapper__prepend"
-		        :role="isPrependClickable ? 'button' : undefined"
-		        :tabindex="isPrependClickable ? 0 : undefined"
+		        v-bind="prependCommandAttrs"
 		        @click="handleClickPrepend"
 		        @keydown="handleKeydownPrepend"
         >
@@ -52,8 +51,7 @@
 						v-if="hasAppend"
 						key="append"
 						class="origam-confirm-wrapper__append"
-						:role="isAppendClickable ? 'button' : undefined"
-						:tabindex="isAppendClickable ? 0 : undefined"
+						v-bind="appendCommandAttrs"
 						@click="handleClickAppend"
 						@keydown="handleKeydownAppend"
 				>
@@ -172,6 +170,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 },
   direction: { type: null, required: false, default: DIRECTION.VERTICAL },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
@@ -197,8 +197,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable
+  prependCommandAttrs,
+  appendCommandAttrs
 } = useAdjacent(props);
 const origamLabelRef = ref();
 const hasTitle = computed(() => {

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -142,10 +142,6 @@ const props = defineProps({
   to: { type: null, required: false },
   exact: { type: Boolean, required: false },
   ripple: { type: [Boolean, Object], required: false },
-  appendAvatar: { type: String, required: false },
-  appendIcon: { type: null, required: false },
-  prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },

package/dist/src/components/DataList/OrigamDataList.vue

@@ -199,6 +199,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 },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   margin: { type: [Boolean, Number, String], required: false },

package/dist/src/components/DataList/OrigamDataText.vue

@@ -9,8 +9,7 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-data-text__prepend"
-		    :role="isPrependClickable ? 'button' : undefined"
-		    :tabindex="isPrependClickable ? 0 : undefined"
+		    v-bind="prependCommandAttrs"
 		    @click="handleClickPrepend"
 		    @keydown="handleKeydownPrepend"
     >
@@ -43,8 +42,7 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-data-text__append"
-				:role="isAppendClickable ? 'button' : undefined"
-				:tabindex="isAppendClickable ? 0 : undefined"
+				v-bind="appendCommandAttrs"
 				@click="handleClickAppend"
 				@keydown="handleKeydownAppend"
 		>
@@ -87,6 +85,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 },
   density: { type: null, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
@@ -116,8 +116,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));

package/dist/src/components/DataList/OrigamDataTitle.vue

@@ -9,8 +9,7 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-data-title__prepend"
-		    :role="isPrependClickable ? 'button' : undefined"
-		    :tabindex="isPrependClickable ? 0 : undefined"
+		    v-bind="prependCommandAttrs"
 		    @click="handleClickPrepend"
 		    @keydown="handleKeydownPrepend"
     >
@@ -46,8 +45,7 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-data-title__append"
-				:role="isAppendClickable ? 'button' : undefined"
-				:tabindex="isAppendClickable ? 0 : undefined"
+				v-bind="appendCommandAttrs"
 				@click="handleClickAppend"
 				@keydown="handleKeydownAppend"
 		>
@@ -90,6 +88,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 },
   density: { type: null, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
@@ -119,8 +119,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));

package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue

@@ -106,7 +106,7 @@ const getFixedStyles = (column, y) => {
   return {
     position: "sticky",
     left: column.fixed ? convertToUnit(column.fixedOffset) : void 0,
-    top: props.sticky ? `calc(var(--origam-table-header-height) * ${y})` : void 0
+    top: props.sticky ? `calc(var(--origam-table__header-cell---height, 44px) * ${y})` : void 0
   };
 };
 const hasColumn = (name) => {

package/dist/src/components/DataTable/OrigamDataTableHeadersCell.vue

@@ -77,7 +77,10 @@ const dataTableHeadersCellStyles = computed(() => {
   ];
 });
 const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles, () => props.id);
-const headerRowId = (index) => props.id ? `${props.id}-row-${index}` : void 0;
+const headerRowId = (index) => {
+  if (!props.id) return void 0;
+  return index === 0 ? props.id : `${props.id}-row-${index}`;
+};
 defineExpose({
   filterProps,
   css,

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -213,6 +213,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 },
   density: { type: null, required: false }
 });
 const emits = defineEmits(["update:month", "update:year", "update:viewMode", "update:modelValue"]);