Compile

Author: HLeithner

dist/css/joomla-tab.css

@@ -39,7 +39,8 @@ joomla-tab button[role=tab] {
           appearance: none;
 }
 
-joomla-tab button[role=tab][aria-expanded=true] {
+joomla-tab button[role=tab][aria-expanded=true],
+joomla-tab button[role=tab][aria-selected=true] {
   background-color: rgba(0, 0, 0, 0.03);
   background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
   border-right: 0 none;
@@ -49,7 +50,8 @@ joomla-tab button[role=tab][aria-expanded=true] {
   box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, -2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.02) inset;
 }
 
-joomla-tab button[aria-expanded=true]::after {
+joomla-tab button[aria-expanded=true]::after,
+joomla-tab button[aria-selected=true]::after {
   position: absolute;
   right: 0;
   bottom: -1px;

dist/css/joomla-tab.min.css

@@ -206,8 +206,11 @@ var TabsElement = /*#__PURE__*/function (_HTMLElement2) {
         tabButton.setAttribute('aria-controls', tab.id);
         tabButton.setAttribute('role', 'tab');
         tabButton.setAttribute('type', 'button');
-        tabButton.setAttribute('tabindex', 0);
+        tabButton.setAttribute('tabindex', -1);
         tabButton.innerHTML = "".concat(tab.getAttribute('name'));
+        if (tab.hasAttribute('active')) {
+          tabButton.setAttribute('tabindex', 0);
+        }
         _this4.tabButtonContainer.appendChild(tabButton);
         tabButton.addEventListener('click', _this4.activateTab);
         if (_this4.view === 'tabs') {
@@ -386,7 +389,7 @@ var TabsElement = /*#__PURE__*/function (_HTMLElement2) {
     value: function createNavs(tab) {
       if (tab instanceof Element && tab.tagName.toLowerCase() !== 'joomla-tab-element' || ![].some.call(this.children, function (el) {
         return el === tab;
-      }).length || !tab.getAttribute('name') || !tab.getAttribute('id')) return;
+      }) || !tab.getAttribute('name') || !tab.getAttribute('id')) return;
       var tabs = [].slice.call(this.children).filter(function (el) {
         return el.tagName.toLowerCase() === 'joomla-tab-element';
       });
@@ -447,7 +450,7 @@ var TabsElement = /*#__PURE__*/function (_HTMLElement2) {
     value: function removeNavs(tab) {
       if (tab instanceof Element && tab.tagName.toLowerCase() !== 'joomla-tab-element' || ![].some.call(this.children, function (el) {
         return el === tab;
-      }).length || !tab.getAttribute('name') || !tab.getAttribute('id')) return;
+      }) || !tab.getAttribute('name') || !tab.getAttribute('id')) return;
       var accordionButton = tab.previousSilbingElement;
       if (accordionButton && accordionButton.tagName.toLowerCase() === 'button') {
         accordionButton.removeEventListener('click', this.keyBehaviour);