Skip to content

Commit

Permalink
Merge pull request #8257 from GlobalDataverseCommunityConsortium/IQSS…
Browse files Browse the repository at this point in the history 
…/8247-flyout_menu_accessibility

Iqss/8247 flyout menu accessibility
  • Loading branch information
@kcondon
kcondon authored Nov 30, 2021
2 parents 199444c + d04e8db commit 2400aa9
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 10 deletions.
6 changes: 3 additions & 3 deletions src/main/webapp/dataset.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@
and DatasetPage.showComputeButton()}">
<li class="dropdown-header">#{bundle['dataset.accessBtn.header.compute']} <span class="glyphicon glyphicon-flash"/></li>
<li>
<a tabindex="-1" href="#" id="computeBatch" class="btn-compute">#{bundle['dataset.compute.computeBtn']}</a>
<a tabindex="0" id="computeBatch" class="btn-compute">#{bundle['dataset.compute.computeBtn']}</a>
<ul class="dropdown-menu">
<li>
<!-- Compute dataset link -->
Expand Down Expand Up @@ -335,7 +335,7 @@
</li>
<ui:fragment rendered="#{(not empty DatasetPage.allowedExternalStatuses) and DatasetPage.canPublishDataset()}">
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">#{bundle['dataset.changestatus']}</a>
<a tabindex="0">#{bundle['dataset.changestatus']}</a>
<ul class="dropdown-menu">
<ui:repeat value="#{DatasetPage.allowedExternalStatuses}" var="status">
<li>
Expand Down Expand Up @@ -387,7 +387,7 @@
<ui:fragment rendered="#{permissionsWrapper.canManagePermissions(DatasetPage.dataset) || permissionsWrapper.canManageFilesOnDataset(DatasetPage.dataset)}">
<li class="#{settingsWrapper.publicInstall ? '' : 'dropdown-submenu pull-left'}">
<ui:fragment rendered="#{!settingsWrapper.publicInstall}">
<a tabindex="-1" href="#">#{bundle['dataset.editBtn.itemLabel.permissions']}</a>
<a tabindex="0">#{bundle['dataset.editBtn.itemLabel.permissions']}</a>
<ul class="dropdown-menu">
<li jsf:rendered="#{permissionsWrapper.canManagePermissions(DatasetPage.dataset)}">
<h:link id="manageDatasetPermissions" styleClass="ui-commandlink ui-widget" outcome="permissions-manage">
Expand Down
6 changes: 3 additions & 3 deletions src/main/webapp/file-download-button-fragment.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@

<!-- CITATION FILES DOWNLOAD OPTIONS -->
<li class="dropdown-submenu pull-left" jsf:rendered="#{!anonymized}">
<a tabindex="-1" href="javascript:void(0);">#{bundle['file.downloadBtn.format.citation']}</a>
<a tabindex="0">#{bundle['file.downloadBtn.format.citation']}</a>
<ul class="dropdown-menu">
<li>
<h:commandLink styleClass="btn-download" action="#{fileDownloadService.downloadDatafileCitationXML(fileMetadata)}">
Expand Down Expand Up @@ -234,7 +234,7 @@
<!-- Aux Files in Bundle (DP, etc.)-->
<ui:repeat var="auxFileType" value="#{auxiliaryFileServiceBean.findAuxiliaryFileTypes(fileMetadata.dataFile, true)}">
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="javascript:void(0);">#{auxiliaryFileServiceBean.getFriendlyNameForType(auxFileType)}</a>
<a tabindex="0">#{auxiliaryFileServiceBean.getFriendlyNameForType(auxFileType)}</a>
<ul class="dropdown-menu">
<ui:repeat var="auxFile" value="#{auxiliaryFileServiceBean.findAuxiliaryFilesByType(fileMetadata.dataFile, auxFileType)}">
<li>
Expand All @@ -248,7 +248,7 @@
</ui:repeat>
<!--Other Aux Files (not in bundle)-->
<li class="dropdown-submenu pull-left" jsf:rendered="#{not empty auxiliaryFileServiceBean.findOtherAuxiliaryFiles(fileMetadata.dataFile)}">
<a tabindex="-1" href="javascript:void(0);">#{bundle['file.auxfiles.unspecifiedTypes']}</a>
<a tabindex="0">#{bundle['file.auxfiles.unspecifiedTypes']}</a>
<ul class="dropdown-menu">
<ui:repeat var="auxFile" value="#{auxiliaryFileServiceBean.findOtherAuxiliaryFiles(fileMetadata.dataFile)}">
<li>
Expand Down
8 changes: 5 additions & 3 deletions src/main/webapp/filesFragment.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -488,7 +488,7 @@
</a>
</ui:fragment>
<a type="button" style="padding:6px 8px;" class="btn-access-file btn btn-link bootstrap-button-tooltip dropdown-toggle"
title="#{bundle['file.accessBtn']}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
title="#{bundle['file.accessBtn']}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="glyphicon glyphicon-download-alt"/><span class="sr-only">#{bundle['file.accessBtn']}</span><span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right text-left">
Expand Down Expand Up @@ -527,7 +527,8 @@
and DatasetPage.isFileDeleted(fileMetadata.dataFile)}">
<a type="button" class="btn-file-options btn btn-link bootstrap-button-tooltip dropdown-toggle #{DatasetPage.lockedFromEdits ? 'disabled' : ''}"
disabled="#{DatasetPage.lockedFromEdits ? 'disabled' : ''}"
title="#{bundle['file.optionsBtn']}" onclick="PF('fileAlreadyDeletedPrevious').show()">
title="#{bundle['file.optionsBtn']}" onclick="PF('fileAlreadyDeletedPrevious').show()"
tabindex="0">
<span class="glyphicon glyphicon-option-vertical"/><span class="sr-only">#{bundle['file.optionsBtn']}</span>
</a>
</div>
Expand All @@ -538,7 +539,8 @@
<!-- Kebab / Edit / File Options Dropdown -->
<a type="button" class="btn-file-options btn btn-link bootstrap-button-tooltip dropdown-toggle #{DatasetPage.lockedFromEdits ? 'disabled' : ''}"
disabled="#{DatasetPage.lockedFromEdits ? 'disabled' : ''}"
title="#{bundle['file.optionsBtn']}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
title="#{bundle['file.optionsBtn']}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
tabindex="0">
<span class="glyphicon glyphicon-option-vertical"/><span class="sr-only">#{bundle['file.optionsBtn']}</span><span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level pull-right text-left">
Expand Down
1 change: 1 addition & 0 deletions src/main/webapp/resources/css/structure.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ a.tooltip-icon:hover, a.tool-tip:focus, a.tool-tip:active {text-decoration: none
min-width: 100%;
}

/*Open/Close is now handled by javascript (provides a delay on close for accessibility) - leaving this to work when javascript is disabled*/
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
Expand Down
53 changes: 52 additions & 1 deletion src/main/webapp/resources/js/dv_rebind_bootstrap_ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ function bind_bsui_components(){
var dialog_id = this.jq.attr('id').split(/[:]+/).pop();
handleResizeDialog(dialog_id);
}

//Fly-out sub-menu accessibility
enableSubMenus();
}

function bind_tooltip_popover(){
Expand Down Expand Up @@ -359,4 +362,52 @@ function handle_dropdown_popup_scroll(){
});
}
});
}
}

function enableSubMenus() {
$('.dropdown-submenu>a').off('keydown').keydown(toggleSubMenu);
$('.dropdown-submenu>.dropdown-menu>li:last-of-type>a').off('keydown').keydown(closeOnTab);
$('.dropdown-submenu>.dropdown-menu>li:first-of-type>a').off('keydown').keydown(closeOnShiftTab);
addMenuDelays();
}

function toggleSubMenu(event) {
if ( event.key == ' ' || event.key == 'Enter' ) {
event.target.parentElement.classList.toggle('open');
}
}

function closeOnTab(event) {
console.log(event.key);
if ( event.key == 'Tab') {
$(this).parent().parent().parent().removeClass('open');
}
}

function closeOnShiftTab(event) {
console.log(event.key);
if ( event.key == 'Tab' && event.shiftKey) {
$(this).parent().parent().parent().removeClass('open');
}
}

function addMenuDelays() {
$('.dropdown-submenu>a').each(function() {
var obj =$( this ).parent();
//First time - add open class upon mouseover
$(this).off('mouseover').mouseover(function() {
obj.addClass('open');
});
var closeMenuTimer;
//And add a mouseout function that will
// a) remove that class after a delay, and
// b) update the mouseover to remove the timer if it hasn't run yet (and re-add the open class if it has)
$(this).off('mouseout').mouseout(function() {
closeMenuTimer = setTimeout(function() {obj.removeClass('open');}, 1000);
$(this).off('mouseover').mouseover(function() {
obj.addClass('open');
clearTimeout(closeMenuTimer);
});
});
});
}

0 comments on commit 2400aa9

Please sign in to comment.