Ticket #5389 - Accessibility: Navigable - Bypass blocks. Point 2.

modules/boonex/english/data/langs/system/en.xml

@@ -3971,7 +3971,8 @@ If it is not enabled then please consider implement this optimization, since it
     <string name="_sys_search_placeholder"><![CDATA[Search...]]></string>
     <string name="_sys_search_or_ask_placeholder"><![CDATA[Search or ask...]]></string>
     <string name="_sys_show_less"><![CDATA[Show less]]></string>    
-    <string name="_sys_show_more"><![CDATA[Show more]]></string>    
+    <string name="_sys_show_more"><![CDATA[Show more]]></string>
+    <string name="_sys_skip_to_main_conten"><![CDATA[Skip to main content]]></string>
     <string name="_sys_spam_detected"><![CDATA[Your activity triggered automated block]]></string>
     <string name="_sys_spam_detected_contact"><![CDATA[Your activity triggered automated block, please contact us to investigate: {0}]]></string>
     <string name="_sys_splash_btn_start"><![CDATA[Start]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -3906,6 +3906,7 @@
     <string name="_sys_search_or_ask_placeholder"><![CDATA[Поиск или вопрос...]]></string>
     <string name="_sys_show_less"><![CDATA[Показать меньше]]></string>
     <string name="_sys_show_more"><![CDATA[Показать ещё]]></string>
+    <string name="_sys_skip_to_main_conten"><![CDATA[Перейти к основному содержимому]]></string>
     <string name="_sys_spam_detected"><![CDATA[Ваше действие привело к блокировке]]></string>
     <string name="_sys_spam_detected_contact"><![CDATA[Ваше действие привело к блокировке, сзяжитесь с нами для проверки происходящего: {0}]]></string>
     <string name="_sys_splash_btn_start"><![CDATA[Начало]]></string>

template/_header.html

@@ -34,10 +34,9 @@
     <bx_include_auto:_header_meta.html />
 </head>
 <body class="__class_name__ bx-def-font bx-def-color-bg-page bx-def-image-bg-page <bx_injection:injection_body_class />" dir="__lang_direction__" <bx_injection:injection_body /> >
+    <a href="#bx-content-main" class="bx-skip-link bx-def-z-index-overlay"><bx_text:_sys_skip_to_main_conten /></a>
     __system_injection_header__
     <bx_injection:injection_header />
     <noscript>
-         <div class="p-4 rounded-sm text-center text-red-600 bg-yellow-500 bg-opacity-50">
-            __system_js_requred__
-       </div>
+        <div class="p-4 rounded-sm text-center text-red-600 bg-yellow-500 bg-opacity-50">__system_js_requred__</div>
     </noscript>

template/css/tailwind.css

@@ -28,6 +28,14 @@
 
 
     /* Defaults */
+    .bx-skip-link {
+        @apply absolute -top-16 focus:top-0 m-2 px-4 py-2;
+        @apply border border-gray-200 dark:border-gray-700;
+        @apply bg-gray-200/80 dark:bg-gray-800/80;
+        @apply text-gray-800 dark:text-gray-200 font-medium;
+        @apply rounded;
+    }
+
     .bx-def-vanilla-html {
         @apply prose dark:prose-invert;
         @apply prose-a:text-blue-500 prose-a:font-medium prose-a:no-underline hover:prose-a:underline visited:prose-a:text-purple-500;