From 48f0eb0e7e016f632362600f7fc39f55d85a332a Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Sun, 23 Nov 2025 21:47:03 +0100
Subject: [PATCH] Improved toast accessibility, improved batch accessibility

---
 src/Resources/Views.Shared._Batch.de.resx    |  3 +++
 src/Resources/Views.Shared._BatchButton.resx | 20 +++++++++++++++++++
 src/Views/Shared/_Batch.cshtml               | 18 +++++++++++++----
 src/Views/Shared/_BatchButton.cshtml         |  5 ++++-
 src/wwwroot/js/site.js                       | 21 ++++++++++++++++++--
 5 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 src/Resources/Views.Shared._BatchButton.resx

diff --git a/src/Resources/Views.Shared._Batch.de.resx b/src/Resources/Views.Shared._Batch.de.resx
index 23cc857..4898375 100644
--- a/src/Resources/Views.Shared._Batch.de.resx
+++ b/src/Resources/Views.Shared._Batch.de.resx
@@ -73,4 +73,7 @@
     <data name="Serial" xml:space="preserve">
         <value>Seriennummer</value>
     </data>
+    <data name="Delete entry" xml:space="preserve">
+        <value>Eintrag löschen</value>
+    </data>
 </root>
diff --git a/src/Resources/Views.Shared._BatchButton.resx b/src/Resources/Views.Shared._BatchButton.resx
new file mode 100644
index 0000000..ec9967a
--- /dev/null
+++ b/src/Resources/Views.Shared._BatchButton.resx
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+    <resheader name="resmimetype">
+        <value>text/microsoft-resx</value>
+    </resheader>
+    <resheader name="version">
+        <value>2.0</value>
+    </resheader>
+    <resheader name="reader">
+        <value>System.Resources.ResXResourceReader, System.Windows.Forms, ...</value>
+    </resheader>
+    <resheader name="writer">
+        <value>System.Resources.ResXResourceWriter, System.Windows.Forms, ...</value>
+    </resheader>
+
+    <data name="Open Print Page" xml:space="preserve">
+        <value>Druckseite öffnen</value>
+    </data>
+
+</root>
diff --git a/src/Views/Shared/_Batch.cshtml b/src/Views/Shared/_Batch.cshtml
index 2c8fc05..c6adfc6 100644
--- a/src/Views/Shared/_Batch.cshtml
+++ b/src/Views/Shared/_Batch.cshtml
@@ -67,7 +67,10 @@
                     const asset = json.assetsModel;
                     assetCard.innerHTML = `
                         <div class="card-body" data-cn="${asset.Cn}">
-                            <h4 class="card-title mb-4" style="text-align: center;"><button class="btn btn-sm btn-danger" data-action="remove" data-batchid="${i}" style="float:left;">X</button><strong>Asset ${i + 1}:</strong> ${asset.Name}</h4>
+                            <span>
+                                <h4 tabindex="0" class="card-title mb-4" style="text-align: center;"><strong aria-label="Asset ${i + 1}: ${asset.Name}">Asset ${i + 1}:</strong> ${asset.Name}</h4>
+                                <button class="btn btn-sm btn-danger" data-action="remove" data-batchid="${i}" aria-label="@T["Delete entry"]" style="float:left;">X</button>
+                            </span>
                             <div class="row">
                                 <div class="col-md-5">
                                     <p><strong>@T["Asset ID"]:</strong> ${asset.Cn}</p>
@@ -87,7 +90,10 @@
                 } else {
                     assetCard.innerHTML = `
                         <div class="card-body">
-                            <h4 class="card-title mb-4" style="text-align: center;"><button class="btn btn-sm btn-danger" data-action="remove" data-batchid="${i}" style="float:left;">X</button><strong>Asset ${i + 1}:</strong> @T["Empty"]</h4>
+                            <span>
+                                <h4 tabindex="0" class="card-title mb-4" style="text-align: center;"><strong aria-label="Asset ${i + 1}: @T["Empty"]">Asset ${i + 1}:</strong> @T["Empty"]</h4>
+                                <button class="btn btn-sm btn-danger" data-action="remove" data-batchid="${i}" aria-label="@T["Delete entry"]" style="float:left;">X</button>
+                            </span>
                             <div class="row">
                                 <div id="printPreviewBatchButtons${i}" class="col-md-1 justify-content-end" style="margin-left: auto; width: auto;">
                                 </div>
@@ -236,10 +242,14 @@
 
         let cardAtIndex = document.querySelector(`[data-card-index="${index}"]`)
         let cardBodyAtIndex = cardAtIndex.children[0];
-        cardBodyAtIndex.children[0].children[1].textContent = `Asset ${newIndex + 1}`;
+        cardBodyAtIndex.children[1].children[0].children[0].children[0].nextSibling.textContent = ` ${newIndex + 1}`;
+        cardBodyAtIndex.children[0].children[0].children[0].textContent = `Asset ${newIndex + 1}:`;
+        cardBodyAtIndex.children[0].children[0].children[0].ariaLabel = cardBodyAtIndex.children[0].children[0].children[0].ariaLabel.replace(/\s\d+\:/, ` ${newIndex + 1}:`);
         let cardAtTarget = document.querySelector(`[data-card-index="${newIndex}"]`)
         let cardBodyAtTarget = cardAtTarget.children[0];
-        cardBodyAtTarget.children[0].children[1].textContent = `Asset ${index - 0 + 1}`;
+        cardBodyAtTarget.children[1].children[0].children[0].children[0].nextSibling.textContent = ` ${index - 0 + 1}`;
+        cardBodyAtTarget.children[0].children[0].children[0].textContent = `Asset ${index - 0 + 1}:`;
+        cardBodyAtTarget.children[0].children[0].children[0].ariaLabel = cardBodyAtTarget.children[0].children[0].children[0].ariaLabel.replace(/\s\d+\:/, ` ${newIndex + 1}:`);
         cardAtIndex.insertBefore(cardBodyAtTarget, null);
         cardAtTarget.insertBefore(cardBodyAtIndex, null);
         
diff --git a/src/Views/Shared/_BatchButton.cshtml b/src/Views/Shared/_BatchButton.cshtml
index 5fe2fdc..91504c4 100644
--- a/src/Views/Shared/_BatchButton.cshtml
+++ b/src/Views/Shared/_BatchButton.cshtml
@@ -1,8 +1,11 @@
+@using Microsoft.AspNetCore.Mvc.Localization
+@inject IViewLocalizer T
+
 <button id="openPrintModal" 
         class="btn btn-primary position-fixed bottom-0 start-0 m-4"
         style="width: 3rem; height: 3rem;z-index: 1000;"
         data-bs-toggle="modal" 
         data-bs-target="#printModal"
-        title="Open Print Page">
+        title="@T["Open Print Page"]">
     🖨️
 </button>
\ No newline at end of file
diff --git a/src/wwwroot/js/site.js b/src/wwwroot/js/site.js
index a30dea4..0fd7bda 100644
--- a/src/wwwroot/js/site.js
+++ b/src/wwwroot/js/site.js
@@ -2,6 +2,16 @@
     const container = document.createElement('div');
     container.id = 'toastContainer';
     container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+    container.setAttribute("aria-live", "polite");
+    container.setAttribute("aria-atomic", "true");
+
+    const liveRegion = document.createElement('div');
+    liveRegion.id = 'toastLiveRegion';
+    liveRegion.className = 'visually-hidden';
+    liveRegion.setAttribute('aria-live', 'assertive');
+    liveRegion.setAttribute('aria-atomic', 'true');
+    container.appendChild(liveRegion);
+
     document.body.appendChild(container);
     return container;
 }
@@ -16,7 +26,7 @@ function showToast(message, type) {
     toast.innerHTML = `
         <div class="d-flex">
             <div class="toast-body">${message}</div>
-            <button type="button" class="btn-close${useDarkElements ? "" : "-white"} me-2 m-auto"${useDarkElements ? ' style="filter: unset;"' : ""} data-bs-dismiss="toast" aria-label="${window.appTranslations.closeAlert}"></button>
+            <button type="button" class="btn-close${useDarkElements ? "" : " btn-close-white"} me-2 m-auto"${useDarkElements ? ' style="filter: unset;"' : ""} data-bs-dismiss="toast" aria-label="${window.appTranslations.closeAlert}"></button>
         </div>
     `;
     if (useDarkElements) {
@@ -24,7 +34,14 @@ function showToast(message, type) {
         toast.classList.add("text-dark");
     }
     toastContainer.appendChild(toast);
-    const bsToast = new bootstrap.Toast(toast, { delay: 5000 });
+
+    const liveRegion = document.getElementById('toastLiveRegion');
+    if (liveRegion) {
+        liveRegion.textContent = '';
+        setTimeout(() => liveRegion.textContent = message, 500);
+    }
+
+    const bsToast = new bootstrap.Toast(toast, { delay: 10000 });
     bsToast.show();
     toast.addEventListener('hidden.bs.toast', () => toast.remove());
 }