From 67a349524319f1fa6bdd3a4d1f9c941b5c1aa9df Mon Sep 17 00:00:00 2001
From: Naofumi Kagami <naofumi@mac.com>
Date: Wed, 4 Sep 2024 17:20:46 +0900
Subject: [PATCH] comments and refactoring

---
 .../controllers/dropdown_controller.js        | 12 ++++++------
 .../controllers/tablist_controller.js         | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/javascript/controllers/dropdown_controller.js b/app/javascript/controllers/dropdown_controller.js
index b5e8faa..6f17ff7 100644
--- a/app/javascript/controllers/dropdown_controller.js
+++ b/app/javascript/controllers/dropdown_controller.js
@@ -41,25 +41,25 @@ export default class DropdownController extends Controller {
 
   show() {
     this.menuTargets.forEach(target => {
-      target.classList.remove(...this.#hideClasses())
-      target.classList.add(...this.#showClasses())
+      target.classList.remove(...this.#hideClassesWithDefaults())
+      target.classList.add(...this.#showClassesWithDefaults())
     })
   }
 
   hide() {
     this.menuTargets.forEach(target => {
-      target.classList.remove(...this.#showClasses())
-      target.classList.add(...this.#hideClasses())
+      target.classList.remove(...this.#showClassesWithDefaults())
+      target.classList.add(...this.#hideClassesWithDefaults())
     })
   }
 
-  #showClasses() {
+  #showClassesWithDefaults() {
     return this.showClasses.length
            ? this.showClasses
            : DefaultShowClasses
   }
 
-  #hideClasses() {
+  #hideClassesWithDefaults() {
     return this.hideClasses.length
            ? this.hideClasses
            : DefaultHideClasses
diff --git a/app/javascript/controllers/tablist_controller.js b/app/javascript/controllers/tablist_controller.js
index 445679a..7c46ef1 100644
--- a/app/javascript/controllers/tablist_controller.js
+++ b/app/javascript/controllers/tablist_controller.js
@@ -1,3 +1,22 @@
+/*
+* # Tablist
+*
+* Use this to select a tab within a tablist.
+* This implementation specifies the currently selected tab
+* using the `aria-current` attribute. This may not be appropriate
+* if the tab is small and the contents do not represent a full-page.
+* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
+*
+* With MPA/TurboDrive/TurboFrames, it is common to simply select the
+* current tab on the new page rendered on the server, without providing
+* immediate feedback to the user other than the CSS `:active`
+* pseudo-selector. The current approach, however, provides feedback
+* to the user immediately after the tab is clicked. This may or
+* may not be preferable, depending on server latency and other UI
+* elements.
+*
+* */
+
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="tablist"