Refactor report and dashboard table layouts to semantic HTML (#1222)

* Refactor report and dashboard tables from div grids to semantic HTML

Convert div-based grid layouts to proper <table>/<thead>/<tbody>/<tr>/<th>/<td>
elements in report views and the dashboard investment summary:

- reports/_breakdown_table + _category_row (income/expense breakdown)
- reports/_trends_insights (monthly trends)
- reports/_net_worth (asset/liability summaries)
- reports/_investment_performance (top holdings)
- pages/dashboard/_investment_summary (top holdings)

Replaces shared/ruler dividers with border-b border-divider on <tr> elements.
Updates test selectors from div[data-category] to tr[data-category] and from
[role="columnheader"] to thead/th.

Closes #1121

* Address PR review feedback

- Restore w-max sm:w-full wrapper on report tables to preserve horizontal
  scroll behavior on narrow screens
- Add sr-only accessible header for net worth amount columns
- Use border-divider instead of border-primary in dashboard investment summary

* Fix rounded corners on semantic table body containers

Move rounded-lg, shadow-border-xs, and bg-container from tbody
(where border-radius and box-shadow don't apply) to a wrapper div
with overflow-hidden. Add bg-container-inset on thead to preserve
the two-tone card design.
This commit is contained in:
Dream
2026-03-22 06:50:33 -04:00
committed by GitHub
parent 79e8469102
commit 61ee9d34cf
7 changed files with 211 additions and 182 deletions

View File

@@ -82,8 +82,8 @@ class ReportsControllerTest < ActionDispatch::IntegrationTest
get reports_path(period_type: :monthly)
assert_response :ok
assert_select "h2", text: I18n.t("reports.trends.title")
assert_select '[role="columnheader"]' do
assert_select "div", text: I18n.t("reports.trends.month")
assert_select "thead" do
assert_select "th", text: I18n.t("reports.trends.month")
end
end
@@ -239,10 +239,10 @@ class ReportsControllerTest < ActionDispatch::IntegrationTest
assert_response :ok
# Parent category
assert_select "div[data-category='category-#{parent_category.id}']", text: /^Entertainment/
assert_select "tr[data-category='category-#{parent_category.id}']", text: /^Entertainment/
# Subcategories
assert_select "div[data-category='category-#{subcategory_movies.id}']", text: /^Movies/
assert_select "div[data-category='category-#{subcategory_games.id}']", text: /^Games/
assert_select "tr[data-category='category-#{subcategory_movies.id}']", text: /^Movies/
assert_select "tr[data-category='category-#{subcategory_games.id}']", text: /^Games/
end
end