Skip to content

Commit b9ab013

Browse files
pierry01cirdes
pierry01
and
cirdes
authored
aria-disabled for Select (#232)
Co-authored-by: Cirdes <[email protected]>
1 parent d614567 commit b9ab013

File tree

3 files changed

+104
-22
lines changed

3 files changed

+104
-22
lines changed

‎app/components/ruby_ui/select/select_item.rb

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,24 @@ def default_attrs
3737
{
3838
role: "option",
3939
tabindex: "0",
40-
class: "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
40+
data_value: @value,
41+
aria_selected: "false",
42+
data_orientation: "vertical",
43+
class: [
44+
"item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
45+
"focus:bg-accent focus:text-accent-foreground",
46+
"hover:bg-accent hover:text-accent-foreground",
47+
"disabled:pointer-events-none disabled:opacity-50",
48+
"aria-selected:bg-accent aria-selected:text-accent-foreground",
49+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
50+
"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
51+
],
4152
data: {
4253
controller: "ruby-ui--select-item",
4354
action: "click->ruby-ui--select#selectItem keydown.enter->ruby-ui--select#selectItem keydown.down->ruby-ui--select#handleKeyDown keydown.up->ruby-ui--select#handleKeyUp keydown.esc->ruby-ui--select#handleEsc",
4455
ruby_ui__select_target: "item"
45-
},
46-
data_value: @value,
47-
data_orientation: "vertical",
48-
aria_selected: "false"
56+
}
57+
4958
}
5059
end
5160
end

‎app/components/ruby_ui/select/select_trigger.rb

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,26 @@ def icon
3333

3434
def default_attrs
3535
{
36+
type: "button",
37+
role: "combobox",
3638
data: {
3739
action: "ruby-ui--select#onClick",
3840
ruby_ui__select_target: "trigger"
3941
},
40-
type: "button",
41-
role: "combobox",
4242
aria: {
4343
controls: "radix-:r0:",
4444
expanded: "false",
4545
autocomplete: "none",
4646
haspopup: "listbox",
4747
activedescendant: true
4848
},
49-
class:
50-
"truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
49+
class: [
50+
"truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
51+
"placeholder:text-muted-foreground",
52+
"focus:outline-none focus:ring-1 focus:ring-ring",
53+
"disabled:cursor-not-allowed disabled:opacity-50",
54+
"aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
55+
]
5156
}
5257
end
5358
end

‎app/views/docs/select.rb

Lines changed: 81 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,88 @@ def view_template
1111

1212
render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do
1313
<<~RUBY
14-
div(class: 'w-56 flex items-center justify-center') do
15-
Select do
16-
SelectInput(value: "apple", id: "select-a-fruit")
17-
SelectTrigger do
18-
SelectValue(placeholder: 'Select a fruit', id: "select-a-fruit") { "Apple" }
14+
Select(class: "w-56") do
15+
SelectInput(value: "apple", id: "select-a-fruit")
16+
17+
SelectTrigger do
18+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
19+
end
20+
21+
SelectContent(outlet_id: "select-a-fruit") do
22+
SelectGroup do
23+
SelectLabel { "Fruits" }
24+
SelectItem(value: "apple") { "Apple" }
25+
SelectItem(value: "orange") { "Orange" }
26+
SelectItem(value: "banana") { "Banana" }
27+
SelectItem(value: "watermelon") { "Watermelon" }
28+
end
29+
end
30+
end
31+
RUBY
32+
end
33+
34+
render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
35+
<<~RUBY
36+
Select(class: "w-56") do
37+
SelectInput(value: "apple", id: "select-a-fruit")
38+
39+
SelectTrigger(disabled: true) do
40+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
41+
end
42+
end
43+
RUBY
44+
end
45+
46+
render Docs::VisualCodeExample.new(title: "Data Disabled", context: self) do
47+
<<~RUBY
48+
Select(class: "w-56") do
49+
SelectInput(value: "apple", id: "select-a-fruit")
50+
51+
SelectTrigger do
52+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
53+
end
54+
55+
SelectContent(outlet_id: "select-a-fruit") do
56+
SelectGroup do
57+
SelectLabel { "Fruits" }
58+
SelectItem(data: {disabled: true}, value: "apple") { "Apple" }
59+
SelectItem(value: "orange") { "Orange" }
60+
SelectItem(value: "banana") { "Banana" }
61+
SelectItem(data: {disabled: true}, value: "watermelon") { "Watermelon" }
1962
end
20-
SelectContent(outlet_id: "select-a-fruit") do
21-
SelectGroup do
22-
SelectLabel { "Fruits" }
23-
SelectItem(value: "apple") { "Apple" }
24-
SelectItem(value: "orange") { "Orange" }
25-
SelectItem(value: "banana") { "Banana" }
26-
SelectItem(value: "watermelon") { "Watermelon" }
27-
end
63+
end
64+
end
65+
RUBY
66+
end
67+
68+
render Docs::VisualCodeExample.new(title: "Aria Disabled Trigger", context: self) do
69+
<<~RUBY
70+
Select(class: "w-56") do
71+
SelectInput(value: "apple", id: "select-a-fruit")
72+
73+
SelectTrigger(aria: {disabled: "true"}) do
74+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
75+
end
76+
end
77+
RUBY
78+
end
79+
80+
render Docs::VisualCodeExample.new(title: "Aria Disabled Item", context: self) do
81+
<<~RUBY
82+
Select(class: "w-56") do
83+
SelectInput(value: "apple", id: "select-a-fruit")
84+
85+
SelectTrigger do
86+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
87+
end
88+
89+
SelectContent(outlet_id: "select-a-fruit") do
90+
SelectGroup do
91+
SelectLabel { "Fruits" }
92+
SelectItem(aria: {disabled: "true"}, value: "apple") { "Apple" }
93+
SelectItem(value: "orange") { "Orange" }
94+
SelectItem(value: "banana") { "Banana" }
95+
SelectItem(aria: {disabled: "true"}, value: "watermelon") { "Watermelon" }
2896
end
2997
end
3098
end

0 commit comments

Comments
 (0)