Fix tabs (#244)

Author: angieradtke

src/js/tab/tab.js

@@ -150,8 +150,13 @@ class TabsElement extends HTMLElement {
       tabButton.setAttribute('aria-controls', tab.id);
       tabButton.setAttribute('role', 'tab');
       tabButton.setAttribute('type', 'button');
-      tabButton.setAttribute('tabindex', 0);
+      tabButton.setAttribute('tabindex', -1);
       tabButton.innerHTML = `${tab.getAttribute('name')}`;
+
+      if (tab.hasAttribute('active')) {
+        tabButton.setAttribute('tabindex', 0);
+      }
+
       this.tabButtonContainer.appendChild(tabButton);
 
       tabButton.addEventListener('click', this.activateTab);

src/scss/tab/tab.scss

@@ -49,7 +49,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, .03);
   background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .05) 100%);
   border-right: 0 none;
@@ -59,7 +60,9 @@ joomla-tab button[role=tab][aria-expanded="true"] {
   box-shadow: 2px 0 1px -1px rgba(0, 0, 0, .08) inset, -2px 0 1px -1px rgba(0, 0, 0, .08) inset, 0 1px 0 rgba(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;