diff --git a/src/Content/classicDesktopFrame.css b/src/Content/classicDesktopFrame.css
index 424f3e55..5216e202 100644
--- a/src/Content/classicDesktopFrame.css
+++ b/src/Content/classicDesktopFrame.css
@@ -288,7 +288,7 @@ button[aria-expanded="false"] .collapsibleSwitch::after {
box-sizing: border-box;
}
-#mhaFooter {
+#feedbackLink {
float: right;
}
diff --git a/src/Content/fluentCommon.css b/src/Content/fluentCommon.css
index b924837f..a92b0aca 100644
--- a/src/Content/fluentCommon.css
+++ b/src/Content/fluentCommon.css
@@ -269,7 +269,7 @@ fluent-radio:focus-visible {
/* Common Status Overlay Styles for Copy Feedback */
/* Used by both uitoggle and standalone MHA pages */
.status-overlay {
- display: none;
+ display: block;
color: var(--success-green); /* Dark green text for contrast */
font-size: 14px;
font-weight: 500;
@@ -288,7 +288,6 @@ fluent-radio:focus-visible {
}
.status-overlay.show {
- display: block;
opacity: 1;
transform: translateX(0);
}
\ No newline at end of file
diff --git a/src/Pages/mha.html b/src/Pages/mha.html
index 1b2d74b1..2dc3d6a9 100644
--- a/src/Pages/mha.html
+++ b/src/Pages/mha.html
@@ -13,7 +13,7 @@
Message Header Analyzer
-
+
-
+
Analysis Results
diff --git a/src/Pages/uitoggle.html b/src/Pages/uitoggle.html
index ddf821e6..d6daec2c 100644
--- a/src/Pages/uitoggle.html
+++ b/src/Pages/uitoggle.html
@@ -23,7 +23,6 @@
- Copied to clipboard!
diff --git a/src/Scripts/ParentFrame.ts b/src/Scripts/ParentFrame.ts
index 44871fc4..b712e79b 100644
--- a/src/Scripts/ParentFrame.ts
+++ b/src/Scripts/ParentFrame.ts
@@ -2,6 +2,7 @@
import { DeferredError } from "./DeferredError";
import { diagnostics } from "./Diag";
import { Errors } from "./Errors";
+import { mhaStrings } from "./mhaStrings";
import { Poster } from "./Poster";
import { Strings } from "./Strings";
import { TabNavigation } from "./TabNavigation";
@@ -340,11 +341,13 @@ export class ParentFrame {
// Show status message for accessibility
const statusMessage = document.getElementById("statusMessage");
if (statusMessage) {
+ statusMessage.textContent = mhaStrings.mhaCopied;
statusMessage.classList.add("show");
// Hide after 2 seconds
setTimeout(() => {
statusMessage.classList.remove("show");
+ statusMessage.textContent = "";
}, 2000);
}
diff --git a/src/Scripts/ui/mha.ts b/src/Scripts/ui/mha.ts
index 837b47a8..eb168fca 100644
--- a/src/Scripts/ui/mha.ts
+++ b/src/Scripts/ui/mha.ts
@@ -58,6 +58,8 @@ function dismissAllStatusMessages() {
// Find all status overlay elements and hide them
document.querySelectorAll(".status-overlay-inline.show").forEach(element => {
element.classList.remove("show");
+ // Clear text content so next announcement is detected as a change
+ element.textContent = "";
});
}
@@ -74,6 +76,7 @@ function showStatusMessage(elementId: string, message: string, duration = 2000)
// Hide after specified duration and track the timeout
const timeoutId = setTimeout(() => {
statusElement.classList.remove("show");
+ statusElement.textContent = "";
statusMessageTimeouts.delete(elementId);
}, duration);
@@ -114,9 +117,13 @@ function clear() {
DomUtils.setValue("#inputHeaders", "");
table.rebuildSections(null);
- document.getElementById("inputHeaders")?.focus();
showStatusMessage("clearStatusMessage", mhaStrings.mhaCleared);
+
+ // Delay focus to allow screen reader to fully announce status message
+ setTimeout(() => {
+ document.getElementById("inputHeaders")?.focus();
+ }, 1000);
}
function copy() {