astro-accelerator 0.3.7 → 0.3.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.7",
+  "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

@@ -36,7 +36,6 @@ function addMobileNav(resizedEventName) {
  * @param {string} resizedEventName
  */
  function addMobileNavigation(icon, resizedEventName) {
-    icon.tabIndex = 0;
     const navigationSelector = icon.dataset.navigationid || '';
     const iconType = icon.firstElementChild && icon.firstElementChild.tagName == 'svg'
         ? 'svg'