From 51b6623f6ab3229fe77966ac0691f5697d119feb Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Sat, 27 Jun 2026 23:32:36 -0700
Subject: [PATCH] fix: use semantic button elements for in-page actions (a11y
 MAS 4.1.2)

Interactive controls that trigger in-page JavaScript actions (not navigation)
were implemented as <a> elements, which get implicit role='link'. Screen readers
announced them as links, misleading users expecting button behavior.

Fixes:
- EditorExamples.tsx: 'Show Sample Code' <a href='#' onClick> -> <button>
- AboveTheFold.tsx: 'Back' <a href='#' onClick> -> <button>
- AboveTheFold.tsx: 'Try TypeScript Now' FluidButton gets role='button' since
  its onClick calls e.preventDefault() (progressive enhancement pattern)
- index.scss: Add button resets (border:none, background:none, font-family/size
  inherit) to flat-button mixin and .transparent-button so <button> elements
  visually match the previous <a> styling

Addresses AzDO bug 2614223 (MAS 4.1.2 - Name, Role, Value)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/index/AboveTheFold.tsx                | 9 +++++----
 .../src/components/index/EditorExamples.tsx              | 5 ++---
 .../src/templates/pages/css/index.scss                   | 6 ++++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx b/packages/typescriptlang-org/src/components/index/AboveTheFold.tsx
index 548c1dbafbd1..b17c6f88f7d4 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" />
@@ -122,11 +123,11 @@ export const AboveTheFold = () => {
     const Content = window.innerWidth < 600 ? CTAHeadlineMobile : CTAHeadlines
     return (
       <div className="cta">
-        <a className="transparent-button" onClick={() => setShowCTALinks(false)}  href="#">
+        <button className="transparent-button" onClick={() => setShowCTALinks(false)}>
           <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>
-          Back</a>
+          Back</button>
         <Content />
       </div>
     )
diff --git a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
index 48c23c96ab51..b45042fd63e2 100644
--- a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
+++ b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
@@ -70,9 +70,8 @@ export const EditorExamples = () => {
 
       </div>
 
-      <a
+      <button
         className="next-headline-button"
-        href="#"
         onClick={next}
         aria-label="Show code sample"
       >
@@ -85,7 +84,7 @@ export const EditorExamples = () => {
         >
           <path d="M0 14.5V0.5L10.5 7L0 14.5Z" />
         </svg>
-      </a>
+      </button>
     </div>
   );
 };
diff --git a/packages/typescriptlang-org/src/templates/pages/css/index.scss b/packages/typescriptlang-org/src/templates/pages/css/index.scss
index 929591f5e180..f051164d7880 100644
--- a/packages/typescriptlang-org/src/templates/pages/css/index.scss
+++ b/packages/typescriptlang-org/src/templates/pages/css/index.scss
@@ -50,6 +50,9 @@ $headline-foreground-bg: white;
   padding: 1rem 1rem;
   text-decoration: none;
   cursor: pointer;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
 
   @media screen and (-ms-high-contrast: active) {
     border: 2px solid grey;
@@ -1281,6 +1284,9 @@ $headline-foreground-bg: white;
   width: 80px;
   padding: 10px;
   cursor: pointer;
+  background: none;
+  font-family: inherit;
+  font-size: inherit;
   svg {
     margin-right: 8px;
   }