[common] Add aria attrs for states of button for screen readers

ONLYOFFICE · Jan 30, 2024 · ff4adc1 · ff4adc1
1 parent c0bafcb
commit ff4adc1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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>