キーボード操作時のフォーカス制御時と解除時のフォーカス順がおかしいので正しくなるようにしたいです。

前提・実現したいこと

ウインドウサイズが1151px以下の時は、キーボード移動(Tabキー又はShift+Tab)時のフォーカスがメニューボタンとナビゲーションメニュー内だけの移動にし、
Tabキーを押したときの移動順序は、メニューボタン→ナビゲーションメニュー(第1階層→第2階層→第1階層)→メニューボタン→ナビゲーションと回る。
ナビゲーションメニューにフォーカスがある時にShift+Tabキーを押した時の移動順序は、
ナビゲーションメニューの第1階層にフォーカスがある場合、次の要素の第2階層→第1階層→メニューボタンで止まるようにする。
1152px以上の時には普通に横並びのメニューになるのでフォーカス範囲制御を解除する。

問題が多くてすみませんが、試行錯誤したのですがどう修正すれば意図した動作になるのかわかりません。
どう修正すれば問題を解消出来ますでしょうか？

###発生している問題
0. メニューボタンにフォーカスしている状態でTabキーを押すと1番初めの第1階層のli a(hoge1)にフォーカスしなければいけないのに、1番初めの第2階層の1番最後のli a(fuga2)にフォーカスが飛んでしまう。
(移動順序がおかしい)

ナビゲーションメニューにフォーカスがある時にShift+Tabキーを押すと、1番初めの第2階層の1番最後のli a(fuga2)にフォーカスした後は第2階層の1番最後の前のli a(fuga1)にフォーカスし次に第1階層のli a(hoge1)にフォーカスしてメニューボタンに移動しなければいけないのにそうはならず、1番最後の前のli a(fuga2)にフォーカスした後メニューボタンにフォーカスが飛んでしまう。

(移動順序がおかしい)

画面が1152px以上の時(初回表示時及びリロードした時)、1番初めの第2階層(hoge1 > fuga1 or fuga2)にフォーカスがある時にShift+Tabキーを押すと次の要素に移動せず、サイト名(h1 a)にフォーカスが飛んでしまう。

(移動順序がおかしい)

###試した事
ナビゲーションの１番初め(hoge1)がサブナビ（第2階層）を持たない場合は、下記の記述でも上記の3つの問題は発生しませんでした。
ですが、ナビゲーションの1番初めの要素(hoge1）がサブナビ（第2階層）を持っていても持っていなくても上記の問題が出ないよう実装したいので、どう修正すれば問題を解消出来るかご教示お願いします。

HTML
1<div class="wrap">
2<h1 class="logo"><a href="/">Site Name</a></h1>
3<!-- メニューボタン -->
4<p class="btn"><a href="#menu-btn">&#x2630;</a></p>
5<!-- ナビゲーションメニュー -->
6<nav id="navigation">
7<ul>
8<li><a href="#">hoge1</a>
9<ul>
10<li><a href="#">fuga1</a></li>
11<li><a href="#">fuga2</a></li>
12</ul>
13</li>
14<li><a href="#">hoge2</a>
15<ul>
16<li><a href="#">fuga1</a></li>
17</ul>
18</li>
19<li><a href="#">hoge3</a></li>
20<li><a href="#">hoge4</a>
21<ul>
22<li><a href="#">fuga1</a></li>
23<li><a href="#">fuga2</a></li>
24<li><a href="#">fuga3</a></li>
25</ul>
26</li>
27</ul>
28</nav>
29<!-- メインコンテンツ -->
30<main id="main">
31<p>メイン<a href="#">リンク</a></p>
32</main>
33</div>
34

JavaScript
1$(window).on('load resize', function(){
2if ($(window).width() <= 1151) { //ウインドウサイズが1151px以下ならば
3
4$('#navigation li:last a').on('keydown', function(e) {
5  if (e.keyCode === 9) {
6    if (!e.shiftKey) {
7      e.preventDefault();
8      $('[href="#menu-btn"]').focus();
9    }
10  }
11});
12
13$('#navigation li:first a').on('keydown', function(e) {
14  if (e.keyCode === 9) {
15    if (e.shiftKey) {
16      e.preventDefault();
17      $('[href="#menu-btn"]').focus();
18    }
19  }
20});
21
22} else {
23
24$('#navigation li:last a').on('keydown', function(e) {
25  if (e.keyCode === 9) {
26    if (!e.shiftKey) {
27      $(this).blur();
28    }
29  }
30});
31
32
33$('#navigation li:first a').on('keydown', function(e) {
34  if (e.keyCode === 9) {
35    if (e.shiftKey) {
36      e.preventDefault();
37      $('.logo a').focus();
38    }
39  }
40});
41
42
43}
44});
45

CSS
1.wrap {
2  max-width: 1170px;
3  margin: 0 auto;
4  padding: 3%;
5}
6
7.btn {
8  display: none;
9}
10
11nav ul {
12  list-style: none;
13  margin-left: 190px;
14  padding: 0;
15}
16
17#navigation ul ul {
18  margin: 10px 0 0;
19}
20
21#navigation ul ul li {
22  float: none;
23}
24#navigation li {
25  float: left;
26  margin-left: 5%;
27  width: 12%;
28}
29
30#main {
31  clear: both;
32  margin-top: 180px
33}
34
35/*--  smaller than 1165px --*/
36@media screen and (max-width: 1165px) {
37
38.btn {
39  display: block;
40  width: 30%;
41  text-align: right;
42}
43
44#navigation {
45  width: 44%;
46  padding: 25px 0 20px;
47}
48
49#navigation ul {
50  margin: 15px 0 0;
51}
52
53#navigation ul li {
54  float: none;
55}
56
57#navigation ul ul {
58  display: block;
59  padding-left: 1.12em;
60}
61
62#navigation ul ul li {
63  margin: 0;
64}
65
66}
67
68

全体のコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8" />
5	<meta name="viewport" content="width=device-width">
6	<title>test</title>
7<style type="text/css">
8.wrap {
9  max-width: 1170px;
10  margin: 0 auto;
11  padding: 3%;
12}
13
14.btn {
15  display: none;
16}
17
18nav ul {
19  list-style: none;
20  margin-left: 190px;
21  padding: 0;
22}
23
24#navigation ul ul {
25  margin: 10px 0 0;
26}
27
28#navigation ul ul li {
29  float: none;
30}
31#navigation li {
32  float: left;
33  margin-left: 5%;
34  width: 12%;
35}
36
37#main {
38  clear: both;
39  margin-top: 180px
40}
41
42/*--  smaller than 1165px --*/
43@media screen and (max-width: 1165px) {
44
45.btn {
46  display: block;
47  width: 30%;
48  text-align: right;
49}
50
51#navigation {
52  width: 44%;
53  padding: 25px 0 20px;
54}
55
56#navigation ul {
57  margin: 15px 0 0;
58}
59
60#navigation ul li {
61  float: none;
62}
63
64#navigation ul ul {
65  display: block;
66  padding-left: 1.12em;
67}
68
69#navigation ul ul li {
70  margin: 0;
71}
72
73}
74
75</style>
76
77</head>
78
79<body class="hamburger-page">
80<div class="wrap">
81<h1 class="logo"><a href="/">Site Name</a></h1>
82<!-- メニューボタン -->
83<p class="btn"><a href="#menu-btn">&#x2630;</a></p>
84<!-- ナビゲーションメニュー -->
85<nav id="navigation">
86<ul>
87<li><a href="#">hoge1</a>
88<ul>
89<li><a href="#">fuga1</a></li>
90<li><a href="#">fuga2</a></li>
91</ul>
92</li>
93<li><a href="#">hoge2</a>
94<ul>
95<li><a href="#">fuga1</a></li>
96</ul>
97</li>
98<li><a href="#">hoge3</a></li>
99<li><a href="#">hoge4</a>
100<ul>
101<li><a href="#">fuga1</a></li>
102<li><a href="#">fuga2</a></li>
103<li><a href="#">fuga3</a></li>
104</ul>
105</li>
106</ul>
107</nav>
108<!-- メインコンテンツ -->
109<main id="main">
110<p>メイン<a href="#">リンク</a></p>
111</main>
112</div>
113
114
115		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
116		<script>
117$(window).on('load resize', function(){
118if ($(window).width() <= 1151) { //ウインドウサイズが1151px以下ならば
119
120$('#navigation li:last a').on('keydown', function(e) {
121  if (e.keyCode === 9) {
122    if (!e.shiftKey) {
123      e.preventDefault();
124      $('[href="#menu-btn"]').focus();
125    }
126  }
127});
128
129$('#navigation li:first a').on('keydown', function(e) {
130  if (e.keyCode === 9) {
131    if (e.shiftKey) {
132      e.preventDefault();
133      $('[href="#menu-btn"]').focus();
134    }
135  }
136});
137
138} else {
139
140$('#navigation li:last a').on('keydown', function(e) {
141  if (e.keyCode === 9) {
142    if (!e.shiftKey) {
143      $(this).blur();
144    }
145  }
146});
147
148
149$('#navigation li:first a').on('keydown', function(e) {
150  if (e.keyCode === 9) {
151    if (e.shiftKey) {
152      e.preventDefault();
153      $('.logo a').focus();
154    }
155  }
156});
157
158
159}
160});
161
162</script>
163</body>
164</html>

x_x

2018/04/25 03:10

CSSがないとメニューが再現されませんので追記願います。

退会済みユーザー

2018/04/25 07:09 編集

再現出来るよう記入していなくてすみませんでした。問題の4はこの記述では再現しなかったので、ドロップダウンメニューが原因だとわかりました。追記しましたので、ご教示のほどよろしくお願いします。

x_x

2018/04/26 03:18

再現しないですね(メニューが)

x_x

2018/04/26 03:22

見てみてください https://jsfiddle.net/s10bc1r9/

退会済みユーザー

2018/04/26 08:16 編集

見ていただき、ありがとうございます。この状態でも提示している問題点は再現出来ているので(メニューは開いた時の状態でフォーカスがメニューボタンに当たれば良いので)メニューの開閉の実装まで記載しておりませんでした。メニューが開いた時とそうでない時どうフォーカスするかの記述があるからメニューが開閉するための記述も入りますよねぇ。わかっていなくてすみませんでした。お手数おかけしてすみませんが、追記しましたのでご教示のほどよろしくお願いします。

x_x

2018/04/26 08:52

https://jsfiddle.net/s10bc1r9/1/

x_x

2018/04/26 08:53

なぜかしょっちゅうコメントが消えるので断片的になってしまってすみません。まず、1が再現しません(フォーカスは移動しない)

退会済みユーザー

2018/04/26 09:13 編集

ナビボタンをクリック又はフォーカス時にEnterを押すとナビゲーションが表示されTabキーで移動するとちゃんとhoge1の2階層目のfuga2にフォーカスされ1の問題が再現されています。今気づいたのですが、自動で移動すると勘違いされるような説明になっていたのですね。説明不足ですみませんでした。

x_x

2018/04/26 09:12

三をクリックしても、フォーカスは三にあるままではないですか？

退会済みユーザー

2018/04/26 09:17

三をクリックした後、Tabキーを押すとhoge1の2階層目のfuga2にフォーカスがちゃんと移動します。

x_x

2018/04/26 09:20

1.は、メニユーが開いた時にフォーカスが移動することを言っていますが違うのでしょうか？

退会済みユーザー

2018/04/26 09:26

はい。メニーが開いた時Tabキーを押すとhoge1の2階層目のfuga2にフォーカスしてしまい、hoge1にフォーカスしません。

x_x

2018/04/26 09:33

再現しないし、フォーカスを移動する意味も分からない感じになっていませんか？ https://jsfiddle.net/s10bc1r9/1/ は見ているでしょうか？

退会済みユーザー

2018/04/26 10:23 編集

はい。見せてもらってコメントしています。大きい画面幅からドロワーメニューのサイズにして確認してました。その時は再現するのですが、おっしゃる通りドロワーメニューのサイズから表示するとフォーカス制御がきいていないです。申し訳ありませんでした。再現する事確認して記載しているのですが、再度自分のコード確認してお返事いたします。

退会済みユーザー

2018/04/26 10:39 編集

Edit fiddle - JSFiddleでなぜ再現しないのかわかりませんので、すべて一緒に書いたコード追記しました。こちらのコードで再現する事自己確認しておりますので、お手数ですがこちらでご確認いたたけますでしょうか？よろしくお願いいたします。

退会済みユーザー

2018/04/26 11:40 編集

JSFiddleのコードと自分の書いたコードの差分を調べてみたところ、JSFiddleのコードには私の記述したコードの前に　$(window).on('load', function() { が付いており、これを削除しJavaScriptを</body>の前に移動させたところ私のコードと同じように問題を再現出来ました。使用されている場所が使えなくてすみませんが、ご教示のほどよろしくお願いします。

x_x

2018/04/27 02:19

ありがとうございます。再現するようになりましたが、やはりなぜフォーカスを制御しなければいけないのかが見えてきません。現状では、「ウインドウサイズが1151px以下ならば」コメント以降をバッサリ削除すれば解決するとしか言えません

退会済みユーザー

2018/04/27 03:40

制御する理由を述べれば問題の解決策をご教示いただけるのでしょうか？1151px以下でのフォーカス制御を前提に質問させていただいておりますので、削除するというのは残念ながら解決策になりません。貴重なお時間この件で費やしていただきありがとうございました。

退会済みユーザー

2018/04/27 03:41

どなたかこの実装の問題を解消する修正方法お分かりのかたいらっしゃいましたらご教示よろしくお願いします。

x_x

2018/04/27 04:13

なぜ、制御しなくてもいい(思っている通りの動きをする)のを、わざわざ制御して「おかしい」と言っているのかわからないということです。ここがわからない限り、誰もが同じ回答になるのではないでしょうか？