From 0589da7136a26dad518a8d44308b65d32e02720f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Wed, 7 May 2025 13:50:45 +0000 Subject: [PATCH 1/3] aria-disabled for Calendar --- lib/ruby_ui/calendar/calendar_days.rb | 75 ++++++++++++++++++--------- lib/ruby_ui/calendar/calendar_next.rb | 12 +++-- lib/ruby_ui/calendar/calendar_prev.rb | 12 +++-- 3 files changed, 67 insertions(+), 32 deletions(-) diff --git a/lib/ruby_ui/calendar/calendar_days.rb b/lib/ruby_ui/calendar/calendar_days.rb index 83954bfb..f24a0133 100644 --- a/lib/ruby_ui/calendar/calendar_days.rb +++ b/lib/ruby_ui/calendar/calendar_days.rb @@ -2,7 +2,11 @@ module RubyUI class CalendarDays < Base - BASE_CLASS = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100" + DEFAULT_CLASSES = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors h-8 w-8 p-0 font-normal" + DISABLED_CLASSES = "disabled:pointer-events-none disabled:opacity-50" + FOCUS_VISIBLE_CLASSES = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ARIA_SELECTED_CLASSES = "aria-selected:opacity-100" + ARIA_DISABLED_CLASSES = "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" def view_template render_selected_date_template @@ -19,11 +23,16 @@ def render_selected_date_template data_day: "{{day}}", data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" - ], + class: [ + DEFAULT_CLASSES, + DISABLED_CLASSES, + FOCUS_VISIBLE_CLASSES, + ARIA_SELECTED_CLASSES, + ARIA_DISABLED_CLASSES, + "bg-primary text-primary-foreground", + "hover:bg-primary hover:text-primary-foreground", + "focus:bg-primary focus:text-primary-foreground" + ], role: "gridcell", tabindex: "0", type: "button", @@ -38,11 +47,16 @@ def render_today_date_template data_day: "{{day}}", data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" - ], + class: [ + DEFAULT_CLASSES, + DISABLED_CLASSES, + FOCUS_VISIBLE_CLASSES, + ARIA_SELECTED_CLASSES, + ARIA_DISABLED_CLASSES, + "bg-accent text-accent-foreground", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground" + ], role: "gridcell", tabindex: "-1", type: "button" @@ -56,11 +70,16 @@ def render_current_month_date_template data_day: "{{day}}", data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" - ], + class: [ + DEFAULT_CLASSES, + DISABLED_CLASSES, + FOCUS_VISIBLE_CLASSES, + ARIA_SELECTED_CLASSES, + ARIA_DISABLED_CLASSES, + "bg-background text-foreground", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground" + ], role: "gridcell", tabindex: "-1", type: "button" @@ -72,13 +91,18 @@ def render_other_month_date_template date_template("otherMonthDateTemplate") do button( data_day: "{{day}}", - data_action: " click->ruby-ui--calendar#selectDay", + data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" - ], + class: [ + DEFAULT_CLASSES, + DISABLED_CLASSES, + FOCUS_VISIBLE_CLASSES, + ARIA_SELECTED_CLASSES, + ARIA_DISABLED_CLASSES, + "bg-background text-muted-foreground", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground" + ], role: "gridcell", tabindex: "-1", type: "button" @@ -89,8 +113,11 @@ def render_other_month_date_template def date_template(target, &block) template(data: {ruby_ui__calendar_target: target}) do td( - class: - "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md", + class: [ + "relative p-0 text-center text-sm", + "focus-within:relative focus-within:z-20", + "[&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md" + ], role: "presentation", &block ) diff --git a/lib/ruby_ui/calendar/calendar_next.rb b/lib/ruby_ui/calendar/calendar_next.rb index d3644fe4..724168ff 100644 --- a/lib/ruby_ui/calendar/calendar_next.rb +++ b/lib/ruby_ui/calendar/calendar_next.rb @@ -20,8 +20,7 @@ def icon class: "h-4 w-4" ) do |s| s.path( - d: - "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z", + d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z", fill: "currentColor", fill_rule: "evenodd", clip_rule: "evenodd" @@ -33,8 +32,13 @@ def default_attrs { name: "next-month", aria_label: "Go to next month", - class: - "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1", + class: [ + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors border border-input h-7 w-7 bg-transparent p-0 opacity-50 absolute right-1", + "disabled:pointer-events-none disabled:opacity-50", + "hover:bg-accent hover:text-accent-foreground hover:opacity-100", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ], type: "button", data_action: "click->ruby-ui--calendar#nextMonth" } diff --git a/lib/ruby_ui/calendar/calendar_prev.rb b/lib/ruby_ui/calendar/calendar_prev.rb index 4bd462a8..88af0819 100644 --- a/lib/ruby_ui/calendar/calendar_prev.rb +++ b/lib/ruby_ui/calendar/calendar_prev.rb @@ -20,8 +20,7 @@ def icon class: "h-4 w-4" ) do |s| s.path( - d: - "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z", + d: "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z", fill: "currentColor", fill_rule: "evenodd", clip_rule: "evenodd" @@ -33,8 +32,13 @@ def default_attrs { name: "previous-month", aria_label: "Go to previous month", - class: - "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1", + class: [ + "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors border border-input h-7 w-7 bg-transparent p-0 opacity-50 absolute left-1", + "disabled:pointer-events-none disabled:opacity-50", + "hover:bg-accent hover:text-accent-foreground hover:opacity-100", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ], type: "button", data_action: "click->ruby-ui--calendar#prevMonth" } From 29b2494575d06348d17a95746a51037e7673869f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Wed, 7 May 2025 17:09:33 +0000 Subject: [PATCH 2/3] BASE_CLASSES --- lib/ruby_ui/calendar/calendar_days.rb | 36 ++++++++------------------- 1 file changed, 11 insertions(+), 25 deletions(-) diff --git a/lib/ruby_ui/calendar/calendar_days.rb b/lib/ruby_ui/calendar/calendar_days.rb index f24a0133..feb8d800 100644 --- a/lib/ruby_ui/calendar/calendar_days.rb +++ b/lib/ruby_ui/calendar/calendar_days.rb @@ -2,11 +2,13 @@ module RubyUI class CalendarDays < Base - DEFAULT_CLASSES = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors h-8 w-8 p-0 font-normal" - DISABLED_CLASSES = "disabled:pointer-events-none disabled:opacity-50" - FOCUS_VISIBLE_CLASSES = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" - ARIA_SELECTED_CLASSES = "aria-selected:opacity-100" - ARIA_DISABLED_CLASSES = "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" + BASE_CLASSES = [ + "aria-selected:opacity-100", + "disabled:pointer-events-none disabled:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", + "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors h-8 w-8 p-0 font-normal" + ].freeze def view_template render_selected_date_template @@ -24,11 +26,7 @@ def render_selected_date_template data_action: "click->ruby-ui--calendar#selectDay", name: "day", class: [ - DEFAULT_CLASSES, - DISABLED_CLASSES, - FOCUS_VISIBLE_CLASSES, - ARIA_SELECTED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, "bg-primary text-primary-foreground", "hover:bg-primary hover:text-primary-foreground", "focus:bg-primary focus:text-primary-foreground" @@ -48,11 +46,7 @@ def render_today_date_template data_action: "click->ruby-ui--calendar#selectDay", name: "day", class: [ - DEFAULT_CLASSES, - DISABLED_CLASSES, - FOCUS_VISIBLE_CLASSES, - ARIA_SELECTED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, "bg-accent text-accent-foreground", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground" @@ -71,11 +65,7 @@ def render_current_month_date_template data_action: "click->ruby-ui--calendar#selectDay", name: "day", class: [ - DEFAULT_CLASSES, - DISABLED_CLASSES, - FOCUS_VISIBLE_CLASSES, - ARIA_SELECTED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, "bg-background text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground" @@ -94,11 +84,7 @@ def render_other_month_date_template data_action: "click->ruby-ui--calendar#selectDay", name: "day", class: [ - DEFAULT_CLASSES, - DISABLED_CLASSES, - FOCUS_VISIBLE_CLASSES, - ARIA_SELECTED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, "bg-background text-muted-foreground", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground" From c89b9d3a62b3cc02ec6ded5deb17d31e0f3eb12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Wed, 7 May 2025 17:10:26 +0000 Subject: [PATCH 3/3] OOPS --- lib/ruby_ui/calendar/calendar_days.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ruby_ui/calendar/calendar_days.rb b/lib/ruby_ui/calendar/calendar_days.rb index feb8d800..fd65184b 100644 --- a/lib/ruby_ui/calendar/calendar_days.rb +++ b/lib/ruby_ui/calendar/calendar_days.rb @@ -3,11 +3,11 @@ module RubyUI class CalendarDays < Base BASE_CLASSES = [ + "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors h-8 w-8 p-0 font-normal", "aria-selected:opacity-100", "disabled:pointer-events-none disabled:opacity-50", "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", - "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors h-8 w-8 p-0 font-normal" + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" ].freeze def view_template