Skip to content
This repository was archived by the owner on Jul 11, 2024. It is now read-only.

Fix issues with application menu #563

Merged
merged 1 commit into from
Aug 23, 2018
Merged

Fix issues with application menu #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 36 additions & 14 deletions source/menus/application-menus-code.html.erb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ support: Developed with support from the <a href="https://www.w3.org/WAI/ACT/">W
</style>

<script>
var appsMenu = document.querySelector('#appmenu');
var appsMenuItems = document.querySelectorAll('#appmenu > li');
var subMenuItems = document.querySelectorAll('#appmenu > li li');
var keys = {
Expand All @@ -149,6 +150,7 @@ var gotoIndex = function(idx) {
}
appsMenuItems[idx].focus();
currentIndex = idx;
return appsMenuItems[idx];
};

var gotoSubIndex = function (menu, idx) {
Expand Down Expand Up @@ -180,8 +182,11 @@ Array.prototype.forEach.call(appsMenuItems, function(el, i){
el.addEventListener("click", function(event){
if (this.getAttribute('aria-expanded') == 'false' || this.getAttribute('aria-expanded') == null) {
this.setAttribute('aria-expanded', "true");
subindex = 0;
gotoSubIndex(this.querySelector('ul'), 0);
} else {
this.setAttribute('aria-expanded', "false");
gotoIndex(currentIndex);
}
event.preventDefault();
return false;
Expand All @@ -198,15 +203,16 @@ Array.prototype.forEach.call(appsMenuItems, function(el, i){
prevdef = true;
break;
case keys.tab:
if (event.shiftKey) {
gotoIndex(currentIndex - 1);
} else {
gotoIndex(currentIndex + 1);
}
prevdef = true;
// if (event.shiftKey) {
// gotoIndex(currentIndex - 1);
// } else {
// gotoIndex(currentIndex + 1);
// }
// prevdef = true;
break;
case keys.enter:
case keys.down:
case keys.space:
this.click();
subindex = 0;
gotoSubIndex(this.querySelector('ul'), 0);
Expand All @@ -233,21 +239,26 @@ Array.prototype.forEach.call(appsMenuItems, function(el, i){
Array.prototype.forEach.call(subMenuItems, function(el, i){
el.setAttribute('tabindex', '-1');
el.addEventListener("keydown", function(event) {
var prevdef = false;
switch (event.keyCode) {
case keys.tab:
if (event.shiftKey) {
gotoIndex(currentIndex - 1);
} else {
gotoIndex(currentIndex + 1);
}
prevdef = true;
// if (event.shiftKey) {
// gotoIndex(currentIndex - 1);
// } else {
// gotoIndex(currentIndex + 1);
// }
// prevdef = true;
break;
case keys.right:
gotoIndex(currentIndex + 1);
var newnode = gotoIndex(currentIndex + 1);
newnode.click();
gotoSubIndex(newnode, 0);
prevdef = true;
break;
case keys.left:
gotoIndex(currentIndex - 1);
var newnode = gotoIndex(currentIndex - 1);
newnode.click();
gotoSubIndex(newnode, 0);
prevdef = true;
break;
case keys.esc:
Expand Down Expand Up @@ -281,8 +292,19 @@ Array.prototype.forEach.call(subMenuItems, function(el, i){
return false;
});
});

window.addEventListener("click", function( event ) {
Array.prototype.forEach.call(appsMenuItems, function(el, i){
el.setAttribute('aria-expanded', "false");
});
});

appsMenu.addEventListener("click", function( event ) {
event.stopPropagation();
});
</script>

<div id="escape" style="clear:both">Element after the menu to focus on</div>

<%= sample_end %>
</div>
Expand Down
4 changes: 2 additions & 2 deletions source/menus/application-menus.html.erb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,11 +174,11 @@ The following table summarizes the typical behavior of submenu items:
<tbody>
<tr>
<th scope="row"><kbd>right &rarr;</kbd></th>
<td>Close the submenu, select the next top-level menu item.</td>
<td>Close the submenu, select the first item of the next top-level menu item.</td>
</tr>
<tr>
<th scope="row"><kbd>left &larr;</kbd></th>
<td>Close the submenu, select the previous top-level menu item.</td>
<td>Close the submenu, select the first item of the previous top-level menu item.</td>
</tr>
</tbody>
<tbody>
Expand Down