comments and refactoring

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

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"