css-zero 0.0.32 → 0.0.33

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1421a60d112863654f94a4b070a0da95043d7cbada5cad2ddf49b115cf61e9ff
-  data.tar.gz: 5faa34fbd968a3ad3197f3782aeb34300ade587897fdec6a21a6e24245bd925c
+  metadata.gz: b786d5d38b248a7289f4dcce1246ddcdffebc21deb4327dc8ac575c1466ba5b9
+  data.tar.gz: 4364538047fdcd11f323687ed346662b334651404bdabf2c125d822c3f96cc3f
 SHA512:
-  metadata.gz: 610498e4c9ca04696ffa786da7498d344e9ef5704a6899bed3d3c75dd29fc88d2205ef59023e1e6fd2f8a82fd05cf91e901ed1ec90e4361519c71be9d0c4516b
-  data.tar.gz: bf00a3e2988209b59a7fac29479bc05150367f7db0659f58c2030c7f1f2bb0b8d8061643bc1dd2845634e812fc3f4c6ae4be883f2920e2ed6ae89cb97517cc4e
+  metadata.gz: a9efa1df9e4643f47ef0dd2cf9d334a02ddfcbfcf1979819acdada8068aefe81c22347180d392151b6d8699ca6022253763cb7438bba59c20fec123f5d7ff0d8
+  data.tar.gz: fd75ca1525671ceb6ffcb24c3fd4291e0f044366999c2958c3fb33c84973fff0ca32e35c509cfce4b7e5ead3218706787fc29763096a1b30ad8c438d281a76ed

data/app/helpers/tabs_helper.rb

@@ -1,5 +1,9 @@
 module TabsHelper
-  def tab_button(content = nil, value:, **, &)
-    tag.button(content, class: "btn", data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
+  def tab_button(content = nil, id:, value:, **, &)
+    tag.button(content, id:, class: "btn", role: "tab", aria: { controls: value }, data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
+  end
+
+  def tab_panel(id, labelled_by:, **, &)
+    tag.div(id:, role: "tabpanel", aria: { labelledby: labelled_by }, data: { tabs_target: "tab" }, **, &)
   end
 end

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.32"
+  VERSION = "0.0.33"
 end

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css

@@ -19,7 +19,7 @@
     inline-size: var(--size-full);
   }
 
-  button[data-selected=true] {
+  button[aria-selected=true] {
     background-color: var(--color-bg);
     color: var(--color-text);
   }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js

@@ -2,24 +2,24 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "button", "tab" ]
-  static values = { selected: String }
+  static values  = { selected: String }
 
   initialize() {
     this.#showSelectedTab()
   }
 
-  select(event) {
-    this.selectedValue = event.target.dataset.value
+  select({ target }) {
+    this.selectedValue = target.dataset.value
     this.#showSelectedTab()
   }
 
   #showSelectedTab() {
     this.buttonTargets.forEach(element => {
-      element.dataset.selected = element.dataset.value === this.selectedValue
+      element.ariaSelected = element.dataset.value === this.selectedValue
     })
 
     this.tabTargets.forEach(element => {
-      element.hidden = element.dataset.value !== this.selectedValue
+      element.hidden = element.id !== this.selectedValue
     })
   }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.32
+  version: 0.0.33
 platform: ruby
 authors:
 - Lázaro Nixon