mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
* feat(design-system): split DS::Menu into strict action-list + new DS::Popover for mixed content Closes #1743. DS::Menu used to absorb both action-list dropdowns (row context menus, "more actions") AND mixed-content panels (user-account dropdown, filter forms, picker pop-ups). The two shapes carry incompatible a11y contracts: - **Action list**: `role="menu"` container, `role="menuitem"` children, Up/Down arrow nav per WAI-ARIA APG. - **Mixed content**: NO menu role — `role="menu"` restricts AT users to menuitem-only navigation and breaks any panel with forms, headings, or generic groupings. This PR splits the component: ## DS::Menu (tightened) Strict action-list primitive. Variants reduced to `:icon` and `:button` (no `:avatar`). `custom_content` slot removed. Bakes in: - `role="menu"` on the panel, `aria-haspopup="menu"` + `aria-expanded` + `aria-controls` on the trigger. - `role="menuitem"` + `tabindex="-1"` on every DS::MenuItem; the controller installs roving tabindex (first item gets `tabindex="0"` when the menu opens) and handles ArrowUp/Down/Home/End + Escape + Enter/Space activation. - `role="separator"` on the divider variant. - Stable per-instance `menu-<8-char hex>` id so the trigger's `aria-controls` resolves correctly. `DS::Menu.new(variant: :avatar, ...)` now raises ArgumentError pointing at DS::Popover. ## DS::Popover (new) Positioned panel for **mixed**, **non-action-list** content: account menus, picker forms, filter forms, embedded controls. Slots: `button`, `header`, `custom_content`. Variants: `:icon`, `:button`, `:avatar`. NO `role="menu"` — the panel announces as a generic dialog-popup (`aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`). Mirrors DS::Menu's floating-ui positioning + Escape/outside-click lifecycle in its own Stimulus controller (`DS--popover`). Avatar variant ships a focus ring + bumped touch target (44×44 via `w-11 h-11` per #1738). ## Migrated callsites (7 → DS::Popover) - `app/views/users/_user_menu.html.erb` — avatar trigger + profile header + nav links (items kept as DS::MenuItem inside `custom_content` for visual parity) - `app/views/categories/_menu.html.erb` — turbo-framed category picker - `app/views/budgets/_budget_header.html.erb` — budget picker - `app/views/reports/index.html.erb` — period picker - `app/views/holdings/_cost_basis_cell.html.erb` — cost-basis edit form - `app/views/transactions/searches/_form.html.erb` — filter form - `app/components/UI/account/activity_feed.html.erb:70` — status checkboxes (the row-level "new" menu on line 9 stays as DS::Menu) The other 33 DS::Menu callsites stay as-is — pure action lists. Locale: `ds.popover.avatar_default_label` + `users.user_menu.aria_label` keys added (en only; other locales handled in a separate i18n pass). * fix(test): update sidebar user-menu selector for Menu→Popover migration The user-menu now renders as `DS::Popover` (variant: :avatar) instead of `DS::Menu` after the menu split, so its trigger carries `data-DS--popover-target="button"` rather than the old `data-DS--menu-target`. Update the sidebar-driven settings test helper to match — every system test that drives Settings via the sidebar gates on this selector. * fix(review): DS::Popover/Menu trigger a11y + caller-attr preservation - popover.rb / menu.rb: button slot now merges (not overwrites) caller- provided data and aria hashes, sets aria-haspopup/expanded/controls on the :button variant, defaults type="button" on block-rendered buttons. - menu.rb / menu.html.erb: drop renders_one :header (strict-menu API shouldn't expose an arbitrary-markup escape hatch); preview updated. - menu_controller.js: handle Enter/Space activation on focused menuitem so keyboard navigation matches the ARIA menu pattern. - cost_basis_cell / transactions/searches/_menu: retarget cancel button data-action from DS--menu#close to DS--popover#close (host controller changed in the migration). * fix: apply CodeRabbit auto-fixes Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai> * fix(review): MenuItem roving: false for DS::Popover usage Codex P1 on #1850: \`DS::MenuItem\` hard-codes \`tabindex=\"-1\"\` and \`role=\"menuitem\"\` for both link and button variants — correct inside \`DS::Menu\` (which provides arrow-key roving and announces \`role=\"menu\"\`), but breaks every \`DS::MenuItem\` rendered inside \`DS::Popover\` (\`app/views/users/_user_menu.html.erb\`). Popover has no roving handler, so Tab skips every item — Settings, Changelog, Feedback, Contact, Log out become keyboard-unreachable. Add a \`roving:\` keyword (default \`true\`) to \`DS::MenuItem\` that gates both \`tabindex=\"-1\"\` and \`role=\"menuitem\"\`. \`DS::Menu\` callers keep the default (roving menu semantics intact). Pass \`roving: false\` from \`_user_menu.html.erb\` so user-menu items land in the normal Tab order. Existing \`menu.with_item(...)\` callers in the design system still default to \`true\`, so no behavior change for \`DS::Menu\` consumers. * fix(review): make menuitem_attrs authoritative on roving CodeRabbit Major on #1850: \`merged_opts\` was splatted AFTER \`menuitem_attrs\` in \`DS::MenuItem#wrapper\`, so a stray \`role: :button\` or \`tabindex: 0\` from a \`menu.with_item(..., role: …)\` caller could silently downgrade the \`DS::Menu\` ARIA contract that \`menuitem_attrs\` enforces. Strip \`:role\` and \`:tabindex\` from \`merged_opts\` whenever \`roving\` is enabled, then splat \`menuitem_attrs\` last. When \`roving: false\` (popover usage in \`_user_menu.html.erb\`) callers keep full control — Tab order and explicit ARIA stay tunable by the caller. --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: CodeRabbit <noreply@coderabbit.ai> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
164 lines
7.3 KiB
Plaintext
164 lines
7.3 KiB
Plaintext
<%= turbo_frame_tag dom_id(account, "entries") do %>
|
|
<div class="bg-container px-3 py-4 lg:p-4 shadow-border-xs rounded-xl" data-controller="checkbox-toggle">
|
|
<div class="flex items-center justify-between mb-4" data-testid="activity-menu">
|
|
<%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %>
|
|
|
|
<%# Show menu if: manual (can add balance) OR non-crypto (can add transactions) %>
|
|
<%# This hides the menu only for linked crypto accounts who have no actions %>
|
|
<% if !account.linked? || !account.crypto? %>
|
|
<%= render DS::Menu.new(variant: "button") do |menu| %>
|
|
<% menu.with_button(text: t("accounts.show.activity.new"), variant: "secondary", icon: "plus") %>
|
|
|
|
<% unless account.linked? %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_balance"),
|
|
icon: "circle-dollar-sign",
|
|
href: new_valuation_path(account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% end %>
|
|
|
|
<% unless account.crypto? %>
|
|
<% if account.investment? %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_activity"),
|
|
icon: "arrow-left-right",
|
|
href: new_trade_path(account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% else %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_transaction"),
|
|
icon: "credit-card",
|
|
href: new_transaction_path(account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_transfer"),
|
|
icon: "arrow-right-left",
|
|
href: new_transfer_path(from_account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form_with url: account_path(account),
|
|
id: "entries-search",
|
|
scope: :q,
|
|
method: :get,
|
|
data: { controller: "auto-submit-form" } do |form| %>
|
|
<div class="flex gap-2 mb-4">
|
|
<div class="grow">
|
|
<div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:border-primary">
|
|
<%= helpers.icon("search") %>
|
|
|
|
<%= hidden_field_tag :account_id, account.id %>
|
|
|
|
<%= form.search_field :search,
|
|
placeholder: t("accounts.show.activity.search.placeholder"),
|
|
value: search,
|
|
class: "form-field__input placeholder:text-sm placeholder:text-secondary",
|
|
"data-auto-submit-form-target": "auto" %>
|
|
</div>
|
|
</div>
|
|
|
|
<%= render DS::Popover.new(variant: "button", no_padding: true) do |popover| %>
|
|
<% popover.with_button(
|
|
id: "activity-status-filter-button",
|
|
type: "button",
|
|
text: t("accounts.show.activity.filter"),
|
|
variant: "outline",
|
|
icon: "list-filter"
|
|
) %>
|
|
|
|
<% popover.with_custom_content do %>
|
|
<div class="p-3 space-y-3 min-w-[160px]">
|
|
<p class="text-xs font-medium text-secondary uppercase"><%= t("accounts.show.activity.status") %></p>
|
|
<div class="flex items-center gap-3">
|
|
<%= check_box_tag "q[status][]",
|
|
"confirmed",
|
|
params.dig(:q, :status)&.include?("confirmed"),
|
|
id: "q_status_confirmed",
|
|
class: "checkbox checkbox--light",
|
|
form: "entries-search",
|
|
onchange: "document.getElementById('entries-search').requestSubmit()" %>
|
|
<%= label_tag "q_status_confirmed", t("accounts.show.activity.confirmed"), class: "text-sm text-primary" %>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<%= check_box_tag "q[status][]",
|
|
"pending",
|
|
params.dig(:q, :status)&.include?("pending"),
|
|
id: "q_status_pending",
|
|
class: "checkbox checkbox--light",
|
|
form: "entries-search",
|
|
onchange: "document.getElementById('entries-search').requestSubmit()" %>
|
|
<%= label_tag "q_status_pending", t("accounts.show.activity.pending"), class: "text-sm text-primary" %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= button_tag type: "button",
|
|
id: "toggle-checkboxes-button",
|
|
aria: { label: t(".toggle_selection_checkboxes") },
|
|
class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
|
|
data: {
|
|
action: "click->checkbox-toggle#toggle",
|
|
checkbox_toggle_target: "toggleButton"
|
|
} do %>
|
|
<%= helpers.icon("list-todo") %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if activity_dates.empty? %>
|
|
<%= tag.p t("accounts.show.activity.no_entries"), class: "text-secondary text-sm p-4" %>
|
|
<% else %>
|
|
<%= tag.div id: dom_id(account, "entries_bulk_select"),
|
|
data: {
|
|
controller: "bulk-select",
|
|
bulk_select_singular_label_value: "entry",
|
|
bulk_select_plural_label_value: "entries"
|
|
} do %>
|
|
<div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
|
|
<%= render "entries/selection_bar" %>
|
|
</div>
|
|
|
|
<div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
|
|
<div class="pl-0.5 col-span-8 flex items-center gap-4">
|
|
<%= check_box_tag "selection_entry",
|
|
class: "checkbox checkbox--light hidden lg:block",
|
|
data: {
|
|
action: "bulk-select#togglePageSelection",
|
|
checkbox_toggle_target: "selectionEntry"
|
|
} %>
|
|
<%= tag.p t("accounts.show.activity.date") %>
|
|
</div>
|
|
|
|
<%= tag.p t("accounts.show.activity.amount"), class: "col-span-4 justify-self-end" %>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="space-y-4">
|
|
<% activity_dates.each do |activity_date_data| %>
|
|
<%= render UI::Account::ActivityDate.new(
|
|
account: account,
|
|
data: activity_date_data
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="p-4 bg-container rounded-bl-lg rounded-br-lg">
|
|
<%= render "shared/pagination", pagy: pagy %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|