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

-
+

Input Headers

@@ -35,14 +35,14 @@

Input Headers

- +

-
+

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() {