[BUGFIX] fix language menu select focus bug accessibility

t3kit · Jan 31, 2019 · c008996 · c008996
1 parent fd5d67b
commit c008996
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 15 deletions.
diff --git 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
@@ -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>
+</f:section>
diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {