pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-04-07 14:06:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

[common] Add roles in toolbar for screen reader focus manager

Browse Source
This commit is contained in:
Julia.Svinareva
2024-01-15 12:32:42 +03:00
parent 72ebb33d5c
commit ba7ee3bb1d
9 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/common/main/lib/component/Mixtbar.js
View File

@ -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);

7
apps/common/main/lib/controller/ScreenReaderFocus.js
View File

@ -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;

2
apps/common/main/lib/view/Draw.js
View File

@ -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() {

2
apps/common/main/lib/view/Plugins.js
View File

@ -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) {

2
apps/common/main/lib/view/Protection.js
View File

@ -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>' +

2
apps/common/main/lib/view/ReviewChanges.js
View File

@ -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>' +

10
apps/documenteditor/main/app/template/Toolbar.template
View File

@ -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>

2
apps/documenteditor/main/app/template/Viewport.template
View File

@ -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>

2
apps/documenteditor/main/app/view/ViewTab.js
View File

@ -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>' +