Merge pull request #10

[Guess The Word Game] `Tabs` restructure

Author: Hdoc1509

vanilla/guess-the-word/components/info/HintsContent.ejs

@@ -10,15 +10,15 @@
       <div id="hints-tab-nav" class="tab-nav" role="tablist">
         <!-- prettier-ignore -->
         <% for (const tab of hintsTabs) { %>
-        <%- include("tabs/TabNavTrigger", { ...tab, contentName: "hints" }) %>
+        <%- include("tabs/Tab", { ...tab, group: "hints" }) %>
         <% } %>
       </div>
     </nav>
   </header>
   <div id="hints-tab-content" class="tab-content">
     <!-- prettier-ignore -->
     <% for (const tab of hintsTabs) { %>
-    <%- include("tabs/TabContentItem", { ...tab, navName: "hints" }) %>
+    <%- include("tabs/TabContentItem", { ...tab, group: "hints" }) %>
     <ul class="hints-list"></ul>
     <%- include("tabs/TabContentItem", { close: true }) %>
     <% } %>

vanilla/guess-the-word/components/menu/AppMenu.ejs

@@ -10,7 +10,7 @@
       <div id="menu-tab-nav" class="tab-nav" role="tablist">
         <!-- prettier-ignore -->
         <% for (const tab of menuTabs) { %>
-        <%- include("tabs/TabNavTrigger", { ...tab, contentName: "menu" }) %>
+        <%- include("tabs/Tab", { ...tab, group: "menu" }) %>
         <% } %>
       </div>
     </nav>

vanilla/guess-the-word/components/tabs/Tab.ejs

@@ -0,0 +1,10 @@
+<button
+  id="<%= name %>-<%= group %>-tab"
+  class="tab-nav__tab"
+  role="tab"
+  aria-controls="<%= name %>-<%= group %>-tab-content"
+  aria-selected="<%= locals.selected ?? false %>"
+>
+  <%- include(`icon/${icon}`) %>
+  <%= capitalize(name) %>
+</button>

vanilla/guess-the-word/components/tabs/TabContentItem.ejs

@@ -1,9 +1,9 @@
 <% if (!(locals.close ?? false)) { %>
 <div
-  id="<%= name %>-<%= navName %>-tab-content"
+  id="<%= name %>-<%= group %>-tab-content"
   class="tab-content__item"
   role="tabpanel"
-  aria-labelledby="<%= name %>-<%= navName %>-tab"
+  aria-labelledby="<%= name %>-<%= group %>-tab"
   ejs="<% if (locals.selected ?? false) { %>"
   data-active
   ejs="<% } %>"

vanilla/guess-the-word/components/tabs/TabNavTrigger.ejs

@@ -35,7 +35,7 @@ export function setupClickListeners() {
     else if ($target === $showDifficulties) {
       $menu.showModal();
       MenuTabs.selectTab($difficultyTab);
-    } else if (MenuTabs.isTabLink($target)) {
+    } else if (MenuTabs.isTab($target)) {
       if ($target === $definitionsTab)
         DefinitionPages.renderPage(DefinitionPagination.currentPage);
       else if ($target === $statsTab)
@@ -44,7 +44,7 @@ export function setupClickListeners() {
         );
 
       MenuTabs.selectTab($target);
-    } else if (HintsTabs.isTabLink($target)) HintsTabs.selectTab($target);
+    } else if (HintsTabs.isTab($target)) HintsTabs.selectTab($target);
     else if (DefinitionPagination.isTrigger($target))
       DefinitionPagination.handleTrigger($target);
   });

vanilla/guess-the-word/src/events/listeners/click.js

@@ -8,7 +8,7 @@
   padding: 0;
 }
 
-.tab-nav__trigger {
+.tab-nav__tab {
   position: relative;
   display: flex;
   align-items: center;
@@ -31,16 +31,16 @@
 
   --icon-size: 1.25em;
 }
-.tab-nav__trigger[aria-selected="true"] {
+.tab-nav__tab[aria-selected="true"] {
   --tab-item-highlight: var(--secondary);
   --tab-link-font-weight: bold;
   background-color: var(--gray-700-15);
 }
-.tab-nav__trigger[aria-selected="false"] {
+.tab-nav__tab[aria-selected="false"] {
   color: var(--_disabled-hover-color);
 }
-.tab-nav__trigger[aria-selected="false"]:hover,
-.tab-nav__trigger[aria-selected="false"]:focus {
+.tab-nav__tab[aria-selected="false"]:hover,
+.tab-nav__tab[aria-selected="false"]:focus {
   --tab-item-highlight: var(--_disabled-hover-color);
 }
 

vanilla/guess-the-word/src/styles/tabs.css

@@ -1,7 +1,7 @@
 import { getAllElementsBySelector, getElementBySelector } from "@lib/dom";
 
 const CLASSES = Object.freeze({
-  TRIGGER: "tab-nav__trigger",
+  TAB: "tab-nav__tab",
   CONTENT: "tab-content__item",
 });
 
@@ -16,7 +16,7 @@ const ATTRIBUTES = Object.freeze({
 
 // TODO: id must end with `_tab`
 // aria-controls must end with `_tab-content`
-const TAB_VALID_SELECTOR = `.${CLASSES.TRIGGER}[id$="-tab"]`
+const TAB_VALID_SELECTOR = `.${CLASSES.TAB}[id$="-tab"]`
   .concat('[aria-controls$="-tab-content"]')
   .concat('[role="tab"]')
   .concat('[aria-selected]:not([aria-selected=""])');
@@ -71,7 +71,7 @@ export class Tabs {
    * @param {EventTarget | HTMLElement | null} $element
    * @returns {$element is HTMLButtonElement}
    */
-  isTabLink($element) {
+  isTab($element) {
     return (
       $element instanceof HTMLButtonElement && this.#$Content.has($element)
     );
@@ -92,10 +92,8 @@ export class Tabs {
     if ($currentContent == null || $targetContent == null) return;
 
     $currentTab.setAttribute(ATTRIBUTES.TAB.SELECTED, "false");
-    $currentTab.disabled = false;
     $currentContent.removeAttribute(ATTRIBUTES.CONTENT.ACTIVE);
     $targetTab.setAttribute(ATTRIBUTES.TAB.SELECTED, "true");
-    $targetTab.disabled = true;
     $targetTab.scrollIntoView();
     $targetContent.setAttribute(ATTRIBUTES.CONTENT.ACTIVE, "");
 

vanilla/guess-the-word/src/tabs.js

@@ -25,13 +25,12 @@ const createTabs = ({ selectedTab = TABS.FIRST } = {}) => {
     const triggerId = `${tabGroup}_${tab}-tab`;
     const contentId = `${tabGroup}_${tab}-tab-content`;
 
-    $trigger.classList.add("tab-nav__trigger");
+    $trigger.classList.add("tab-nav__tab");
     $trigger.setAttribute("id", triggerId);
     $trigger.setAttribute("aria-controls", contentId);
     $trigger.setAttribute("role", "tab");
     $trigger.setAttribute("aria-selected", `${tab === selectedTab}`);
     $trigger.textContent = `${tab.toUpperCase()} tab`;
-    $trigger.disabled = tab === selectedTab;
 
     $content.classList.add("tab-content__item");
     $content.setAttribute("id", contentId);
@@ -66,7 +65,7 @@ describe("Tabs", () => {
     }
   });
 
-  it("checks tab trigger correctly by using `.isTabLink()` method", () => {
+  it("checks tab trigger correctly by using `.isTab()` method", () => {
     const { $nav, $content } = createTabs();
     const $intruder = document.createElement("button");
     $intruder.classList.add("tab-nav__trigger");
@@ -77,12 +76,12 @@ describe("Tabs", () => {
 
     const TestTabs = new Tabs({ $nav, $content });
 
-    expect(TestTabs.isTabLink($intruder)).toBe(false);
+    expect(TestTabs.isTab($intruder)).toBe(false);
 
     for (const tab of tabNames) {
       const $tab = getByRole($nav, "tab", { name: `${tab.toUpperCase()} tab` });
 
-      expect(TestTabs.isTabLink($tab)).toBe(true);
+      expect(TestTabs.isTab($tab)).toBe(true);
     }
   });
 
@@ -121,11 +120,8 @@ describe("Tabs", () => {
 
       expect(TestTabs.currentTab).toBe($tab);
       expect($selectedTab).toBe($tab);
-      expect($tab.disabled).toBe(true);
-      if ($tab !== $initialSelectedTab) {
+      if ($tab !== $initialSelectedTab)
         expect($initialSelectedTab.getAttribute("aria-selected")).toBe("false");
-        expect($initialSelectedTab.disabled).toBe(false);
-      }
     }
   });