From bcff70d48f8dace1721c54a48e7e69f1dabde368 Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Wed, 21 Oct 2026 16:37:46 -0700
Subject: [PATCH] Fix missing main headings on Tools and Playground

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../typescriptlang-org/src/templates/pages/tools.tsx  |  1 +
 packages/typescriptlang-org/src/templates/play.scss   | 11 +++++++++++
 packages/typescriptlang-org/src/templates/play.tsx    |  1 +
 3 files changed, 13 insertions(+)

diff --git a/packages/typescriptlang-org/src/templates/pages/tools.tsx b/packages/typescriptlang-org/src/templates/pages/tools.tsx
index 761b3fc62f7e..d06a19cf4705 100644
--- a/packages/typescriptlang-org/src/templates/pages/tools.tsx
+++ b/packages/typescriptlang-org/src/templates/pages/tools.tsx
@@ -19,6 +19,7 @@ const Index: React.FC<Props> = (props) => {
 
   return <Layout title="Reference Tools" description="Online tooling to help you understand TypeScript" lang={props.pageContext.lang}>
     <div className="raised main-content-block">
+      <h1>Reference Tools</h1>
       <Row>
         <Col>
           <a className="cropper" href="/play">
diff --git a/packages/typescriptlang-org/src/templates/play.scss b/packages/typescriptlang-org/src/templates/play.scss
index 4e0d1a51956b..c46e2e074cca 100644
--- a/packages/typescriptlang-org/src/templates/play.scss
+++ b/packages/typescriptlang-org/src/templates/play.scss
@@ -1242,3 +1242,14 @@ input.good {
 .monaco-list {
   background-color: var(--background-color);
 }
+.playground-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/packages/typescriptlang-org/src/templates/play.tsx b/packages/typescriptlang-org/src/templates/play.tsx
index d22b956618ad..d16385be233c 100644
--- a/packages/typescriptlang-org/src/templates/play.tsx
+++ b/packages/typescriptlang-org/src/templates/play.tsx
@@ -226,6 +226,7 @@ const Play: React.FC<Props> = (props) => {
 
   return (
     <Layout title={i("head_playground_title")} description={i("head_playground_description")} lang={props.pageContext.lang}>
+      <h1 className="playground-title">{i("head_playground_title")}</h1>
       {/** This is the top nav, which is outside of the editor  */}
       <nav className="navbar-sub">
         <ul className="nav">