Improved toast accessibility, improved batch accessibility

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>

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>

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);
         

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>

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());
 }