From d1d13f933f2b12062d9c1122095b82b4c7330546 Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Mon, 29 Jun 2026 11:21:11 -0700
Subject: [PATCH 1/2] fix: add role=button to Back and Show Sample Code anchor
 elements on homepage

The 'Back' button in AboveTheFold.tsx and the 'Show code sample' button in
EditorExamples.tsx are <a href='#'> elements that trigger JS behavior without
navigating. Screen readers announced them as role=link, which is incorrect per
WCAG 4.1.2 (Name, Role, Value).

Added role='button' to both elements so assistive technologies correctly
identify them as interactive controls. This fixes accessibility bug 2492041
(A11y_TypeScript_HomePage_AI4W).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../typescriptlang-org/src/components/index/AboveTheFold.tsx    | 2 +-
 .../typescriptlang-org/src/components/index/EditorExamples.tsx  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx b/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
index 548c1dbafbd1..788aa05333fc 100644
--- a/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
+++ b/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
@@ -122,7 +122,7 @@ export const AboveTheFold = () => {
     const Content = window.innerWidth < 600 ? CTAHeadlineMobile : CTAHeadlines
     return (
       <div className="cta">
-        <a className="transparent-button" onClick={() => setShowCTALinks(false)}  href="#">
+        <a className="transparent-button" onClick={() => setShowCTALinks(false)} href="#" role="button">
           <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M20.25 7.75L1.75 7.75M1.75 7.75L7.75 1.25M1.75 7.75L7.75 13.25" stroke="white" strokeWidth="2" />
           </svg>
diff --git a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
index 48c23c96ab51..ce98099f7cd5 100644
--- a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
+++ b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
@@ -75,6 +75,7 @@ export const EditorExamples = () => {
         href="#"
         onClick={next}
         aria-label="Show code sample"
+        role="button"
       >
         <svg
           width="11"

From 46fffe650c86440637bf7f2c33abe9c16f6ebcdd Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Mon, 29 Jun 2026 12:50:24 -0700
Subject: [PATCH 2/2] fix: add role=button to Try TypeScript Now fluid button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 'Try TypeScript Now' (index_2_cta_install) FluidButton calls
e.preventDefault() and shows the CTA links panel — it does not navigate.
Added role prop to FluidButton and passed role='button' at this call site.

Part of bug 2492041 (A11y_TypeScript_HomePage_AI4W, MAS 4.1.2).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../typescriptlang-org/src/components/index/AboveTheFold.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx b/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
index 788aa05333fc..939c753cf078 100644
--- a/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
+++ b/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
@@ -9,8 +9,8 @@ const Row = (props: { children: any, className?: string }) => <div className={[p
 const Col = (props: { children: any, className?: string }) => <div className={[props.className, "col1"].join(" ")}>{props.children}</div>
 const Col2 = (props: { children: any }) => <div className="col2">{props.children}</div>
 
-const FluidButton = (props: { href?: string, onClick?: any, title: string, subtitle?: string, icon: JSX.Element, className?: string }) => (
-  <a className={"fluid-button " + props.className || ""} href={props.href} onClick={props.onClick}>
+const FluidButton = (props: { href?: string, onClick?: any, title: string, subtitle?: string, icon: JSX.Element, className?: string, role?: string }) => (
+  <a className={"fluid-button " + props.className || ""} href={props.href} onClick={props.onClick} role={props.role}>
     <div>
       <div className="fluid-button-title">{props.title}</div>
       <div className="fluid-button-subtitle">{props.subtitle}</div>
@@ -43,6 +43,7 @@ export const AboveTheFold = () => {
             subtitle={i("index_2_cta_install_subtitle")}
             href="/download"
             onClick={onclick}
+            role="button"
             icon={
               <svg width="21" height="5" viewBox="0 0 21 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect x="0.5" y="0.5" width="4" height="4" stroke="black" />