more improvements

Author: jrlarano

lib/kits/core-ui/components/common/header.ts

@@ -17,7 +17,7 @@ const defaultTemplate = `\
         <div class="sgn__nav">
             <div class="sgn__nav-content" data-show-labels="{{showHeaderLabels}}">
             {{^disableClose}}
-                <button class="sgn__close-publication">
+                <button class="sgn__close-publication" aria-label="{{translations.close}}">
                     <svg
                         aria-hidden="true"
                         class="sgn-header-icon-svg sgn-header-icon-svg-close"
@@ -36,7 +36,7 @@ const defaultTemplate = `\
                 </button>
             {{/disableClose}}
             {{^disableShoppingList}}
-                <button class="sgn__offer-shopping">
+                <button class="sgn__offer-shopping" aria-label="{{translations.shoppingList}}">
                     <svg
                         aria-hidden="true"
                         class="sgn-header-icon-svg"
@@ -57,7 +57,7 @@ const defaultTemplate = `\
                 </button>
             {{/disableShoppingList}}
             {{^disableMenu}}
-                <button class="sgn__nav-menu-btn">
+                <button class="sgn__nav-menu-btn" aria-label="{{translations.overview}}">
                     <svg
                         aria-hidden="true"
                         class="sgn-header-icon-svg sgn-header-icon-svg-close"
@@ -120,7 +120,7 @@ const sidebarTemplate = `\
         <div class="sgn__nav">
             <div class="sgn__nav-content" data-show-labels="{{showHeaderLabels}}">
             {{^disableClose}}
-                <button class="sgn__close-publication">
+                <button class="sgn__close-publication" aria-label="{{translations.close}}">
                     <svg
                         aria-hidden="true"
                         class="sgn-header-icon-svg sgn-header-icon-svg-close"
@@ -139,7 +139,7 @@ const sidebarTemplate = `\
                 </button>
             {{/disableClose}}
             {{^disableShoppingList}}
-                <button class="sgn__offer-shopping">
+                <button class="sgn__offer-shopping" aria-label="{{translations.shoppingList}}">
                     <svg
                         aria-hidden="true"
                         class="sgn-header-icon-svg"
@@ -160,7 +160,7 @@ const sidebarTemplate = `\
                 </button>
             {{/disableShoppingList}}
             {{^disableMenu}}
-                <button class="sgn__nav-menu-btn">
+                <button class="sgn__nav-menu-btn" aria-label="{{translations.overview}}">
                     <svg
                         aria-hidden="true"
                         class="sgn-header-icon-svg sgn-header-icon-svg-close"

lib/kits/core-ui/components/paged-publication/main-container.ts

@@ -9,25 +9,9 @@ const defaultTemplate = `\
             <div class="verso__scroller">
                 <div class="sgn-pp__pages"></div>
             </div>
-        </div><div class="sgn__header-container"></div>
+        </div>
+        
         
-        {{#enableSidebar}}
-        <div class="sgn__menu-sidebar-container"></div>
-        {{/enableSidebar}}
-
-        {{#disableHeader}}
-            <div class="sgn-pp__progress">
-                <div class="sgn-pp-progress__bar"></div>
-            </div>
-            <div class="sgn-pp__progress-label"></div>
-        {{/disableHeader}}
-        <button
-            class="sgn-pp__control"
-            data-direction="prev"
-            aria-label="Previous page"
-        >
-            &lsaquo;
-        </button>
         <button
             class="sgn-pp__control"
             data-direction="next"
@@ -37,19 +21,38 @@ const defaultTemplate = `\
         </button>
         <button
             class="sgn-pp__control sgn-pp--hidden"
-            data-direction="first"
-            aria-label="First page"
+            data-direction="last"
+            aria-label="Last page"
         >
-            &laquo;
+            &raquo;
+        </button>   
+        <button
+            class="sgn-pp__control"
+            data-direction="prev"
+            aria-label="Previous page"
+        >
+            &lsaquo;
         </button>
         <button
             class="sgn-pp__control sgn-pp--hidden"
-            data-direction="last"
-            aria-label="Last page"
+            data-direction="first"
+            aria-label="First page"
         >
-            &raquo;
+            &laquo;
         </button>
         <div class="sgn-page_decorations"></div>
+        <div class="sgn__header-container"></div>
+        
+        {{#enableSidebar}}
+        <div class="sgn__menu-sidebar-container"></div>
+        {{/enableSidebar}}
+
+        {{#disableHeader}}
+            <div class="sgn-pp__progress">
+                <div class="sgn-pp-progress__bar"></div>
+            </div>
+            <div class="sgn-pp__progress-label"></div>
+        {{/disableHeader}}
     </div>\
 `;