ドロップダウンメニューで第2階層の最後のliにフォーカスがある時にShift+Tabキーを押すと第2階層のメニューが非表示になってしまう

前提・実現したいこと

ドロップダウンメニューでキーボード移動(Tabキー及びShift+Tabキー)した時、
第2階層を持ったliもしくは第2階層からフォーカスが外れた時、
第2階層のメニューが非表示になるよう
(第2階層を持ったliもしくは第2階層にフォーカスがある時には第2階層のメニューは表示)
にするには記述をどのように修正したらよいでしょうか？

発生している問題

第2階層の一番最後のliにフォーカスがある時にShift+Tabキーを押すと
第2階層のメニューが非表示になってしまいます。

該当のソースコード

HTML
1<ul>
2<li><a href="#">hoge1</a></li>
3<li><a href="#" aria-haspopup="true">hoge2</a>
4<ul aria-label="submenu" aria-hidden="true">
5<li><a href="#">fuga1</a></li>
6<li><a href="#">fuga2</a></li>
7<li><a href="#">fuga3</a></li>
8</ul>
9</li>
10<li><a href="#">hoge3</a>
11</ul>

JavaScript
1$('[aria-haspopup]').on('focus', function(e) {
2  var submenu = $(this).next();
3  showSubmenu(submenu);
4  $(submenu).find('li').focus();
5  return false;
6});
7$('[aria-hidden] li:last-child').focusout(function(e) {
8  hideSubmenu($('[aria-label="submenu"]'));
9});
10$('[aria-haspopup]').on('keydown', function(e) {
11  if (e.keyCode === 9) {
12    if (e.shiftKey) {
13      hideSubmenu($('[aria-label="submenu"]'));
14    }
15  }
16});
17

行動規範の内容に同意します

回答1件

ベストアンサー

focusoutはバブリングするため、上のほうでとらえればいいでしょう。

JavaScript
1$('[aria-hidden]').focusout(function(e) {
2  if (this.contains(e.relatedTarget)) {
3    return true;
4  }
5
6  hideSubmenu($('[aria-label="submenu"]'));
7  return true;
8});