PFX-WB-039: Add hidden captions for security detail tables

lib/portfolixir_web/live/security_detail_live.ex

@@ -130,6 +130,9 @@ defmodule PortfolixirWeb.SecurityDetailLive do
 
             <div id="security-master-data" class="app-shell-table-wrapper">
               <table>
+                <caption id="security-master-data-caption" class="app-shell-visually-hidden">
+                  <%= gettext("Security master data table with identifiers and provider mapping.") %>
+                </caption>
                 <tbody>
                   <tr>
                     <th scope="row"><%= gettext("Name") %></th>
@@ -176,6 +179,9 @@ defmodule PortfolixirWeb.SecurityDetailLive do
             <% else %>
               <div class="app-shell-table-wrapper">
                 <table id="security-fund-document-list">
+                  <caption id="security-fund-document-list-caption" class="app-shell-visually-hidden">
+                    <%= gettext("Fund documents table with filename, type, source, extraction status, and creation date.") %>
+                  </caption>
                   <thead>
                     <tr>
                       <th scope="col"><%= gettext("Original filename") %></th>
@@ -225,6 +231,9 @@ defmodule PortfolixirWeb.SecurityDetailLive do
             <% else %>
               <div class="app-shell-table-wrapper">
                 <table id="security-position-list">
+                  <caption id="security-position-list-caption" class="app-shell-visually-hidden">
+                    <%= gettext("Current position table with securities account and quantity.") %>
+                  </caption>
                   <thead>
                     <tr>
                       <th scope="col"><%= gettext("Securities account") %></th>
@@ -260,6 +269,9 @@ defmodule PortfolixirWeb.SecurityDetailLive do
             <% else %>
               <div class="app-shell-table-wrapper">
                 <table id="security-transactions">
+                  <caption id="security-transactions-caption" class="app-shell-visually-hidden">
+                    <%= gettext("Transaction history table with date, type, account, quantity, price, amount, currency, and notes.") %>
+                  </caption>
                   <thead>
                     <tr>
                       <th scope="col"><%= gettext("Date") %></th>

test/portfolixir_web/live/security_detail_live_test.exs

@@ -65,6 +65,12 @@ defmodule PortfolixirWeb.SecurityDetailLiveTest do
     assert has_element?(view, "#security-master-data", "A1B2C3")
     assert has_element?(view, "#security-master-data", "EUR")
     assert has_element?(view, "#security-master-data", "SYN.X")
+
+    assert has_element?(
+             view,
+             "#security-master-data-caption",
+             "Security master data table with identifiers and provider mapping."
+           )
   end
 
   test "shows buy transactions for the selected security", %{
@@ -99,6 +105,12 @@ defmodule PortfolixirWeb.SecurityDetailLiveTest do
     assert has_element?(view, "#security-transactions", "125")
     assert has_element?(view, "#security-transactions", "Initial buy")
 
+    assert has_element?(
+             view,
+             "#security-transactions-caption",
+             "Transaction history table with date, type, account, quantity, price, amount, currency, and notes."
+           )
+
     assert has_element?(view, "#security-price-chart-svg")
     assert has_element?(view, "#security-chart-marker-0[data-type='buy']")
   end
@@ -241,6 +253,12 @@ defmodule PortfolixirWeb.SecurityDetailLiveTest do
     assert has_element?(view, "#security-position-list", "Secondary depot")
     assert has_element?(view, "#security-position-list", "8")
     assert has_element?(view, "#security-position-list", "5")
+
+    assert has_element?(
+             view,
+             "#security-position-list-caption",
+             "Current position table with securities account and quantity."
+           )
   end
 
   test "does not include transactions from other securities", %{
@@ -403,6 +421,12 @@ defmodule PortfolixirWeb.SecurityDetailLiveTest do
     assert has_element?(view, "#security-fund-documents", "failed")
     assert has_element?(view, "#security-fund-documents", "Unable to read text")
 
+    assert has_element?(
+             view,
+             "#security-fund-document-list-caption",
+             "Fund documents table with filename, type, source, extraction status, and creation date."
+           )
+
     assert has_element?(
              view,
              "#security-fund-documents a[href=\"/fund-documents/#{first_document.id}/allocations/review\"]"