From a8af7aad06fa01dbecd1266d78ebddf21f5c0b36 Mon Sep 17 00:00:00 2001
From: navya9singh <navyasingh@microsoft.com>
Date: Sun, 8 Mar 2026 20:51:37 -0700
Subject: [PATCH] fix: add aria-live to feedback containers for screen reader
 announcement (Bug 2737342)

Add role=status and aria-live=polite to both the sidebar (#like-dislike-subnav)
and popup (#page-helpful-popup) feedback containers so screen readers announce
the 'Thanks for the feedback' message when users click Like/Dislike.

Fixes MAS 1.3.1 - Info and Relationships accessibility violation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 packages/typescriptlang-org/src/templates/documentation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/typescriptlang-org/src/templates/documentation.tsx b/packages/typescriptlang-org/src/templates/documentation.tsx
index 7ee2e7f76272..aeddecaacc82 100644
--- a/packages/typescriptlang-org/src/templates/documentation.tsx
+++ b/packages/typescriptlang-org/src/templates/documentation.tsx
@@ -91,7 +91,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
       <section id="doc-layout" >
         <SidebarToggleButton />
 
-        <div className="page-popup" id="page-helpful-popup" style={{ opacity: 0, display: "none" }}>
+        <div className="page-popup" id="page-helpful-popup" role="status" aria-live="polite" style={{ opacity: 0, display: "none" }}>
           <p>Was this page helpful?</p>
           <div>
             <button className="first" id="like-button-popup" title="Like this page"><LikeUnfilledSVG /></button>
@@ -161,7 +161,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
                     <MarkdownHeadingTree tree={headerListToTree(sidebarHeaders)} className="handbook-on-this-page-section-list" slug={slug} />
                   </>
                   }
-                  <div id="like-dislike-subnav">
+                  <div id="like-dislike-subnav" role="status" aria-live="polite">
                     <h5>{i("handb_like_dislike_title")}</h5>
                     <div>
                       <button title="Like this page" id="like-button"><LikeUnfilledSVG /> {i("handb_like_desc")}</button>