astro-accelerator 0.3.6 → 0.3.8

package/package.json

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

package/public/css/main.css

@@ -1093,14 +1093,14 @@ button[data-share]:focus {
 }
 
 /* Detail tabs */
-  
-.tablist [role="tablist"] {
-    min-width: 100%;
+
+.tab-list {
+    padding-inline: 10px;
 }
 
-.tablist [role="tab"],
-.tablist [role="tab"]:focus,
-.tablist [role="tab"]:hover {
+.tab-list button,
+.tab-list button:focus,
+.tab-list button:hover {
     display: inline-block;
     position: relative;
     z-index: 2;
@@ -1116,7 +1116,7 @@ button[data-share]:focus {
     cursor: pointer;
 }
 
-.tablist [role="tab"][aria-selected="true"] {
+.tab-list button[aria-selected="true"] {
     margin-top: 0;
     border-width: 2px;
     border-top-width: 6px;
@@ -1126,28 +1126,22 @@ button[data-share]:focus {
     background-color: var(--aft);
 }
 
-.tablist [role="tab"][aria-selected="false"] {
+.tab-list button[aria-selected="false"] {
     top: 0px;
 }
 
-.tablist [role="tab"] span.focus {
+.tab-list button span.focus {
     display: inline-block;
     margin: 2px;
     padding: 4px 6px;
     outline: none;
 }
 
-.input-keyboard .tablist [role="tab"]:hover span.focus,
-.input-keyboard .tablist [role="tab"]:focus span.focus,
-.input-keyboard .tablist [role="tab"]:active span.focus {
-    outline: 2px solid var(--fore-link);
-}
-
 [role="tabpanel"] {
     position:relative;
     padding: 1rem;
     border: 2px solid var(--fore-link);
-    border-radius: 0 var(--block-radius) var(--block-radius);
+    border-radius: var(--block-radius);
     background: var(--aft);
     min-height: 10em;
     overflow: auto;

package/public/js/modules/detail-tabs.js

@@ -22,7 +22,7 @@ function enhanceDetailGroups() {
 
         const tablist = document.createElement('div');
         tablist.role = 'tablist';
-        tablist.className = 'tablist';
+        tablist.className = 'tab-list';
         participants[0].parentNode.insertBefore(tablist, participants[0]);
         
         participants.forEach((p, i) => {
@@ -32,6 +32,7 @@ function enhanceDetailGroups() {
             // Create the tab panel
 
             const tabPanel = document.createElement('div');
+            tabPanel.setAttribute('tabindex', '0');
             tabPanel.setAttribute('role', 'tabpanel');
             tabPanel.setAttribute('aria-labelledby', `aatb_${ g }_${ i }`);
             tabPanel.id = `aatb_panel_${ g }_${ i }`;
@@ -122,6 +123,7 @@ class TabsManual {
   
     moveFocusToTab(currentTab) {
       currentTab.focus();
+      this.setSelectedTab(currentTab);
     }
   
     moveFocusToPreviousTab(currentTab) {
@@ -183,8 +185,6 @@ class TabsManual {
       }
     }
   
-    // Since this example uses buttons for the tabs, the click onr also is activated
-    // with the space and enter keys
     onClick(event) {
       this.setSelectedTab(event.currentTarget);
     }

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);
     }
@@ -36,8 +36,7 @@ function addMobileNav(resizedEventName) {
  * @param {string} 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 +45,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 +88,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 +122,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 +140,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": {