@bagelink/vue 1.15.645 → 1.15.649

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.645",
+  "version": "1.15.649",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Avatar.vue

@@ -37,6 +37,21 @@ const statusColor = computed(() => (props.status === true ? 'green' : props.stat
 // Dot scales with the avatar but stays within sane bounds.
 const dotSize = computed(() => Math.max(7, Math.min(14, Math.round(resolvedSize.value * 0.28))))
 
+/** Accessible names for the presence dot's known tones. */
+const STATUS_LABELS: Record<string, string> = {
+	green: 'Online',
+	gray: 'Offline',
+	orange: 'Away',
+	red: 'Busy',
+}
+
+// A bare <span title> is not announced by screen readers, so the dot carries a
+// real accessible name — from `statusTitle` when given, else the tone's meaning.
+const statusLabel = computed(() => {
+	if (!statusColor.value) { return '' }
+	return props.statusTitle || STATUS_LABELS[statusColor.value] || 'Status'
+})
+
 const radius = computed(() => {
 	if (!props.square) { return '1000px' } // circle (default)
 	if (props.square === true) { return 'var(--bgl-btn-border-radius)' }
@@ -59,14 +74,15 @@ const themed = computed(() => props.color
 			:class="innerClass"
 			:style="{ width: `${resolvedSize}px`, height: `${resolvedSize}px`, borderRadius: radius, ...themed }"
 		>
-			<Image v-if="src" :src="src" :alt="alt || name" />
+			<Image v-if="src" :src="src" :alt="alt ?? name ?? ''" />
 			<Icon v-else-if="icon" :icon="icon" :size="resolvedSize / 40" />
 			<p v-else :style="{ 'line-height': '1', 'font-size': `calc(1.5rem * ${resolvedSize} / 50)` }" class="">
 				{{ (fallback || initials(name || '')).toUpperCase() }}
 			</p>
 		</div>
 		<span
-			v-if="statusColor" class="avatar-status" :title="statusTitle"
+			v-if="statusColor" class="avatar-status" role="img"
+			:aria-label="statusLabel" :title="statusLabel"
 			:style="{ width: `${dotSize}px`, height: `${dotSize}px`, background: `var(--bgl-${statusColor})` }"
 		/>
 	</div>

package/src/components/Icon/Icon.vue

@@ -208,7 +208,7 @@ const iconStyle = computed(() => {
 		<span
 			v-if="iconRenderType === 'material'" :key="`material-${iconRender}`" class="bgl_icon-font notranslate"
 			:class="[animateClass, roundClass, roundPairClass, softClass, { 'color-white keep-white': round && !soft && isRawCssColor }]"
-			:style="iconStyle" translate="no"
+			:style="iconStyle" aria-hidden="true" translate="no"
 		>
 			{{ iconRender }}
 		</span>
@@ -225,7 +225,7 @@ const iconStyle = computed(() => {
 					'far': !fill && !isFaBrand,
 					'color-white keep-white': round && !soft && isRawCssColor,
 				},
-			]" :style="iconStyle"
+			]" :style="iconStyle" aria-hidden="true"
 			translate="no"
 		/>
 	</Transition>