Skip to content

Commit 0589da7

Browse files
pierry01pierry01
committed
aria-disabled for Calendar
1 parent 327d29e commit 0589da7

3 files changed

Lines changed: 67 additions & 32 deletions

File tree

‎lib/ruby_ui/calendar/calendar_days.rb‎

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22

33
module RubyUI
44
class CalendarDays < Base
5-
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"
5+
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"
6+
DISABLED_CLASSES = "disabled:pointer-events-none disabled:opacity-50"
7+
FOCUS_VISIBLE_CLASSES = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
8+
ARIA_SELECTED_CLASSES = "aria-selected:opacity-100"
9+
ARIA_DISABLED_CLASSES = "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
610

711
def view_template
812
render_selected_date_template
@@ -19,11 +23,16 @@ def render_selected_date_template
1923
data_day: "{{day}}",
2024
data_action: "click->ruby-ui--calendar#selectDay",
2125
name: "day",
22-
class:
23-
[
24-
BASE_CLASS,
25-
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
26-
],
26+
class: [
27+
DEFAULT_CLASSES,
28+
DISABLED_CLASSES,
29+
FOCUS_VISIBLE_CLASSES,
30+
ARIA_SELECTED_CLASSES,
31+
ARIA_DISABLED_CLASSES,
32+
"bg-primary text-primary-foreground",
33+
"hover:bg-primary hover:text-primary-foreground",
34+
"focus:bg-primary focus:text-primary-foreground"
35+
],
2736
role: "gridcell",
2837
tabindex: "0",
2938
type: "button",
@@ -38,11 +47,16 @@ def render_today_date_template
3847
data_day: "{{day}}",
3948
data_action: "click->ruby-ui--calendar#selectDay",
4049
name: "day",
41-
class:
42-
[
43-
BASE_CLASS,
44-
"bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
45-
],
50+
class: [
51+
DEFAULT_CLASSES,
52+
DISABLED_CLASSES,
53+
FOCUS_VISIBLE_CLASSES,
54+
ARIA_SELECTED_CLASSES,
55+
ARIA_DISABLED_CLASSES,
56+
"bg-accent text-accent-foreground",
57+
"hover:bg-accent hover:text-accent-foreground",
58+
"focus:bg-accent focus:text-accent-foreground"
59+
],
4660
role: "gridcell",
4761
tabindex: "-1",
4862
type: "button"
@@ -56,11 +70,16 @@ def render_current_month_date_template
5670
data_day: "{{day}}",
5771
data_action: "click->ruby-ui--calendar#selectDay",
5872
name: "day",
59-
class:
60-
[
61-
BASE_CLASS,
62-
"bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
63-
],
73+
class: [
74+
DEFAULT_CLASSES,
75+
DISABLED_CLASSES,
76+
FOCUS_VISIBLE_CLASSES,
77+
ARIA_SELECTED_CLASSES,
78+
ARIA_DISABLED_CLASSES,
79+
"bg-background text-foreground",
80+
"hover:bg-accent hover:text-accent-foreground",
81+
"focus:bg-accent focus:text-accent-foreground"
82+
],
6483
role: "gridcell",
6584
tabindex: "-1",
6685
type: "button"
@@ -72,13 +91,18 @@ def render_other_month_date_template
7291
date_template("otherMonthDateTemplate") do
7392
button(
7493
data_day: "{{day}}",
75-
data_action: " click->ruby-ui--calendar#selectDay",
94+
data_action: "click->ruby-ui--calendar#selectDay",
7695
name: "day",
77-
class:
78-
[
79-
BASE_CLASS,
80-
"bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
81-
],
96+
class: [
97+
DEFAULT_CLASSES,
98+
DISABLED_CLASSES,
99+
FOCUS_VISIBLE_CLASSES,
100+
ARIA_SELECTED_CLASSES,
101+
ARIA_DISABLED_CLASSES,
102+
"bg-background text-muted-foreground",
103+
"hover:bg-accent hover:text-accent-foreground",
104+
"focus:bg-accent focus:text-accent-foreground"
105+
],
82106
role: "gridcell",
83107
tabindex: "-1",
84108
type: "button"
@@ -89,8 +113,11 @@ def render_other_month_date_template
89113
def date_template(target, &block)
90114
template(data: {ruby_ui__calendar_target: target}) do
91115
td(
92-
class:
93-
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md",
116+
class: [
117+
"relative p-0 text-center text-sm",
118+
"focus-within:relative focus-within:z-20",
119+
"[&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md"
120+
],
94121
role: "presentation",
95122
&block
96123
)

‎lib/ruby_ui/calendar/calendar_next.rb‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ def icon
2020
class: "h-4 w-4"
2121
) do |s|
2222
s.path(
23-
d:
24-
"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",
23+
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",
2524
fill: "currentColor",
2625
fill_rule: "evenodd",
2726
clip_rule: "evenodd"
@@ -33,8 +32,13 @@ def default_attrs
3332
{
3433
name: "next-month",
3534
aria_label: "Go to next month",
36-
class:
37-
"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",
35+
class: [
36+
"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",
37+
"disabled:pointer-events-none disabled:opacity-50",
38+
"hover:bg-accent hover:text-accent-foreground hover:opacity-100",
39+
"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
40+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
41+
],
3842
type: "button",
3943
data_action: "click->ruby-ui--calendar#nextMonth"
4044
}

‎lib/ruby_ui/calendar/calendar_prev.rb‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ def icon
2020
class: "h-4 w-4"
2121
) do |s|
2222
s.path(
23-
d:
24-
"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",
23+
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",
2524
fill: "currentColor",
2625
fill_rule: "evenodd",
2726
clip_rule: "evenodd"
@@ -33,8 +32,13 @@ def default_attrs
3332
{
3433
name: "previous-month",
3534
aria_label: "Go to previous month",
36-
class:
37-
"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",
35+
class: [
36+
"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",
37+
"disabled:pointer-events-none disabled:opacity-50",
38+
"hover:bg-accent hover:text-accent-foreground hover:opacity-100",
39+
"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
40+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
41+
],
3842
type: "button",
3943
data_action: "click->ruby-ui--calendar#prevMonth"
4044
}

0 commit comments

Comments
 (0)