astro-accelerator 0.3.6 → 0.3.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.6",
+  "version": "0.3.7",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/js/modules/nav-mobile.js

@@ -16,7 +16,7 @@ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus
  * @param {string} resizedEventName
  */
 function addMobileNav(resizedEventName) {
-    const icons = qsa('[data-navigationid');
+    const icons = qsa('[data-navigationid]');
     for (let icon of icons) {
         addMobileNavigation(icon, resizedEventName);
     }
@@ -37,7 +37,7 @@ function addMobileNav(resizedEventName) {
  */
  function addMobileNavigation(icon, resizedEventName) {
     icon.tabIndex = 0;
-    const navigationSelector = icon.dataset.navigationid;
+    const navigationSelector = icon.dataset.navigationid || '';
     const iconType = icon.firstElementChild && icon.firstElementChild.tagName == 'svg'
         ? 'svg'
         : 'element';
@@ -46,6 +46,9 @@ function addMobileNav(resizedEventName) {
     const overlay = document.createElement('div');
     const dataOpen = 'data-open';
 
+    icon.setAttribute('aria-expanded', 'false');
+    icon.setAttribute('aria-controls', navigationSelector);
+
     // Focus trap (forwards the tab / shift-tab back to the menu)
     icon.addEventListener('keydown', function(e) { 
         if (icon.getAttribute(dataOpen) === dataOpen) {
@@ -86,6 +89,7 @@ function addMobileNav(resizedEventName) {
         overlay.innerHTML = menuElement.outerHTML;
         overlay.className = 'overlay overlay-menu';
         overlay.style.display = 'block';
+        menuElement.style.display = 'none';
 
         qsa('[id]', overlay).forEach((elem) => {
             elem.id = 'overlay__' + elem.id
@@ -119,10 +123,13 @@ function addMobileNav(resizedEventName) {
 
         document.body.appendChild(overlay);
         icon.setAttribute(dataOpen, dataOpen);
+        icon.setAttribute('aria-expanded', 'true');
         focusElements.first.focus();
     }
 
     function closeMobileMenu() {
+        const menuElement = qs('#' + navigationSelector);
+        menuElement.style.display = 'initial';
         document.body.style.overflow = 'auto';
         document.documentElement.style.paddingInlineEnd = '0';
 
@@ -134,6 +141,7 @@ function addMobileNav(resizedEventName) {
 
         icon.innerHTML = originalIcon;
         icon.removeAttribute(dataOpen);
+        icon.setAttribute('aria-expanded', 'false');
     }
 
     icon.addEventListener('click', function (e) {

package/public/js/modules/search-dialog.js

@@ -13,7 +13,7 @@ function enhanceSearchIcon() {
                     const form = doc.querySelector('#site-search');
                     const input = form.querySelector('#site-search-query');
                     const results = doc.querySelector('#site-search-results');
-
+                    icon.setAttribute('aria-expanded', 'false');
                     
                     input?.setAttribute('autofocus', 'autofocus');
 
@@ -26,8 +26,7 @@ function enhanceSearchIcon() {
                     <line x1="18" y1="6" x2="6" y2="18"></line>
                     <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>`;
-                    close.addEventListener('click', () => dialog.close());
-
+                    
                     const script = doc.querySelector('script[src*="/search.js"]');
                     const scr = document.createElement('script');
                     for (let att, i = 0, atts = script.attributes, n = atts.length; i < n; i++){
@@ -45,8 +44,12 @@ function enhanceSearchIcon() {
                     icon.addEventListener('click', (e) => {
                         e.preventDefault();
                         dialog.showModal();
+                        icon.setAttribute('aria-expanded', 'true');
                         return false;
-                    })
+                    });
+
+                    close.addEventListener('click', () => dialog.close());
+                    dialog.addEventListener('close', () => icon.setAttribute('aria-expanded', 'false'));
                 });
         }
     }

package/src/themes/accelerator/components/Header.astro

@@ -25,7 +25,7 @@ const search = accelerator.posts.all().filter(PostFiltering.isSearch).shift() ??
 stats.stop();
 ---
 <header class="site-header">
-  <a href="#site-nav" data-navigationid="site-nav" class="navigation-icon" title={ _(Translations.header.open_menu) }><svg xmlns="http://www.w3.org/2000/svg" 
+  <a href="#site-nav" data-navigationid="site-nav" class="navigation-icon" title={ _(Translations.header.toggle_menu) }><svg xmlns="http://www.w3.org/2000/svg" 
     width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" 
     fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
@@ -35,7 +35,7 @@ stats.stop();
   </svg></a>
   <a href={ (SITE.subfolder ?? '') + '/' } class="site-title" translate="no">{ SITE.title }</a>
   {search != null &&
-  <a href={ accelerator.urlFormatter.formatAddress(search.url) } class="search-icon" title={ _(Translations.header.open_search) }><svg xmlns="http://www.w3.org/2000/svg" 
+  <a href={ accelerator.urlFormatter.formatAddress(search.url) } class="search-icon" title={ _(Translations.header.toggle_search) }><svg xmlns="http://www.w3.org/2000/svg" 
     width="40" height="40" viewBox="0 0 24 24" stroke-width="1" 
     fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>

package/src/themes/accelerator/layouts/Default.astro

@@ -51,7 +51,6 @@ stats.stop();
         <Header frontmatter={ frontmatter } headings={ headings } lang={ lang } />
         <Breadcrumbs frontmatter={ frontmatter } headings={ headings } lang={ lang } breadcrumbs={ breadcrumbs } />
         <div class="content-group">
-            <Navigation lang={ lang } />
             <main id="site-main">
                 <article itemscope itemtype="https://schema.org/Article">
                     <header>
@@ -70,6 +69,7 @@ stats.stop();
                     </div>
                 </article>
             </main>
+            <Navigation lang={ lang } />
         </div>
         <Footer frontmatter={ frontmatter } headings={ headings } lang={ lang }>
             <Copyright frontmatter={ frontmatter } headings={ headings } lang={ lang } />

package/src/themes/accelerator/utilities/language.json

@@ -4,7 +4,7 @@
             "en": "Breadcrumb"
         },
         "site_navigation": {
-            "en": "Site Navigation"
+            "en": "Site"
         },
         "toc": {
             "en": "Table of contents"
@@ -34,11 +34,11 @@
         }
     },
     "header": {
-      "open_menu": {
-          "en": "Open menu"
+      "toggle_menu": {
+          "en": "Toggle menu"
       },
-      "open_search": {
-          "en": "Open site search"
+      "toggle_search": {
+          "en": "Toggle site search"
       }
     },
     "navigation": {