[common] Adjust metric spinner component for screen readers

ONLYOFFICE · Feb 26, 2024 · 14464d1 · 14464d1
1 parent a76c0be
commit 14464d1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/apps/common/main/lib/component/MetricSpinner.js b/apps/common/main/lib/component/MetricSpinner.js
@@ -121,7 +121,7 @@ define([
         rendered    : false,
 
         template    :
-                    '<input type="text" class="form-control" spellcheck="false" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
+                    '<input type="text" class="form-control" spellcheck="false" role="spinbutton" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
                     '<div class="spinner-buttons">' +
                         '<button type="button" class="spinner-up"><i class="arrow"></i></button>' +
                         '<button type="button" class="spinner-down"><i class="arrow"></i></button>' +
@@ -210,6 +210,12 @@ define([
             if (this.options.tabindex != undefined)
                 this.$input.attr('tabindex', this.options.tabindex);
 
+            this.$input.attr('aria-valuemin', this.options.minValue);
+            this.$input.attr('aria-valuemax', this.options.maxValue);
+
+            if (this.options.ariaLabel)
+                this.$input.attr('aria-label', this.options.ariaLabel);
+
             return this;
         },
 
@@ -241,10 +247,12 @@ define([
 
         setMinValue: function(unit){
             this.options.minValue = unit;
+            if (this.$input) this.$input.attr('aria-valuemin', unit);
         },
 
         setMaxValue: function(unit){
             this.options.maxValue = unit;
+            if (this.$input) this.$input.attr('aria-valuemax', unit);
         },
 
         setStep: function(step){
@@ -272,7 +280,10 @@ define([
         },
 
         setRawValue: function (value) {
-            if (this.$input) this.$input.val(value);
+            if (this.$input) {
+                this.$input.val(value);
+                this.$input.attr('aria-valuetext', value);
+            }
         },
 
         getRawValue: function () {

diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js
@@ -137,7 +137,8 @@ define([
                 disabled: this._locked,
                 dataHint: '1',
                 dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
+                dataHintOffset: 'big',
+                ariaLabel: this.strLineHeight
             });
             this.lockedControls.push(this.numLineHeight);
 
@@ -154,7 +155,8 @@ define([
                 disabled: this._locked,
                 dataHint: '1',
                 dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
+                dataHintOffset: 'big',
+                ariaLabel: this.strParagraphSpacing + ' ' + this.strSpacingBefore
             });
             this.spinners.push(this.numSpacingBefore);
             this.lockedControls.push(this.numSpacingBefore);
@@ -172,7 +174,8 @@ define([
                 disabled: this._locked,
                 dataHint: '1',
                 dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
+                dataHintOffset: 'big',
+                ariaLabel: this.strParagraphSpacing + ' ' + this.strSpacingAfter
             });
             this.spinners.push(this.numSpacingAfter);
             this.lockedControls.push(this.numSpacingAfter);
@@ -211,7 +214,8 @@ define([
                 disabled: this._locked,
                 dataHint: '1',
                 dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
+                dataHintOffset: 'big',
+                ariaLabel: this.strIndent + ' ' + this.strIndentsLeftText
             });
             this.spinners.push(this.numIndentsLeft);
             this.lockedControls.push(this.numIndentsLeft);
@@ -228,7 +232,8 @@ define([
                 disabled: this._locked,
                 dataHint: '1',
                 dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
+                dataHintOffset: 'big',
+                ariaLabel: this.strIndent + ' ' + this.strIndentsRightText
             });
             this.spinners.push(this.numIndentsRight);
             this.lockedControls.push(this.numIndentsRight);
@@ -261,7 +266,8 @@ define([
                 disabled: this._locked,
                 dataHint: '1',
                 dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
+                dataHintOffset: 'big',
+                ariaLabel: this.strIndent + ' ' + this.strIndentsSpecial
             });
             this.spinners.push(this.numSpecialBy);
             this.lockedControls.push(this.numSpecialBy);