From 14464d118cb52e7260d5d58fe72b7ebe793105c5 Mon Sep 17 00:00:00 2001
From: "Julia.Svinareva" <julia.svinaryova@onlyoffice.com>
Date: Mon, 26 Feb 2024 21:13:56 +0300
Subject: [PATCH] [common] Adjust metric spinner component for screen readers

---
 .../common/main/lib/component/MetricSpinner.js | 15 +++++++++++++--
 .../main/app/view/ParagraphSettings.js         | 18 ++++++++++++------
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/apps/common/main/lib/component/MetricSpinner.js b/apps/common/main/lib/component/MetricSpinner.js
index 609f6ef218..c87788f10e 100644
--- 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
index c4e498fa11..2c8b489ccf 100644
--- 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);