Files
sure/app/components/DS/menu_item.html.erb
Guillem Arias Fauste 1742f4ef1e feat(ds): elevate dropdown overlays and stabilize selection check gutter (#2161)
* 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.
2026-06-04 11:55:57 +02:00

20 lines
641 B
Plaintext

<% if variant == :divider %>
<div role="separator">
<%= render "shared/ruler", classes: "my-1" %>
</div>
<% else %>
<div class="px-1" role="none">
<%= wrapper do %>
<% if selectable? %>
<span class="flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
<% if selected %><%= helpers.icon("check", color: destructive? ? :destructive : :default) %><% end %>
</span>
<% end %>
<% if icon %>
<%= helpers.icon(icon, color: destructive? ? :destructive : :default) %>
<% end %>
<%= tag.span(text, class: text_classes) %>
<% end %>
</div>
<% end %>