disabled + aria-disabled for Form and Input (#229)

* disabled + aria-disabled examples for Combobox

* disabled + aria-disabled for Form and Input

* OOPS

Author: pierry01

app/components/ruby_ui/form/form_field_label.rb

@@ -9,7 +9,13 @@ def view_template(&)
     private
 
     def default_attrs
-      {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}
+      {
+        class: [
+          "text-sm font-medium leading-none",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          "peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none"
+        ]
+      }
     end
   end
 end

app/components/ruby_ui/input/input.rb

@@ -19,7 +19,14 @@ def default_attrs
           ruby_ui__form_field_target: "input",
           action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
-        class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground"
+        class: [
+          "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border",
+          "placeholder:text-muted-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ]
       }
     end
   end

app/views/docs/form.rb

@@ -22,6 +22,24 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          FormField do
+            FormFieldLabel { "Disabled" }
+            Input(disabled: true, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          FormField do
+            FormFieldLabel { "Aria Disabled" }
+            Input(aria: {disabled: "true"}, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+          end
+        RUBY
+      end
+
       render Docs::VisualCodeExample.new(title: "Custom error message", context: self) do
         <<~RUBY
           Form(class: "w-2/3 space-y-6") do

app/views/docs/input.rb

@@ -34,6 +34,14 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(aria: {disabled: "true"}, type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
       render Docs::VisualCodeExample.new(title: "With label", context: self) do
         <<~RUBY
           div(class: 'grid w-full max-w-sm items-center gap-1.5') do