Merge pull request #10310 from nextcloud/accessibility-header
Accessibility fixes for header and global elements
This commit is contained in:
commit
a96137ef0b
|
@ -678,7 +678,7 @@
|
||||||
this.updateSelectionSummary();
|
this.updateSelectionSummary();
|
||||||
} else {
|
} else {
|
||||||
// clicked directly on the name
|
// clicked directly on the name
|
||||||
if (!this._detailsView || $(event.target).is('.nametext') || $(event.target).closest('.nametext').length) {
|
if (!this._detailsView || $(event.target).is('.nametext, .name') || $(event.target).closest('.nametext').length) {
|
||||||
var filename = $tr.attr('data-file');
|
var filename = $tr.attr('data-file');
|
||||||
var renaming = $tr.data('renaming');
|
var renaming = $tr.data('renaming');
|
||||||
if (!renaming) {
|
if (!renaming) {
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
var TEMPLATE_MENU =
|
var TEMPLATE_MENU =
|
||||||
'<ul>' +
|
'<ul>' +
|
||||||
'<li>' +
|
'<li>' +
|
||||||
'<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' +
|
'<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}" tabindex="0"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' +
|
||||||
'</li>' +
|
'</li>' +
|
||||||
'{{#each items}}' +
|
'{{#each items}}' +
|
||||||
'<li>' +
|
'<li>' +
|
||||||
|
@ -235,6 +235,13 @@
|
||||||
items: this._menuItems
|
items: this._menuItems
|
||||||
}));
|
}));
|
||||||
OC.Util.scaleFixForIE8(this.$('.svg'));
|
OC.Util.scaleFixForIE8(this.$('.svg'));
|
||||||
|
|
||||||
|
// Trigger upload action also with keyboard navigation on enter
|
||||||
|
this.$el.find('[for="file_upload_start"]').on('keyup', function(event) {
|
||||||
|
if (event.key === " " || event.key === "Enter") {
|
||||||
|
$('#file_upload_start').trigger('click');
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -2429,7 +2429,7 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
);
|
);
|
||||||
fileList.fileActions.setDefault('text/plain', 'Test');
|
fileList.fileActions.setDefault('text/plain', 'Test');
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
expect(actionStub.calledOnce).toEqual(true);
|
expect(actionStub.calledOnce).toEqual(true);
|
||||||
expect(updateDetailsViewStub.notCalled).toEqual(true);
|
expect(updateDetailsViewStub.notCalled).toEqual(true);
|
||||||
updateDetailsViewStub.restore();
|
updateDetailsViewStub.restore();
|
||||||
|
@ -2437,14 +2437,14 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
it('highlights current file when clicked and updates sidebar', function() {
|
it('highlights current file when clicked and updates sidebar', function() {
|
||||||
fileList.fileActions.setDefault('text/plain', 'Test');
|
fileList.fileActions.setDefault('text/plain', 'Test');
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
expect($tr.hasClass('highlighted')).toEqual(true);
|
expect($tr.hasClass('highlighted')).toEqual(true);
|
||||||
|
|
||||||
expect(fileList._detailsView.getFileInfo().id).toEqual(1);
|
expect(fileList._detailsView.getFileInfo().id).toEqual(1);
|
||||||
});
|
});
|
||||||
it('keeps the last highlighted file when clicking outside', function() {
|
it('keeps the last highlighted file when clicking outside', function() {
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
|
|
||||||
fileList.$el.find('tfoot').click();
|
fileList.$el.find('tfoot').click();
|
||||||
|
|
||||||
|
@ -2455,12 +2455,12 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
|
|
||||||
// select
|
// select
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
$tr.find('input:checkbox').click();
|
$tr.find('input:checkbox').click();
|
||||||
expect($tr.hasClass('highlighted')).toEqual(false);
|
expect($tr.hasClass('highlighted')).toEqual(false);
|
||||||
|
|
||||||
// deselect
|
// deselect
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
$tr.find('input:checkbox').click();
|
$tr.find('input:checkbox').click();
|
||||||
expect($tr.hasClass('highlighted')).toEqual(false);
|
expect($tr.hasClass('highlighted')).toEqual(false);
|
||||||
|
|
||||||
|
@ -2470,12 +2470,12 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
|
|
||||||
// select
|
// select
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
fileList.$el.find('.select-all.checkbox').click();
|
fileList.$el.find('.select-all.checkbox').click();
|
||||||
expect($tr.hasClass('highlighted')).toEqual(false);
|
expect($tr.hasClass('highlighted')).toEqual(false);
|
||||||
|
|
||||||
// deselect
|
// deselect
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
fileList.$el.find('.select-all.checkbox').click();
|
fileList.$el.find('.select-all.checkbox').click();
|
||||||
expect($tr.hasClass('highlighted')).toEqual(false);
|
expect($tr.hasClass('highlighted')).toEqual(false);
|
||||||
|
|
||||||
|
@ -2484,7 +2484,7 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
it('closes sidebar whenever the currently highlighted file was removed from the list', function() {
|
it('closes sidebar whenever the currently highlighted file was removed from the list', function() {
|
||||||
jQuery.fx.off = true;
|
jQuery.fx.off = true;
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
expect($tr.hasClass('highlighted')).toEqual(true);
|
expect($tr.hasClass('highlighted')).toEqual(true);
|
||||||
|
|
||||||
expect(fileList._detailsView.getFileInfo().id).toEqual(1);
|
expect(fileList._detailsView.getFileInfo().id).toEqual(1);
|
||||||
|
@ -2497,7 +2497,7 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
});
|
});
|
||||||
it('returns the currently selected model instance when calling getModelForFile', function() {
|
it('returns the currently selected model instance when calling getModelForFile', function() {
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
|
|
||||||
var model1 = fileList.getModelForFile('One.txt');
|
var model1 = fileList.getModelForFile('One.txt');
|
||||||
var model2 = fileList.getModelForFile('One.txt');
|
var model2 = fileList.getModelForFile('One.txt');
|
||||||
|
@ -2512,7 +2512,7 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
it('closes the sidebar when switching folders', function() {
|
it('closes the sidebar when switching folders', function() {
|
||||||
jQuery.fx.off = true;
|
jQuery.fx.off = true;
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename>a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
|
|
||||||
expect($('#app-sidebar').hasClass('disappear')).toEqual(false);
|
expect($('#app-sidebar').hasClass('disappear')).toEqual(false);
|
||||||
fileList.changeDirectory('/another');
|
fileList.changeDirectory('/another');
|
||||||
|
@ -2561,7 +2561,7 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
// not set.
|
// not set.
|
||||||
fileList.fileActions.currentFile = null;
|
fileList.fileActions.currentFile = null;
|
||||||
var $tr = fileList.findFileEl('One.txt');
|
var $tr = fileList.findFileEl('One.txt');
|
||||||
$tr.find('td.filename a.name').click();
|
$tr.find('td.filesize').click();
|
||||||
expect(detailsActionStub.calledOnce).toEqual(true);
|
expect(detailsActionStub.calledOnce).toEqual(true);
|
||||||
expect(detailsActionStub.getCall(0).args[0]).toEqual('One.txt');
|
expect(detailsActionStub.getCall(0).args[0]).toEqual('One.txt');
|
||||||
var context = detailsActionStub.getCall(0).args[1];
|
var context = detailsActionStub.getCall(0).args[1];
|
||||||
|
|
|
@ -345,17 +345,13 @@ nav[role='navigation'] {
|
||||||
opacity: 1; /* override icon opacity */
|
opacity: 1; /* override icon opacity */
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
|
|
||||||
img {
|
|
||||||
opacity: .7;
|
|
||||||
margin-bottom: -2px;
|
|
||||||
}
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
color: var(--color-primary-text);
|
color: var(--color-primary-text);
|
||||||
|
|
||||||
img, #expandDisplayName {
|
img, #expandDisplayName {
|
||||||
opacity: 1;
|
opacity: .57 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -482,7 +478,8 @@ nav[role='navigation'] {
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover span,
|
li:hover span,
|
||||||
li:focus span {
|
li:focus span,
|
||||||
|
li a:focus span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -562,7 +559,7 @@ nav[role='navigation'] {
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 1000;
|
z-index: 9999;
|
||||||
top: -999px;
|
top: -999px;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
/* Force primary color, otherwise too light focused color */
|
/* Force primary color, otherwise too light focused color */
|
||||||
|
|
|
@ -794,7 +794,12 @@ span.ui-icon {
|
||||||
background-size: 16px 16px;
|
background-size: 16px 16px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: .6;
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1026,6 +1031,8 @@ div.crumb {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover, &:focus, a:focus, &:active {
|
&:hover, &:focus, a:focus, &:active {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
> a,
|
> a,
|
||||||
> span {
|
> span {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
|
|
|
@ -684,10 +684,15 @@ var OCP = {},
|
||||||
registerMenu: function($toggle, $menuEl, toggle, headerMenu) {
|
registerMenu: function($toggle, $menuEl, toggle, headerMenu) {
|
||||||
var self = this;
|
var self = this;
|
||||||
$menuEl.addClass('menu');
|
$menuEl.addClass('menu');
|
||||||
$toggle.on('click.menu', function(event) {
|
$toggle.on('click.menu keyup.menu', function(event) {
|
||||||
// prevent the link event (append anchor to URL)
|
// prevent the link event (append anchor to URL)
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
// allow enter key as a trigger
|
||||||
|
if (event.key && event.key !== "Enter") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if ($menuEl.is(OC._currentMenu)) {
|
if ($menuEl.is(OC._currentMenu)) {
|
||||||
self.hideMenus();
|
self.hideMenus();
|
||||||
return;
|
return;
|
||||||
|
@ -1422,7 +1427,14 @@ function initCore() {
|
||||||
OC.registerMenu($('#expand'), $('#expanddiv'), false, true);
|
OC.registerMenu($('#expand'), $('#expanddiv'), false, true);
|
||||||
|
|
||||||
// toggle for menus
|
// toggle for menus
|
||||||
|
//$(document).on('mouseup.closemenus keyup', function(event) {
|
||||||
$(document).on('mouseup.closemenus', function(event) {
|
$(document).on('mouseup.closemenus', function(event) {
|
||||||
|
|
||||||
|
// allow enter as a trigger
|
||||||
|
// if (event.key && event.key !== "Enter") {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
var $el = $(event.target);
|
var $el = $(event.target);
|
||||||
if ($el.closest('.menu').length || $el.closest('.menutoggle').length) {
|
if ($el.closest('.menu').length || $el.closest('.menutoggle').length) {
|
||||||
// don't close when clicking on the menu directly or a menu toggle
|
// don't close when clicking on the menu directly or a menu toggle
|
||||||
|
@ -1617,14 +1629,27 @@ function initCore() {
|
||||||
maxPosition: 300, // $navigation-width
|
maxPosition: 300, // $navigation-width
|
||||||
minDragDistance: 100
|
minDragDistance: 100
|
||||||
});
|
});
|
||||||
$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');
|
|
||||||
$('#app-navigation-toggle').click(function(){
|
$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;" tabindex="0"></div>');
|
||||||
|
|
||||||
|
var toggleSnapperOnButton = function(){
|
||||||
if(snapper.state().state == 'left'){
|
if(snapper.state().state == 'left'){
|
||||||
snapper.close();
|
snapper.close();
|
||||||
} else {
|
} else {
|
||||||
snapper.open('left');
|
snapper.open('left');
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#app-navigation-toggle').click(function(){
|
||||||
|
toggleSnapperOnButton();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#app-navigation-toggle').keypress(function(e) {
|
||||||
|
if(e.which == 13) {
|
||||||
|
toggleSnapperOnButton();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// close sidebar when switching navigation entry
|
// close sidebar when switching navigation entry
|
||||||
var $appNavigation = $('#app-navigation');
|
var $appNavigation = $('#app-navigation');
|
||||||
$appNavigation.delegate('a, :button', 'click', function(event) {
|
$appNavigation.delegate('a, :button', 'click', function(event) {
|
||||||
|
|
Loading…
Reference in New Issue