feat(Progress): add getValueText for aria-valuetext (#1920)

kricsleo · zernonia · web-flow · commit 51a1be5d4684 · 2025-05-24T14:31:43.000+03:00
Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/docs/content/meta/ProgressRoot.md b/docs/content/meta/ProgressRoot.md
@@ -16,11 +16,17 @@
   },
   {
     'name': 'getValueLabel',
-    'description': '<p>A function to get the accessible label text representing the current value in a human-readable format.</p>\n<p>If not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
+    'description': '<p>A function to get the accessible label text in a human-readable format.</p>\n<p>If not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
     'type': '((value: number | null, max: number) => string)',
     'required': false,
     'default': 'isNumber(value) ? `${Math.round((value / max) * DEFAULT_MAX)}%` : undefined'
   },
+  {
+    'name': 'getValueText',
+    'description': '<p>A function to get the accessible value text representing the current value in a human-readable format.</p>\n',
+    'type': '((value: number | null, max: number) => string)',
+    'required': false
+  },
   {
     'name': 'max',
     'description': '<p>The maximum progress value.</p>\n',
@@ -60,7 +66,7 @@
 <MethodsTable :data="[
   {
     'name': 'getValueLabel',
-    'description': '<p>A function to get the accessible label text representing the current value in a human-readable format.</p>\n<p>If not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
+    'description': '<p>A function to get the accessible label text in a human-readable format.</p>\n<p>If not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
     'type': '(value: number | null | undefined, max: number) => string | undefined'
   }
 ]" />
diff --git a/packages/core/src/Progress/ProgressRoot.vue b/packages/core/src/Progress/ProgressRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { PrimitiveProps } from '@/Primitive'
 import type { ComputedRef, Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
 import { createContext, isNullish, useForwardExpose } from '@/shared'
 
 export type ProgressRootEmits = {
@@ -16,11 +16,15 @@ export interface ProgressRootProps extends PrimitiveProps {
   /** The maximum progress value. */
   max?: number
   /**
-   * A function to get the accessible label text representing the current value in a human-readable format.
+   * A function to get the accessible label text in a human-readable format.
    *
    *  If not provided, the value label will be read as the numeric value as a percentage of the max value.
    */
   getValueLabel?: (value: number | null | undefined, max: number) => string | undefined
+  /**
+   * A function to get the accessible value text representing the current value in a human-readable format.
+   */
+  getValueText?: (value: number | null | undefined, max: number) => string | undefined
 }
 
 const DEFAULT_MAX = 100
@@ -69,9 +73,9 @@ function validateMax(max: number): number {
 </script>
 
 <script setup lang="ts">
-import { Primitive } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 import { computed, nextTick, watch } from 'vue'
+import { Primitive } from '@/Primitive'
 
 const props = withDefaults(defineProps<ProgressRootProps>(), {
   max: DEFAULT_MAX,
@@ -143,7 +147,7 @@ provideProgressRootContext({
     :aria-valuemax="max"
     :aria-valuemin="0"
     :aria-valuenow="isNumber(modelValue) ? modelValue : undefined"
-    :aria-valuetext="getValueLabel(modelValue, max)"
+    :aria-valuetext="getValueText?.(modelValue, max)"
     :aria-label="getValueLabel(modelValue, max)"
     role="progressbar"
     :data-state="progressState"
diff --git a/packages/core/src/TagsInput/TagsInputInput.vue b/packages/core/src/TagsInput/TagsInputInput.vue
@@ -13,8 +13,8 @@ export interface TagsInputInputProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { Primitive } from '@/Primitive'
 import { nextTick, onMounted, ref } from 'vue'
+import { Primitive } from '@/Primitive'
 import { injectTagsInputRootContext } from './TagsInputRoot.vue'
 
 const props = withDefaults(defineProps<TagsInputInputProps>(), {
diff --git a/packages/core/src/Tree/TreeRoot.vue b/packages/core/src/Tree/TreeRoot.vue
@@ -76,14 +76,14 @@ export const [injectTreeRootContext, provideTreeRootContext] = createContext<Tre
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, any>, U extends Record<string, any>, M extends boolean = false">
-import type { PrimitiveProps } from '@/Primitive'
 import type { EventHook } from '@vueuse/core'
 import type { Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
+import { createEventHook, useVModel } from '@vueuse/core'
+import { computed, nextTick, ref, toRefs } from 'vue'
 import { Primitive } from '@/Primitive'
 import { RovingFocusGroup } from '@/RovingFocus'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
-import { createEventHook, useVModel } from '@vueuse/core'
-import { computed, nextTick, ref, toRefs } from 'vue'
 
 const props = withDefaults(defineProps<TreeRootProps<T, U, M>>(), {
   as: 'ul',
