From c0089964703c95759a91e763198e2654bcf438aa Mon Sep 17 00:00:00 2001
From: dmh <dmytro.hrynevych@gmail.com>
Date: Thu, 31 Jan 2019 16:47:41 +0200
Subject: [PATCH] [BUGFIX] fix language menu select focus bug accessibility

---
 Configuration/TypoScript/Library/lib.menu.top.setupts |  2 +-
 .../FluidStyledContent/LanguageMenuStandard.html      |  4 ++--
 Resources/Public/css/main.css                         | 11 +++++++----
 Resources/Public/css/main.js                          |  3 +++
 Resources/Public/less/main.js                         |  3 +++
 Resources/Public/less/main.less                       | 11 +++++++----
 felayout_t3kit/dev/js/main/header/header.js           |  3 +++
 felayout_t3kit/dev/styles/main/header/header.less     | 11 +++++++----
 8 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/Configuration/TypoScript/Library/lib.menu.top.setupts b/Configuration/TypoScript/Library/lib.menu.top.setupts
index 51082cf8..8474488c 100644
--- a/Configuration/TypoScript/Library/lib.menu.top.setupts
+++ b/Configuration/TypoScript/Library/lib.menu.top.setupts
@@ -1,7 +1,7 @@
 lib.menu.top = HMENU
 lib.menu.top.special = directory
 lib.menu.top.special.value = {$themes.configuration.header.top.menu.containerPid}
-lib.menu.top.stdWrap.dataWrap    = <nav aria-label="{LLL:EXT:theme_t3kit/Resources/Private/Language/locallang.xlf:metaNavigation.ariaLabel}"><ul class="nav"> | </ul></nav>
+lib.menu.top.stdWrap.dataWrap    = <nav aria-label="{LLL:EXT:theme_t3kit/Resources/Private/Language/locallang.xlf:metaNavigation.ariaLabel}"><ul class="nav js__header-top_meta-nav"> | </ul></nav>
 lib.menu.top.1 = TMENU
 lib.menu.top.1 {
     expAll = 1
diff --git a/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html b/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
index 91f6f410..bd9917b5 100644
--- a/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
+++ b/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
@@ -21,7 +21,7 @@
 						<span class="flag-icon flag-icon-{languageFlag}"></span> {language.navigationTitle}
 				</f:spaceless></f:link.page>
 			</f:for>
-			<a class="header-top__language-menu-box-close-btn js__header-top__language-menu-box-close-btn"></a>
+			<button class="header-top__language-menu-box-close-btn js__header-top__language-menu-box-close-btn"></button>
 		</div>
 	</div>
 </f:if>
@@ -42,4 +42,4 @@
 		</f:else>
 	</f:if>
 	{getLanguageFlag}
-</f:section>
\ No newline at end of file
+</f:section>
diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
index 9e0e142a..500344d6 100644
--- a/Resources/Public/css/main.css
+++ b/Resources/Public/css/main.css
@@ -228,10 +228,11 @@
   background: #fff;
   z-index: 4000;
   text-align: right;
-  padding-right: 60px;
+  padding-right: 50px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s 0s, visibility 0s 0.3s;
+  border-bottom: 1px solid #ebf3f6;
 }
 .header-top__language-menu-box-close-btn:after,
 .header-top__language-menu-box-close-btn:before {
@@ -242,7 +243,7 @@
   width: 18px;
   top: 50%;
   margin-top: -1px;
-  right: 10px;
+  right: 15px;
   margin-left: -11px;
   background: #50b4d8;
   -webkit-backface-visibility: hidden;
@@ -289,19 +290,21 @@
   line-height: 50px;
   color: rgba(125, 125, 125, 0.5);
   font-size: 14px;
-  padding: 0 20px;
+  padding: 0 15px;
 }
 .no-touch .header-top__language-menu-btn:hover {
   color: rgba(125, 125, 125, 0.5);
 }
 .header-top__language-menu-box-close-btn {
   display: block;
-  right: 10px;
+  right: 4px;
   top: 0;
   width: 50px;
   height: 50px;
   position: absolute;
   cursor: pointer;
+  border: none;
+  background: transparent;
 }
 .header-top__language-menu-box-item {
   color: #7d7d7d;
diff --git a/Resources/Public/css/main.js b/Resources/Public/css/main.js
index 393dd094..539d2e49 100644
--- a/Resources/Public/css/main.js
+++ b/Resources/Public/css/main.js
@@ -132,6 +132,7 @@ jQuery(function ($) {
   var $languageMenuBtn = $('.js__header-top__language-menu-btn')
   var $languageMenuBox = $('.js__header-top__language-menu-box')
   var $languageMenuBoxCloseBtn = $('.js__header-top__language-menu-box-close-btn')
+  var $metaNavigationNav = $('.js__header-top_meta-nav')
 
   $mainNavigationSearchBtn.on('click', function (e) {
     e.preventDefault()
@@ -151,6 +152,7 @@ jQuery(function ($) {
     e.preventDefault()
     $languageMenuBox.addClass('_language-menu-box-visible')
     $languageMenuOverlay.toggleClass('_language-menu-box-overlay-visible')
+    $metaNavigationNav.addClass('hidden')
   })
   $languageMenuOverlay.on('click', function () {
     $(this).toggleClass('_language-menu-box-overlay-visible')
@@ -159,6 +161,7 @@ jQuery(function ($) {
   $languageMenuBoxCloseBtn.on('click', function () {
     $languageMenuOverlay.toggleClass('_language-menu-box-overlay-visible')
     $languageMenuBox.removeClass('_language-menu-box-visible')
+    $metaNavigationNav.removeClass('hidden')
   })
 })
 
diff --git a/Resources/Public/less/main.js b/Resources/Public/less/main.js
index 393dd094..539d2e49 100644
--- a/Resources/Public/less/main.js
+++ b/Resources/Public/less/main.js
@@ -132,6 +132,7 @@ jQuery(function ($) {
   var $languageMenuBtn = $('.js__header-top__language-menu-btn')
   var $languageMenuBox = $('.js__header-top__language-menu-box')
   var $languageMenuBoxCloseBtn = $('.js__header-top__language-menu-box-close-btn')
+  var $metaNavigationNav = $('.js__header-top_meta-nav')
 
   $mainNavigationSearchBtn.on('click', function (e) {
     e.preventDefault()
@@ -151,6 +152,7 @@ jQuery(function ($) {
     e.preventDefault()
     $languageMenuBox.addClass('_language-menu-box-visible')
     $languageMenuOverlay.toggleClass('_language-menu-box-overlay-visible')
+    $metaNavigationNav.addClass('hidden')
   })
   $languageMenuOverlay.on('click', function () {
     $(this).toggleClass('_language-menu-box-overlay-visible')
@@ -159,6 +161,7 @@ jQuery(function ($) {
   $languageMenuBoxCloseBtn.on('click', function () {
     $languageMenuOverlay.toggleClass('_language-menu-box-overlay-visible')
     $languageMenuBox.removeClass('_language-menu-box-visible')
+    $metaNavigationNav.removeClass('hidden')
   })
 })
 
diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less
index 1ceb622a..a675c5f8 100644
--- a/Resources/Public/less/main.less
+++ b/Resources/Public/less/main.less
@@ -2443,10 +2443,11 @@
     // background-color: @header-info-background;
     z-index: 4000;
     text-align: right;
-    padding-right: 60px;
+    padding-right: 50px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s 0s, visibility 0s 0.3s;
+    border-bottom: 1px solid @border-color;
 }
 
 .header-top__language-menu-box-close-btn:after,
@@ -2458,7 +2459,7 @@
     width: 18px;
     top: 50%;
     margin-top: -1px;
-    right: 10px;
+    right: 15px;
     margin-left: -11px;
     background: @main-color; //@header-top-color;
     -webkit-backface-visibility: hidden;
@@ -2515,7 +2516,7 @@
     line-height: @header-top-height;
     color: @header-top-color;
     font-size: 14px;
-    padding: 0 20px;
+    padding: 0 15px;
 }
 
 .no-touch .header-top__language-menu-btn:hover {
@@ -2525,12 +2526,14 @@
 
 .header-top__language-menu-box-close-btn {
     display: block;
-    right: 10px;
+    right: 4px;
     top: 0;
     width: 50px;
     height: @header-top-height;
     position: absolute;
     cursor: pointer;
+    border: none;
+    background: transparent;
 }
 
 .header-top__language-menu-box-item {
diff --git a/felayout_t3kit/dev/js/main/header/header.js b/felayout_t3kit/dev/js/main/header/header.js
index 7577c2b6..9c645ae4 100644
--- a/felayout_t3kit/dev/js/main/header/header.js
+++ b/felayout_t3kit/dev/js/main/header/header.js
@@ -130,6 +130,7 @@ jQuery(function ($) {
   var $languageMenuBtn = $('.js__header-top__language-menu-btn')
   var $languageMenuBox = $('.js__header-top__language-menu-box')
   var $languageMenuBoxCloseBtn = $('.js__header-top__language-menu-box-close-btn')
+  var $metaNavigationNav = $('.js__header-top_meta-nav')
 
   $mainNavigationSearchBtn.on('click', function (e) {
     e.preventDefault()
@@ -149,6 +150,7 @@ jQuery(function ($) {
     e.preventDefault()
     $languageMenuBox.addClass('_language-menu-box-visible')
     $languageMenuOverlay.toggleClass('_language-menu-box-overlay-visible')
+    $metaNavigationNav.addClass('hidden')
   })
   $languageMenuOverlay.on('click', function () {
     $(this).toggleClass('_language-menu-box-overlay-visible')
@@ -157,5 +159,6 @@ jQuery(function ($) {
   $languageMenuBoxCloseBtn.on('click', function () {
     $languageMenuOverlay.toggleClass('_language-menu-box-overlay-visible')
     $languageMenuBox.removeClass('_language-menu-box-visible')
+    $metaNavigationNav.removeClass('hidden')
   })
 })
diff --git a/felayout_t3kit/dev/styles/main/header/header.less b/felayout_t3kit/dev/styles/main/header/header.less
index cd55e6d0..b5305495 100644
--- a/felayout_t3kit/dev/styles/main/header/header.less
+++ b/felayout_t3kit/dev/styles/main/header/header.less
@@ -145,10 +145,11 @@
     // background-color: @header-info-background;
     z-index: 4000;
     text-align: right;
-    padding-right: 60px;
+    padding-right: 50px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s 0s, visibility 0s 0.3s;
+    border-bottom: 1px solid @border-color;
 }
 
 .header-top__language-menu-box-close-btn:after,
@@ -160,7 +161,7 @@
     width: 18px;
     top: 50%;
     margin-top: -1px;
-    right: 10px;
+    right: 15px;
     margin-left: -11px;
     background: @main-color; //@header-top-color;
     -webkit-backface-visibility: hidden;
@@ -217,7 +218,7 @@
     line-height: @header-top-height;
     color: @header-top-color;
     font-size: 14px;
-    padding: 0 20px;
+    padding: 0 15px;
 }
 
 .no-touch .header-top__language-menu-btn:hover {
@@ -227,12 +228,14 @@
 
 .header-top__language-menu-box-close-btn {
     display: block;
-    right: 10px;
+    right: 4px;
     top: 0;
     width: 50px;
     height: @header-top-height;
     position: absolute;
     cursor: pointer;
+    border: none;
+    background: transparent;
 }
 
 .header-top__language-menu-box-item {