fix(number-field): add aria-valuetext to prevent VO announce percentage

Refinitiv · Jul 27, 2023 · 8e2a1e4 · 8e2a1e4
2 parents 48796fb + 1eb61fc
commit 8e2a1e4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/packages/elements/src/number-field/__snapshots__/NumberField.md b/packages/elements/src/number-field/__snapshots__/NumberField.md
@@ -7,6 +7,7 @@
 ```html
 <input
   aria-valuenow="0"
+  aria-valuetext="0"
   autocomplete="off"
   inputmode="decimal"
   part="input"
@@ -33,6 +34,7 @@
 ```html
 <input
   aria-valuenow="0"
+  aria-valuetext="0"
   autocomplete="off"
   inputmode="decimal"
   part="input"

diff --git a/packages/elements/src/number-field/index.ts b/packages/elements/src/number-field/index.ts
@@ -864,6 +864,7 @@ export class NumberField extends FormFieldElement {
    * inputmode="decimal" - show decimals keyboard by default
    * role="spinbutton" - number field is actually a spinner
    * aria-valuenow - current value or 0
+   * aria-valuetext - current value or 0, need this to improve user-friendly and human-understandable when screen reader announce value
    * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
    * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
    * @returns template map
@@ -876,6 +877,7 @@ export class NumberField extends FormFieldElement {
       inputmode: 'decimal',
       role: 'spinbutton',
       'aria-valuenow': `${this.value || 0}`,
+      'aria-valuetext': `${this.value || 0}`,
       '@keydown': this.onInputKeyDown,
       '@beforeinput': this.onBeforeInputChange
     };