protos 0.4.3 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7b9c6eb83f7c89f66d1f625fd200b2f6595c098130e16da1fcb6b2e96dd59fe
-  data.tar.gz: 07a7e91d1ef7041dba38b72eb412309d31cf6426ad1e3b157f6a83fab59a32dd
+  metadata.gz: 875e55f36d03988e78d0e6834e840094b089ee1e755c003b6483a07a503bfbf4
+  data.tar.gz: 6b0bdbfc22451928316c73dd931cdeebe3e47cf20c596b3d5318b3145f51b5bc
 SHA512:
-  metadata.gz: 36fa9e7809d68b3d1227814cb7bb23fc44066813de58360486f5c7ffffafb30f58f6cb50309aef8902796ea234dfe3f5dcd46b451673cf77600da5f257840e33
-  data.tar.gz: 8ee74d55eebfaaec0d488809563695bf456229ed8dad466a10b6b5f20c117ed02644ef2a7a9646679a47697cae06eca5e6e50f21a863292d46c9753be4c82939
+  metadata.gz: 62c59568bcf8631d3d9c40de57ddb6b1df2f92183c0e9aa92e8be6b0da7d6e325e440a869eda3f1fd0cb93f651f9db8598a9914cc89b6454a1cda7f5a04517fc
+  data.tar.gz: 2ef45fba8e402133e4345fa91186713dc864e11d737bf3200548340cf7ed3d115e08b406b6d5c98eab8d568d4178b37d1b5e43fa13569dcc873fda6a8f338be9

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 ## [Unreleased]
 
+## [0.5.0] - 2024-08-27
+
+- Fixes all accessibility violations according to Axe Core
+- Reduces responsibility of Tabs to only be a tablist, no tab panels
+- Fixes passing ID to popovers, dropdowns, drawers, etc to not override the
+  input ID
+- Changes trigger on popover to be a button instead of a div
+
 ## [0.4.3] - 2024-08-14
 
 - Removes unneeded auto-loading in Rails which fixes collisions with `protos-markdown`

data/lib/protos/accordion/item.rb

@@ -5,16 +5,16 @@ module Protos
     class Item < Component
       # DOCS: An accorion is just a collapse with radio buttons.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, type: Types::String | Types::Integer
 
       def view_template(&block)
         li(**attrs) do
-          render Collapse.new(theme: collapse_theme) do
-            # form: "" prevents the radio button from being submitted if its
-            # within a form
-            input(type: :radio, name: id, form: "", autocomplete: :off)
-            yield if block
-          end
+          render Collapse.new(
+            theme: collapse_theme,
+            input_id: @input_id.to_s,
+            input_type: :radio,
+            &block
+          )
         end
       end
 

data/lib/protos/accordion.rb

@@ -7,20 +7,30 @@ module Protos
     # to be open at the same time, use the collapse component.
     # https://daisyui.com/components/accordion/
 
-    option :id, default: -> { "collapse-#{SecureRandom.hex(4)}" }
-
     def view_template(&)
       ul(**attrs, &)
     end
 
-    def item(*, **, &) = render Item.new(*, id:, **, &)
+    def item(*, input_id: nil, **, &)
+      self.current_input_id = input_id
+
+      render Item.new(*, input_id: current_input_id, **, &)
+    end
 
     def content(...) = render Collapse::Content.new(...)
 
-    def title(*, **, &) = render Collapse::Title.new(*, id:, **, &)
+    def title(*, **, &)
+      render Collapse::Title.new(*, input_id: current_input_id, **, &)
+    end
 
     private
 
+    attr_reader :current_input_id
+
+    def current_input_id=(value)
+      @current_input_id = value || "collapse-#{SecureRandom.hex(4)}"
+    end
+
     def theme
       {
         container: "join join-vertical"

data/lib/protos/alert/actions.rb

@@ -11,6 +11,12 @@ module Protos
 
       private
 
+      def default_attrs
+        {
+          aria_label: "alert-actions"
+        }
+      end
+
       def theme
         {
           container: "flex gap-xs items-center"

data/lib/protos/breadcrumbs.rb

@@ -15,6 +15,12 @@ module Protos
 
     private
 
+    def default_attrs
+      {
+        aria_label: "breadcrumbs"
+      }
+    end
+
     def theme
       {
         container: "breadcrumbs"

data/lib/protos/collapse/title.rb

@@ -5,14 +5,15 @@ module Protos
     class Title < Component
       # DOCS: The title of a collapse. This is the content that is always
       # visible and is used to toggle the collapse.
-      option :id,
-             type: Types::Coercible::String,
+
+      option :input_id,
+             type: Types::String | Types::Integer | Types::Nil,
              reader: false,
-             default: -> { "" }
+             default: -> { }
 
       def view_template(&)
-        if @id.size.positive?
-          label(for: @id, **attrs, &)
+        if @input_id
+          label(for: @input_id.to_s, **attrs, &)
         else
           div(**attrs, &)
         end

data/lib/protos/collapse.rb

@@ -6,19 +6,30 @@ module Protos
     # is visible at all times, and the content is only visible when expanded.
     # https://daisyui.com/components/collapse/
 
-    option :checkbox, default: -> { false }, type: Types::Bool, reader: false
-    option :id,
+    option :input_type, default: -> { :checkbox }, reader: false
+    option :input_id,
+           reader: false,
            default: -> { "collapse-#{SecureRandom.hex(4)}" },
            type: Types::String
 
     def view_template
       div(**attrs) do
-        input(type: "checkbox", id:, autocomplete: :off) if @checkbox
+        if @input_type
+          input(
+            type: @input_type,
+            id: @input_id,
+            name: @input_id,
+            autocomplete: :off,
+            # form: "" prevents the radio button from being submitted if its
+            # within a form
+            form: ""
+          )
+        end
         yield if block_given?
       end
     end
 
-    def title(*, **, &) = render Title.new(*, id:, **, &)
+    def title(*, **, &) = render Title.new(*, input_id: @input_id, **, &)
 
     def content(...) = render Content.new(...)
 

data/lib/protos/command/input.rb

@@ -12,7 +12,7 @@ module Protos
              }
 
       def view_template(&block)
-        div(**attrs) do
+        li(**attrs) do
           label(class: css[:label]) do
             div(class: css[:icon], &block) if block
             input(

data/lib/protos/command/title.rb

@@ -7,7 +7,7 @@ module Protos
       # inside a Protos::Command::Group component.
 
       def view_template(&)
-        h2(**attrs, &)
+        li { h2(**attrs, &) }
       end
 
       private

data/lib/protos/drawer/side.rb

@@ -6,11 +6,15 @@ module Protos
       # DOCS: The content that will be shown when you open the drawer using the
       # trigger. This would be hidden until triggered.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, reader: false, type: Types::String
 
       def view_template
         aside(**attrs) do
-          label(for: id, aria_label: "close sidebar", class: css[:toggle])
+          label(
+            for: @input_id,
+            aria_label: "close sidebar",
+            class: css[:toggle]
+          )
           yield if block_given?
         end
       end

data/lib/protos/drawer/trigger.rb

@@ -6,10 +6,10 @@ module Protos
       # DOCS: The trigger for a drawer. When this is clicked the side will open
       # and overlap the main content with a darker overlay.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, reader: false, type: Types::String
 
       def view_template(&)
-        label(for: id, **attrs, &)
+        label(for: @input_id, **attrs, &)
       end
 
       private

data/lib/protos/drawer.rb

@@ -7,20 +7,29 @@ module Protos
     # trigger is clicked.
     # https://daisyui.com/components/drawer/
 
-    option :id, type: Types::Coercible::String
+    option :id,
+           reader: false,
+           type: Types::Coercible::String,
+           default: -> { "drawer-#{SecureRandom.hex(4)}" }
 
     def view_template
       div(**attrs) do
-        input(id:, type: :checkbox, class: css[:toggle], autocomplete: :off)
+        input(
+          id: @id,
+          type: :checkbox,
+          class: css[:toggle],
+          autocomplete: :off,
+          form: ""
+        )
         yield if block_given?
       end
     end
 
     def content(...) = render Content.new(...)
 
-    def side(*, **, &) = render Side.new(*, id:, **, &)
+    def side(*, **, &) = render Side.new(*, input_id: @id, **, &)
 
-    def trigger(*, **, &) = render Trigger.new(*, id:, **, &)
+    def trigger(*, **, &) = render Trigger.new(*, input_id: @id, **, &)
 
     private
 

data/lib/protos/popover/trigger.rb

@@ -7,7 +7,7 @@ module Protos
       # or click on to show the popover.
 
       def view_template(&)
-        div(**attrs, &)
+        button(**attrs, &)
       end
 
       private
@@ -15,7 +15,8 @@ module Protos
       def default_attrs
         {
           data: { "protos--popover-target": "trigger" },
-          tabindex: 0
+          tabindex: 0,
+          type: :button
         }
       end
     end

data/lib/protos/swap.rb

@@ -8,7 +8,13 @@ module Protos
 
     def view_template
       label(**attrs) do
-        input(type: :checkbox, class: css[:input], autocomplete: :off)
+        input(
+          type: :checkbox,
+          class: css[:input],
+          autocomplete: :off,
+          form: "",
+          aria_label: "swap"
+        )
         yield if block_given?
       end
     end

data/lib/protos/tabs/tab.rb

@@ -5,35 +5,24 @@ module Protos
     class Tab < Component
       # DOCS: A single tab in a tabs component
 
-      option :id
-      option :label
       option :active, default: -> { false }
       option :disabled, default: -> { false }
 
       def view_template(&)
-        input(
-          type: :radio,
-          class: css[:input],
-          name: id,
-          role: :tab,
-          aria_label: label,
-          autocomplete: :off
-        )
-        div(**attrs, &)
+        button(**attrs, disabled:, &)
       end
 
       private
 
       def default_attrs
         {
-          role: :tabpanel
+          role: :tab
         }
       end
 
       def theme
         {
-          container: "tab-content",
-          input: tokens(
+          container: tokens(
             "tab",
             disabled: "tab-disabled",
             active: "tab-active"

data/lib/protos/toast/close_button.rb

@@ -8,6 +8,7 @@ module Protos
       def view_template(&block)
         form(method: :dialog, class: css[:form]) do
           button(
+            aria_label: "close",
             autofocus: true,
             formmethod: :dialog,
             formnovalidate: true,

data/lib/protos/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Protos
-  VERSION = "0.4.3"
+  VERSION = "0.5.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: protos
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - Nolan J Tait
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-08-15 00:00:00.000000000 Z
+date: 2024-08-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-core
@@ -220,7 +220,7 @@ requirements:
 - tailwindcss
 - daisyui
 - protos-stimulus
-rubygems_version: 3.5.17
+rubygems_version: 3.5.18
 signing_key:
 specification_version: 4
 summary: A UI component library built with phlex and daisyui