mirror of
https://github.com/we-promise/sure.git
synced 2026-06-06 19:29:03 +00:00
1742f4ef1e
* feat(ds): elevate dropdown overlays and stabilize selection check gutter Menus and popovers floated at the same elevation as inline cards (shadow-border-xs), so dropdowns blended into the content beneath them. Bump DS::Menu and DS::Popover panels to shadow-border-lg. DS::MenuItem rendered its leading icon only when present, so a selection check shifted the row's text out of alignment with the unselected rows. Add a `selected:` param that reserves a fixed-width check gutter (check when selected, empty otherwise) so row text stays aligned. Apply the same reserved gutter to the bespoke category dropdown row, and add a `selectable` menu preview. * fix(ds): expose menu selection via menuitemradio + aria-checked Selectable DS::MenuItem rows conveyed selection only visually. Render them as role="menuitemradio" with aria-checked so assistive tech gets the selection state of single-select lists, merging the menu ARIA contract with any caller-supplied aria. Addresses CodeRabbit review feedback. * fix(ds): include selectable roles in menu roving-focus query DS::MenuItem selectable rows render as role=menuitemradio, but the menu controller built its roving-focus list from [role=menuitem] only, leaving single-select menus with no keyboard focus/arrow handling. Query the menuitemradio/menuitemcheckbox roles too. Addresses Codex review feedback.
33 lines
1.3 KiB
Ruby
33 lines
1.3 KiB
Ruby
require "test_helper"
|
|
|
|
class DS::MenuItemTest < ViewComponent::TestCase
|
|
test "selectable item reserves a fixed-width check gutter and shows the check when selected" do
|
|
render_inline(DS::MenuItem.new(variant: :link, text: "30D", href: "/", selected: true))
|
|
|
|
assert_selector "span.shrink-0.w-5", count: 1
|
|
assert_selector "span.shrink-0.w-5 svg", count: 1
|
|
# Selection is exposed to assistive tech, not only visually.
|
|
assert_selector "a[role='menuitemradio'][aria-checked='true']"
|
|
assert_text "30D"
|
|
end
|
|
|
|
test "selectable item keeps the reserved gutter (no glyph) when not selected" do
|
|
render_inline(DS::MenuItem.new(variant: :link, text: "90D", href: "/", selected: false))
|
|
|
|
# Gutter still present so text stays aligned with the selected row...
|
|
assert_selector "span.shrink-0.w-5", count: 1
|
|
# ...but no check glyph is drawn.
|
|
assert_no_selector "span.shrink-0.w-5 svg"
|
|
assert_selector "a[role='menuitemradio'][aria-checked='false']"
|
|
end
|
|
|
|
test "plain action item (selected: nil) renders no check gutter" do
|
|
render_inline(DS::MenuItem.new(variant: :link, text: "Edit", href: "/", icon: "pencil-line"))
|
|
|
|
assert_no_selector "span.shrink-0.w-5"
|
|
assert_selector "a[role='menuitem']"
|
|
assert_no_selector "[aria-checked]"
|
|
assert_text "Edit"
|
|
end
|
|
end
|