From ff4adc1955ed22287bc55c6e52f1281cfa12ceb0 Mon Sep 17 00:00:00 2001
From: "Julia.Svinareva" <julia.svinaryova@onlyoffice.com>
Date: Tue, 30 Jan 2024 21:36:04 +0300
Subject: [PATCH] [common] Add aria attrs for states of button for screen
 readers

---
 apps/common/main/lib/component/Button.js             | 12 +++++++++++-
 .../main/app/template/StatusBar.template             |  6 +++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 5a74a2d6a1..8519782a26 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -658,6 +658,14 @@ define([
                         }
                     });
                 }
+
+                if (me.enableToggle && !me.menu) {
+                    $('button', el).attr('aria-pressed', !!me.pressed)
+                }
+
+                if (me.menu) {
+                    $('[data-toggle^=dropdown]', el).attr('aria-haspopup', 'menu');
+                }
             }
 
             me.rendered = true;
@@ -691,8 +699,10 @@ define([
 
             this.pressed = state;
 
-            if (this.cmpEl)
+            if (this.cmpEl) {
+                this.cmpEl.attr('aria-pressed', state);
                 this.cmpEl.trigger('button.internal.active', [state]);
+            }
 
             if (!suppressEvent)
                 this.trigger('toggle', this, state);
diff --git a/apps/documenteditor/main/app/template/StatusBar.template b/apps/documenteditor/main/app/template/StatusBar.template
index cea4290bab..b17b727d11 100644
--- a/apps/documenteditor/main/app/template/StatusBar.template
+++ b/apps/documenteditor/main/app/template/StatusBar.template
@@ -27,10 +27,10 @@
         <button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
         <button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
         <div class="separator short hide-select-tools"></div>
-        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
-        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
+        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
+        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
         <button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
-        <div class="cnt-zoom">
+        <div class="cnt-zoom" role="button" aria-haspopup="menu">
             <div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top">
                 <label id="label-zoom" class="status-label">Zoom 100%</label>
             </div>