From 8bc76ccf0bf7b1d7ca8e0d6f89e1cf63892d56b9 Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Mon, 24 Nov 2025 19:40:44 +0100
Subject: [PATCH] Improved inventory view screen reader navigation

---
 src/Views/Home/Inventory.cshtml | 76 ++++++++++++++++++++++++---------
 1 file changed, 57 insertions(+), 19 deletions(-)

diff --git a/src/Views/Home/Inventory.cshtml b/src/Views/Home/Inventory.cshtml
index b644043..b44cc1b 100644
--- a/src/Views/Home/Inventory.cshtml
+++ b/src/Views/Home/Inventory.cshtml
@@ -179,13 +179,29 @@
                     <hr class="my-3" />
                     <div class="row g-3">
                         <h4 class="fw-bold">@T["Attributes"]</h4>
-                            ${Object.entries(asset.Description.Attributes)
-                                .map(([k,v]) => `
-                                <div class="d-flex gap-2 align-items-center attribute-row">
-                                    <input type="text" class="form-control w-50" placeholder="@T["Attribute name"]" aria-label="@T["Attribute name"]" data-attr-name readonly value="${k}" />:
-                                    <input type="text" class="form-control" placeholder="@T["Attribute value"]" aria-label="@T["Attribute value"]" data-attr-value readonly value="${v}" />
-                                </div>`)
+                            <table class="w-100">
+                                <thead>
+                                    <tr>
+                                        <th class="visually-hidden">@T["Attribute name"]</th>
+                                        <th class="visually-hidden">@T["Attribute value"]</th>
+                                        <th class="visually-hidden">@T["Delete"]</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="updateAttributesContainer">
+                                    ${Object.entries(asset.Description.Attributes)
+                                        .map(([k,v]) => `
+                                        <tr class="gap-2 align-items-center attribute-row">
+                                            <td class="d-flex p-1 align-items-center">
+                                                <input type="text" class="form-control d-inline-block w-100" placeholder="@T["Attribute name"]" aria-label="@T["Attribute name"]" data-attr-name readonly value="${k}" />
+                                                <span class="ms-1">:</span>
+                                            </td>
+                                            <td class="p-1">
+                                                <input type="text" class="form-control" placeholder="@T["Attribute value"]" aria-label="@T["Attribute value"]" data-attr-value readonly value="${v}" />
+                                            </td>
+                                        </tr>`)
                                 .join('')}
+                                </tbody>
+                            </table>
                         </div>` : ''}
                                 
                     ${asset.Description?.Purchase ? `
@@ -194,7 +210,7 @@
                         <h4 class="fw-bold">@T["Purchase Information"]</h4>
                         <div class="col-md-6">
                             <label class="form-label" for="detailPurchaseDate">@T["Purchase Date"]</label>
-                            <input type="date" class="form-control" id="detailPurchaseDate" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" readonly />
+                            <input type="text" class="form-control" id="detailPurchaseDate" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" readonly />
                         </div>
                         <div class="col-md-6">
                             <label class="form-label" for="detailPurchaseValue">@T["Purchase Value"]</label>
@@ -385,10 +401,20 @@
                         </div>
 
                         <div class="col-12 mt-3">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
+                            <div class="justify-content-between align-items-center mb-2">
                                 <h4 class="fw-bold mb-0">@T["Attributes"]</h4>
+                                <table class="w-100">
+                                    <thead>
+                                        <tr>
+                                            <th class="visually-hidden">@T["Attribute name"]</th>
+                                            <th class="visually-hidden">@T["Attribute value"]</th>
+                                            <th class="visually-hidden">@T["Delete"]</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="updateAttributesContainer">
+                                    </tbody>
+                                </table>
                             </div>
-                            <div id="updateAttributesContainer" class="d-flex flex-column gap-2"></div>
                             <button type="button" class="btn btn-sm btn-primary mt-3" id="updateAddAttributeBtn">
                                 @T["Add Attribute"]
                             </button>
@@ -435,12 +461,18 @@ document.addEventListener('DOMContentLoaded', () => {
     let assetId = null;
 
     addAttrBtn.addEventListener('click', () => {
-        const row = document.createElement('div');
-        row.className = 'd-flex gap-2 align-items-center attribute-row';
+        const row = document.createElement('tr');
+        row.className = 'attribute-row mb-3';
         row.innerHTML = `
-            <input type="text" class="form-control" aria-label="@T["Attribute name"]" placeholder="@T["Attribute name"]" data-attr-name />
-            <input type="text" class="form-control" aria-label="@T["Attribute value"]" placeholder="@T["Attribute value"]" data-attr-value />
-            <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
+            <td class="col-md-5 p-1">
+                <input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name />
+            </td>
+            <td class="col-md-5 p-1">
+                <input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value />
+            </td>
+            <td class="col-md-2 p-1">
+                <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
+            </td>
         `;
         updateAttributesContainer.appendChild(row);
     });
@@ -486,12 +518,18 @@ document.addEventListener('DOMContentLoaded', () => {
                 // Attributes
                 if (asset.Description.Attributes) {
                     for (const [attrName, attrValue] of Object.entries(asset.Description.Attributes)) {
-                        const row = document.createElement('div');
-                        row.className = 'd-flex gap-2 align-items-center attribute-row';
+                        const row = document.createElement('tr');
+                        row.className = 'attribute-row mb-3';
                         row.innerHTML = `
-                            <input type="text" class="form-control" aria-label="@T["Attribute name"]" value="${attrName}" data-attr-name />
-                            <input type="text" class="form-control" aria-label="@T["Attribute value"]" value="${attrValue}" data-attr-value />
-                            <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
+                            <td class="col-md-5 p-1">
+                                <input type="text" class="form-control" value="${attrName}" placeholder="@T["Attribute name"]" data-attr-name />
+                            </td>
+                            <td class="col-md-5 p-1">
+                                <input type="text" class="form-control" value="${attrValue}" placeholder="@T["Attribute value"]" data-attr-value />
+                            </td>
+                            <td class="col-md-2 p-1">
+                                <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
+                            </td>
                         `;
                         updateAttributesContainer.appendChild(row);
                     }