Fix focus for tabs and menu

lazaronixon · Oct 15, 2024 · 4d8d3e7 · 4d8d3e7
1 parent bde0c4d
commit 4d8d3e7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 - Adjust checkbox and radio size
 - Fix tab hover on dark mode
 - Fix menu and command hover on dark mode
-- Adjust menu component
+- Fix focus for tabs and menu
 - Set input--actor icon color
 
 ## [0.0.46] - 2024-10-14

diff --git a/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js b/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
@@ -6,19 +6,23 @@ export default class extends Controller {
 
  indexValueChanged() {
  this.#removeTabstops()
- this.#focusCurrentItem()
  }
 
  prev() {
- this.indexValue > 0 && this.indexValue--
+ const hasPrevious = this.indexValue > 0
+ hasPrevious && this.indexValue--
+ hasPrevious && this.#focusCurrentItem()
  }
 
  next() {
- this.indexValue < this.#lastIndex && this.indexValue++
+ const hasNext = this.indexValue < this.#lastIndex
+ hasNext && this.indexValue++
+ hasNext && this.#focusCurrentItem()
  }
 
  reset() {
  this.indexValue = 0
+ this.#focusCurrentItem()
  }
 
  #removeTabstops() {

diff --git a/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js b/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
@@ -4,21 +4,24 @@ export default class extends Controller {
  static targets = [ "button", "tab" ]
  static values = { index: Number }
 
- indexValueChanged(index, previousIndex) {
+ indexValueChanged() {
  this.#showCurrentTab()
- this.#focusCurrentButton(previousIndex !== undefined)
  }
 
  select({ target }) {
  this.indexValue = this.buttonTargets.indexOf(target)
  }
 
  prev() {
- this.indexValue > 0 && this.indexValue--
+ const hasPrevious = this.indexValue > 0
+ hasPrevious && this.indexValue--
+ hasPrevious && this.#focusCurrentButton()
  }
 
  next() {
- this.indexValue < this.#lastIndex && this.indexValue++
+ const hasNext = this.indexValue < this.#lastIndex
+ hasNext && this.indexValue++
+ hasNext && this.#focusCurrentButton()
  }
 
  #showCurrentTab() {
@@ -32,8 +35,8 @@ export default class extends Controller {
  })
  }
 
- #focusCurrentButton(shouldFocus) {
- shouldFocus && this.buttonTargets[this.indexValue].focus()
+ #focusCurrentButton() {
+ this.buttonTargets[this.indexValue].focus()
  }
 
  get #lastIndex() {