Skip to content

Commit

Permalink
Don't set focus to list items in modal dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@JuliaRadzhabova
JuliaRadzhabova committed Aug 18, 2024
1 parent 5132ab5 commit 6b4ace7
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 15 deletions.
31 changes: 19 additions & 12 deletions apps/common/main/lib/component/DataView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ define([
el.html(this.template(this.model.toJSON()));
el.addClass('item canfocused');
el.toggleClass('selected', this.model.get('selected') && this.model.get('allowSelected'));
el.attr('tabindex', 0);
el.attr('tabindex', this.options.tabindex || 0);
el.attr('role', this.options.role ? this.options.role : 'listitem');

if (this.dataHint !== '') {
Expand Down Expand Up @@ -313,6 +313,7 @@ define([
me.minScrollbarLength = me.options.minScrollbarLength || 40;
me.scrollYStyle = me.options.scrollYStyle;
me.tabindex = me.options.tabindex || 0;
me.itemTabindex = me.options.itemTabindex!==undefined ? me.options.itemTabindex : me.tabindex>0 ? -1 : 0; //do not set focus to items when dataview get focus
me.delayRenderTips = me.options.delayRenderTips || false;
if (me.parentMenu)
me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
Expand Down Expand Up @@ -507,7 +508,8 @@ define([
scaling: this.options.scaling,
dataHint: this.itemDataHint,
dataHintDirection: this.itemDataHintDirection,
dataHintOffset: this.itemDataHintOffset
dataHintOffset: this.itemDataHintOffset,
tabindex: this.itemTabindex
});

if (view) {
Expand Down Expand Up @@ -964,7 +966,7 @@ define([
this._fromKeyDown = true;
this.selectRecord(rec);
this.scrollToRecord(rec);
this.dataViewItems[idx] && this.dataViewItems[idx].$el.focus();
(this.itemTabindex!==-1) && this.dataViewItems[idx] && this.dataViewItems[idx].$el.focus();
this._fromKeyDown = false;
}
}
Expand Down Expand Up @@ -1127,7 +1129,7 @@ define([
'<div class="dataview inner" style="<%= style %>" role="list">',
'<% _.each(items, function(item) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" role="listitem" tabindex="0" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %></div>',
'<div class="item" role="listitem" <% if(typeof itemTabindex !== undefined) { %> tabindex="<%= itemTabindex %>" <% } %> <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %></div>',
'<% }) %>',
'</div>'
].join('')),
Expand All @@ -1146,6 +1148,7 @@ define([
me.style = me.options.style || '';
me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
me.tabindex = me.options.tabindex || 0;
me.itemTabindex = me.options.itemTabindex!==undefined ? me.options.itemTabindex : me.tabindex>0 ? -1 : 0; //do not set focus to items when dataview get focus

if (me.parentMenu)
me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
Expand All @@ -1168,7 +1171,8 @@ define([
this.cmpEl = $(this.template({
items: me.store.toJSON(),
itemTemplate: me.itemTemplate,
style: me.style
style: me.style,
itemTabindex: me.itemTabindex || 0
}));

parentEl.html(this.cmpEl);
Expand All @@ -1178,7 +1182,8 @@ define([
items: me.store.toJSON(),
itemTemplate: me.itemTemplate,
style: me.style,
options: me.options
options: me.options,
itemTabindex: me.itemTabindex || 0
}));
}
var modalParents = this.cmpEl.closest('.asc-window');
Expand Down Expand Up @@ -1292,13 +1297,14 @@ define([
var template = _.template([
'<% _.each(items, function(item) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" role="listitem" tabindex="0" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %></div>',
'<div class="item" role="listitem" <% if(typeof itemTabindex !== undefined) { %> tabindex="<%= itemTabindex %>" <% } %> <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %></div>',
'<% }) %>'
].join(''));
this.cmpEl && this.cmpEl.find('.inner').html(template({
items: this.store.toJSON(),
itemTemplate: this.itemTemplate,
style : this.style
style : this.style,
itemTabindex: this.itemTabindex || 0
}));

if (!_.isUndefined(this.scroller)) {
Expand Down Expand Up @@ -1483,7 +1489,7 @@ define([
this._fromKeyDown = true;
this.selectRecord(rec);
this.scrollToRecord(rec);
this.dataViewItems[idx] && $(this.dataViewItems[idx].el).focus();
(this.itemTabindex!==-1) && this.dataViewItems[idx] && $(this.dataViewItems[idx].el).focus();
this._fromKeyDown = false;
}
}
Expand Down Expand Up @@ -1620,7 +1626,7 @@ define([
'<div class="group-items-container <% if (index === 0) { %> recent-items <% } %>">',
'<% _.each(group.groupStore.toJSON(), function(item, index) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" role="listitem" tabindex="0" data-index="<%= index %>"<% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<div class="item" role="listitem" <% if (typeof itemTabindex !== undefined) { %> tabindex="<%= itemTabindex %>" <% } %> data-index="<%= index %>"<% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<% }); %>',
'</div>',
'</div>',
Expand Down Expand Up @@ -1921,13 +1927,14 @@ define([
var template = _.template([
'<% _.each(items, function(item, index) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" role="listitem" tabindex="0" data-index="<%= index %>"<% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<div class="item" role="listitem" <% if (typeof itemTabindex !== undefined) { %> tabindex="<%= itemTabindex %>" <% } %> data-index="<%= index %>"<% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<% }) %>'
].join(''));
me.cmpEl && me.cmpEl.find('.recent-items').html(template({
items: me.recentShapes,
itemTemplate: this.itemTemplate,
style : this.style
style : this.style,
itemTabindex: this.itemTabindex || 0
}));

me.updateDataViewItems = true;
Expand Down
3 changes: 2 additions & 1 deletion apps/common/main/lib/component/ListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,8 @@ define([
createNewItem: function(record) {
return new Common.UI.DataViewItem({
template: this.itemTemplate,
model: record
model: record,
tabindex: this.itemTabindex
});
},

Expand Down
3 changes: 2 additions & 1 deletion apps/common/main/lib/component/TreeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,8 @@ define([
var view = new Common.UI.DataViewItem({
template: this.itemTemplate,
model: record,
role: this.options.roleItem
role: this.options.roleItem,
tabindex: this.itemTabindex
});

if (view) {
Expand Down
3 changes: 2 additions & 1 deletion apps/spreadsheeteditor/main/app/view/ProtectDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,8 @@ define([], function () {
'<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
'</div>',
'</div>'
].join(''))
].join('')),
tabindex: 1
});
this.optionsList.on({
'item:change': this.onItemChanged.bind(this),
Expand Down

0 comments on commit 6b4ace7

Please sign in to comment.