Merge pull request #1138 from vektor-inc/change/access

グローバルナビゲーションがタブキーで子階層も操作できるように調整
vektor-inc · May 15, 2024 · 8f2f871 · 8f2f871
2 parents c626f29 + d5ffae5
commit 8f2f871
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 20 deletions.
diff --git a/_g2/assets/_scss/common.scss b/_g2/assets/_scss/common.scss
@@ -193,3 +193,22 @@ iframe {
 	font-weight: 500;
 }
 /*  ヘッダーロゴの文字の太さを統一 終了  */
+
+/*-------------------------------------------*/
+/*	gMenu
+/*  ※ foundation 部分のテーマ側での上書き用
+/*-------------------------------------------*/
+// タブキー操作対応
+.device-pc .gMenu li {
+	&:focus-within {
+		> .sub-menu {
+			opacity: 1;
+			max-height: 80vh;
+			overflow-y: auto;
+			a:focus-within {
+				color:#fff;
+				background-color: var(--vk-color-primary-vivid);
+			}
+		}
+	}
+}
diff --git a/_g2/assets/css/common.css b/_g2/assets/css/common.css
diff --git a/_g2/assets/css/common_editor.css b/_g2/assets/css/common_editor.css
diff --git a/_g2/design-skin/foundation/_scss/_outer.scss b/_g2/design-skin/foundation/_scss/_outer.scss
@@ -86,7 +86,6 @@ body {
 .screen-reader-text {
 	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

diff --git a/_g3/assets/_scss/_utils.scss b/_g3/assets/_scss/_utils.scss
@@ -1,7 +1,6 @@
 .screen-reader-text {
 	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

diff --git a/_g3/assets/_scss/project/global-nav/_global-nav--design.scss b/_g3/assets/_scss/project/global-nav/_global-nav--design.scss
@@ -108,6 +108,7 @@
 					padding: $menu_padding_vertical $menu_padding_horizontal;
 					border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 					display: block;
+					&:focus-within,
 					&:hover {
 						background-color: var(--vk-color-primary-vivid);
 					}

diff --git a/_g3/assets/_scss/project/global-nav/_global-nav--process--sub-drop.scss b/_g3/assets/_scss/project/global-nav/_global-nav--process--sub-drop.scss
@@ -1,13 +1,5 @@
 @charset "utf-8";
 
-/**** CAUTION ************************
-
-If you want to modify this file,
-If this file included in plugin that, you don't modify this file.
-Original file path is themes/lightning/design-skin/foundation/ that, please modify original files.
-
-*************************************/
-
 /*-------------------------------------------*/
 /*	第二階層マウスホバー展開処理
 /*-------------------------------------------*/
@@ -33,11 +25,14 @@ Original file path is themes/lightning/design-skin/foundation/ that, please modi
 	}
 
 	.device-pc & {
-
-		&:hover > .sub-menu {
-			opacity: 1;
-			max-height: 80vh;
-			overflow-y: auto;
+		&:focus-within,
+		&:hover {
+			> .sub-menu, // 2 layers
+			li:focus-within > .sub-menu { // 3 layers after
+				opacity: 1;
+				max-height: 80vh;
+				overflow-y: auto;
+			}
 		}
 	}
 

diff --git a/_g3/assets/css/style-theme-json.css b/_g3/assets/css/style-theme-json.css
diff --git a/_g3/assets/css/style.css b/_g3/assets/css/style.css
diff --git a/readme.txt b/readme.txt
@@ -37,7 +37,8 @@ https://www.vektor-inc.co.jp/inquiry/
 
 == Changelog ==
 
-[ G3 ][ Design Bug Fix ][ OriginIII ]Fixed text-decoration-color color for parent elements with `has-black-background-color` class or elements with `has-text-color` class.
+[ G3 / G2 ][ Specification Change ] Support navigation operations using the Tab key.
+[ G3 ][ Design Bug Fix ][ OriginIII ] Fixed text-decoration-color color for parent elements with `has-black-background-color` class or elements with `has-text-color` class.
 
 v15.21.1
 [ G3 with theme.json ] Fixed the alignment issue of the title in the post editing screen.