Various A11y Bugfixes

src/Content/classicDesktopFrame.css

@@ -288,7 +288,7 @@ button[aria-expanded="false"] .collapsibleSwitch::after {
     box-sizing: border-box;
 }
 
-#mhaFooter {
+#feedbackLink {
     float: right;
 }
 

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

src/Pages/mha.html

@@ -13,7 +13,7 @@
         <h1 id="title">Message Header Analyzer</h1>
     </header>
     <main id="SectionContent">
-        <section aria-labelledby="inputSection">
+        <section role="region" aria-label="Input Headers">
             <h2 id="inputSection" class="sr-only">Input Headers</h2>
             <textarea id="inputHeaders" autofocus="autofocus" placeholder="Paste headers here." required="required"
                 rows="15"></textarea>
@@ -35,14 +35,14 @@ <h2 id="inputSection" class="sr-only">Input Headers</h2>
                 <div class="status-overlay status-overlay-inline" id="copyStatusMessage" role="status" aria-live="polite">
                 </div>
             </fluent-button>
-            <footer id="mhaFooter">
+            <div id="feedbackLink">
                 <a href="https://github.com/microsoft/MHA" target="_blank" rel="noopener">Submit feedback on github</a>
-            </footer>
+            </div>
         </section>
 
         <hr id="lineBreak" />
 
-        <section id="response" class="hiddenElement" aria-labelledby="resultsSection">
+        <section id="response" class="hiddenElement" role="region" aria-label="Analysis Results">
             <h2 id="resultsSection" class="sr-only">Analysis Results</h2>
             <div class="responsePane">
                 <div id="status"></div>

src/Pages/uitoggle.html

@@ -23,7 +23,6 @@
 
         <!-- Status message overlay positioned as true overlay -->
         <div id="statusMessage" class="status-overlay status-overlay-fixed" role="status" aria-live="polite">
-            Copied to clipboard!
         </div>
 
         <section class="frame-row">

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

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