Skip to content

aria-disabled for Calendar #272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pierry01 wants to merge 3 commits into from
Closed

aria-disabled for Calendar #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0589da7
aria-disabled for Calendar
pierry01 May 7, 2025
29b2494
BASE_CLASSES
pierry01 May 7, 2025
c89b9d3
OOPS
pierry01 May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 37 additions & 24 deletions lib/ruby_ui/calendar/calendar_days.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@

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"
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"
].freeze

def view_template
render_selected_date_template
Expand All @@ -19,11 +25,12 @@ 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: [
BASE_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",
Expand All @@ -38,11 +45,12 @@ 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: [
BASE_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"
Expand All @@ -56,11 +64,12 @@ 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: [
BASE_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"
Expand All @@ -72,13 +81,14 @@ 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: [
BASE_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"
Expand All @@ -89,8 +99,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
)
Expand Down
12 changes: 8 additions & 4 deletions lib/ruby_ui/calendar/calendar_next.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
}
Expand Down
12 changes: 8 additions & 4 deletions lib/ruby_ui/calendar/calendar_prev.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
}
Expand Down