From ba7ee3bb1dfde3a7ad37c2286701cc984638ea57 Mon Sep 17 00:00:00 2001
From: "Julia.Svinareva" <julia.svinaryova@onlyoffice.com>
Date: Mon, 15 Jan 2024 12:32:42 +0300
Subject: [PATCH] [common] Add roles in toolbar for screen reader focus manager

---
 apps/common/main/lib/component/Mixtbar.js              | 10 +++++-----
 apps/common/main/lib/controller/ScreenReaderFocus.js   |  7 +------
 apps/common/main/lib/view/Draw.js                      |  2 +-
 apps/common/main/lib/view/Plugins.js                   |  2 +-
 apps/common/main/lib/view/Protection.js                |  2 +-
 apps/common/main/lib/view/ReviewChanges.js             |  2 +-
 apps/documenteditor/main/app/template/Toolbar.template | 10 +++++-----
 .../documenteditor/main/app/template/Viewport.template |  2 +-
 apps/documenteditor/main/app/view/ViewTab.js           |  2 +-
 9 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 0f1eaa71a5..e3454f621c 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -110,14 +110,14 @@ define([
                     !Common.UI.isRTL() ?
                     '<section class="tabs">' +
                         '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
-                        '<ul>' +
+                        '<ul role="tablist">' +
                             '<% for(var i in items) { %>' +
                                 '<% if (typeof items[i] == "object") { %>' +
                                 '<li class="ribtab' +
                                         '<% if (items[i].haspanel===false) print(" x-lone") %>' +
                                         '<% if (items[i].extcls) print(\' \' + items[i].extcls) %>"' +
                                         '<% if (typeof items[i].layoutname == "string") print(" data-layout-name=" + \' \' +  items[i].layoutname) + \' \' %>>' +
-                                    '<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof items[i].dataHintTitle !== "undefined") { %> data-hint-title="<%= items[i].dataHintTitle %>" <% } %>><%= items[i].caption %></a>' +
+                                    '<a role="tab" id="<%= items[i].action %>" data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof items[i].dataHintTitle !== "undefined") { %> data-hint-title="<%= items[i].dataHintTitle %>" <% } %>><%= items[i].caption %></a>' +
                                 '</li>' +
                                 '<% } %>' +
                             '<% } %>' +
@@ -126,14 +126,14 @@ define([
                     '</section>' :
                     '<section class="tabs">' +
                         '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
-                        '<ul>' +
+                        '<ul role="tablist">' +
                             '<% for(var i in items) { %>' +
                                 '<% if (typeof items[i] == "object") { %>' +
                                 '<li class="ribtab' +
                                         '<% if (items[i].haspanel===false) print(" x-lone") %>' +
                                         '<% if (items[i].extcls) print(\' \' + items[i].extcls) %>"' +
                                         '<% if (typeof items[i].layoutname == "string") print(" data-layout-name=" + \' \' +  items[i].layoutname) + \' \' %>>' +
-                                    '<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof items[i].dataHintTitle !== "undefined") { %> data-hint-title="<%= items[i].dataHintTitle %>" <% } %>><%= items[i].caption %></a>' +
+                                    '<a role="tab" id="<%= items[i].action %>" data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof items[i].dataHintTitle !== "undefined") { %> data-hint-title="<%= items[i].dataHintTitle %>" <% } %>><%= items[i].caption %></a>' +
                                 '</li>' +
                                 '<% } %>' +
                             '<% } %>' +
@@ -363,7 +363,7 @@ define([
                     return config.tabs[index].action;
                 }
 
-                var _tabTemplate = _.template('<li class="ribtab" style="display: none;" <% if (typeof layoutname == "string") print(" data-layout-name=" + \' \' +  layoutname) + \' \' %>><a data-tab="<%= action %>" data-title="<%= caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof dataHintTitle !== "undefined") { %> data-hint-title="<%= dataHintTitle %>" <% } %> ><%= caption %></a></li>');
+                var _tabTemplate = _.template('<li class="ribtab" style="display: none;" <% if (typeof layoutname == "string") print(" data-layout-name=" + \' \' +  layoutname) + \' \' %>><a role="tab" id="<%= action %>" data-tab="<%= action %>" data-title="<%= caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof dataHintTitle !== "undefined") { %> data-hint-title="<%= dataHintTitle %>" <% } %> ><%= caption %></a></li>');
 
                 config.tabs[after + 1] = tab;
                 var _after_action = _get_tab_action(after);
diff --git a/apps/common/main/lib/controller/ScreenReaderFocus.js b/apps/common/main/lib/controller/ScreenReaderFocus.js
index 320a3393d9..491c39424c 100644
--- a/apps/common/main/lib/controller/ScreenReaderFocus.js
+++ b/apps/common/main/lib/controller/ScreenReaderFocus.js
@@ -291,7 +291,7 @@ Common.UI.ScreenReaderFocusManager = new(function() {
                     tab = e.keyCode == Common.UI.Keys.TAB,
                     shiftTab = e.shiftKey && e.keyCode == Common.UI.Keys.TAB,
                     isPrevItem = isFileMenu ? left || up : left || shiftTab,
-                    isNextItem = isFileMenu ? right || down : right || tab && !shiftTab,
+                    isNextItem = isFileMenu ? (_currentLevel === 2 ? (right || down || tab && !shiftTab) : (right || down)) : right || tab && !shiftTab,
                     isPrevLevel = isFileMenu ? shiftTab : up,
                     isNextLevel = isFileMenu ? tab && !shiftTab : down;
                 e.preventDefault();
@@ -314,7 +314,6 @@ Common.UI.ScreenReaderFocusManager = new(function() {
                     } else if (isFileMenu && _currentLevel === 1) {
                         _nextLevel();
                         _setCurrentSection(btn);
-                        Common.Utils.ScreeenReaderHelper.speech('next level');
                     } else {
                         _hideFocus();
                         _resetToDefault();
@@ -325,24 +324,20 @@ Common.UI.ScreenReaderFocusManager = new(function() {
                 } else if (isPrevItem) {
                     turnOffHints = true;
                     _prevItem();
-                    Common.Utils.ScreeenReaderHelper.speech('previous item');
                 } else if (isNextItem) {
                     turnOffHints = true;
                     _nextItem();
-                    Common.Utils.ScreeenReaderHelper.speech('next item');
                 } else if (isNextLevel) {
                     var attr = '[data-hint="' + (_currentLevel + 1) + '"]';
                     if ($(_currentSection).find(attr).length === 0) return;
                     turnOffHints = true;
                     _nextLevel();
                     _setCurrentSection(btn);
-                    Common.Utils.ScreeenReaderHelper.speech('next level');
                 } else if (isPrevLevel) {
                     if (_currentLevel === 0) return;
                     turnOffHints = true;
                     _prevLevel();
                     _setCurrentSection(btn);
-                    Common.Utils.ScreeenReaderHelper.speech('previous level');
                 }
                 if (!_focusMode && turnOffHints) {
                     _focusMode = true;
diff --git a/apps/common/main/lib/view/Draw.js b/apps/common/main/lib/view/Draw.js
index 50b837be45..27b25d7e49 100644
--- a/apps/common/main/lib/view/Draw.js
+++ b/apps/common/main/lib/view/Draw.js
@@ -62,7 +62,7 @@ define([
             '<span id="slot-btn-draw-eraser" class="btn-slot text x-huge"></span>' +
             '</div>';
         var templateSection =
-            '<section id="draw-ink-panel" class="panel" data-tab="draw">' +
+            '<section id="draw-ink-panel" class="panel" data-tab="draw" role="tabpanel" aria-labelledby="draw">' +
             template +
             '</section>';
         function setEvents() {
diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index 0fcc87e9b5..449420ce67 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -99,7 +99,7 @@ define([
         },
 
         getPanel: function () {
-            var _panel = $('<section id="plugins-panel" class="panel" data-tab="plugins"></section>');
+            var _panel = $('<section id="plugins-panel" class="panel" data-tab="plugins" role="tabpanel" aria-labelledby="plugins"></section>');
             var _group = $('<div class="group"></div>');
             if ( !this.storePlugins.isEmpty() ) {
                 this.storePlugins.each(function (model) {
diff --git a/apps/common/main/lib/view/Protection.js b/apps/common/main/lib/view/Protection.js
index af7d17bc67..f13134e5a9 100644
--- a/apps/common/main/lib/view/Protection.js
+++ b/apps/common/main/lib/view/Protection.js
@@ -53,7 +53,7 @@ define([
 
     Common.Views.Protection = Common.UI.BaseView.extend(_.extend((function(){
         var template =
-            '<section id="protection-panel" class="panel" data-tab="protect">' +
+            '<section id="protection-panel" class="panel" data-tab="protect" role="tabpanel" aria-labelledby="protect">' +
             '<div class="group">' +
                 '<span id="slot-btn-add-password" class="btn-slot text x-huge"></span>' +
                 '<span id="slot-btn-change-password" class="btn-slot text x-huge"></span>' +
diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js
index e6ef05cdf2..a8e0790721 100644
--- a/apps/common/main/lib/view/ReviewChanges.js
+++ b/apps/common/main/lib/view/ReviewChanges.js
@@ -75,7 +75,7 @@ define([
 
     Common.Views.ReviewChanges = Common.UI.BaseView.extend(_.extend((function(){
         var template =
-            '<section id="review-changes-panel" class="panel" data-tab="review">' +
+            '<section id="review-changes-panel" class="panel" data-tab="review" role="tabpanel" aria-labelledby="review">' +
                 '<div class="group no-group-mask review">' +
                     '<span id="slot-btn-sharing" class="btn-slot text x-huge"></span>' +
                     '<span id="slot-btn-coauthmode" class="btn-slot text x-huge"></span>' +
diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
index 87079162fe..b2930c5647 100644
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@@ -4,7 +4,7 @@
         <%= tabsmarkup %>
         <div class="extra right"></div>
     </div>
-    <section class="box-controls">
+    <section class="box-controls" role="tabpanel">
         <section class="panel static">
             <div class="group no-mask small">
                 <div class="elset">
@@ -36,7 +36,7 @@
             <div class="separator long"></div>
         </section>
         <section class="box-panels">
-            <section class="panel" data-tab="home">
+            <section class="panel" data-tab="home" role="tabpanel" aria-labelledby="home">
                 <div class="group small">
                     <div class="elset" style="width:208px;">
                         <span class="btn-slot float-left" id="slot-field-fontname"></span>
@@ -89,7 +89,7 @@
                 <div class="separator long invisible"></div>
                 <div class="group small flex field-styles" id="slot-field-styles" style="min-width: 151px;width: 100%; " data-group-width="100%"></div>
             </section>
-            <section class="panel" data-tab="ins">
+            <section class="panel" data-tab="ins" role="tabpanel" aria-labelledby="ins">
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-blankpage"></span>
                     <span class="btn-slot text x-huge btn-pagebreak"></span>
@@ -134,7 +134,7 @@
                     <span class="btn-slot text x-huge" id="slot-btn-controls"></span>
                 </div>
             </section>
-            <section class="panel" data-tab="layout">
+            <section class="panel" data-tab="layout" role="tabpanel" aria-labelledby="layout">
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-pagemargins"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-pageorient"></span>
@@ -157,7 +157,7 @@
                     <span class="btn-slot text x-huge" id="slot-btn-watermark"></span>
                 </div>
             </section>
-            <section class="panel" data-tab="links">
+            <section class="panel" data-tab="links" role="tabpanel" aria-labelledby="links">
                 <div class="group">
                     <span class="btn-slot text x-huge btn-contents"></span>
                 </div>
diff --git a/apps/documenteditor/main/app/template/Viewport.template b/apps/documenteditor/main/app/template/Viewport.template
index c8411fa57d..af359d279e 100644
--- a/apps/documenteditor/main/app/template/Viewport.template
+++ b/apps/documenteditor/main/app/template/Viewport.template
@@ -4,7 +4,7 @@
             <div id="file-menu-panel" class="toolbar-fullview-panel hint-section" style="display:none;"></div>
         </section>
         <section id="app-title" class="layout-item"></section>
-        <div id="toolbar" class="layout-item hint-section" data-layout-name="toolbar" role="complementary" aria-label="Toolbar"></div>
+        <div id="toolbar" class="layout-item hint-section" data-layout-name="toolbar" role="toolbar"></div>
         <div class="layout-item middle">
             <div id="viewport-hbox-layout" class="layout-ct hbox">
                 <div id="left-menu" class="layout-item hint-section" data-layout-name="leftMenu" style="width: 40px;" role="complementary" aria-label="Left menu"></div>
diff --git a/apps/documenteditor/main/app/view/ViewTab.js b/apps/documenteditor/main/app/view/ViewTab.js
index 66b9bb1301..6182ec56a1 100644
--- a/apps/documenteditor/main/app/view/ViewTab.js
+++ b/apps/documenteditor/main/app/view/ViewTab.js
@@ -46,7 +46,7 @@ define([
 
     DE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
         var template =
-        '<section class="panel" data-tab="view">' +
+        '<section class="panel" data-tab="view" role="tabpanel" aria-labelledby="view">' +
             '<div class="group" data-layout-name="toolbar-view-navigation">' +
                 '<span class="btn-slot text x-huge" id="slot-btn-navigation"></span>' +
             '</div>' +