From c86ea2b4a980eaf5768ea76d91c75723af1d7fba Mon Sep 17 00:00:00 2001
From: Bruce Blaser <bbsmooth@gmail.com>
Date: Thu, 20 Mar 2025 13:16:20 -0700
Subject: [PATCH] fix(a11y): separate disclosure content from toggle button
 (#59286)

---
 .../Introduction/components/block-header.tsx  | 56 ++++++++++---------
 client/src/templates/Introduction/intro.css   |  4 ++
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/client/src/templates/Introduction/components/block-header.tsx b/client/src/templates/Introduction/components/block-header.tsx
index 408e2b7f223..8f23186107c 100644
--- a/client/src/templates/Introduction/components/block-header.tsx
+++ b/client/src/templates/Introduction/components/block-header.tsx
@@ -34,35 +34,37 @@ function BlockHeader({
   blockIntroArr
 }: BlockHeaderProps): JSX.Element {
   return (
-    <h3 className='block-grid-title'>
-      <button
-        aria-expanded={isExpanded ? 'true' : 'false'}
-        aria-controls={`${blockDashed}-panel`}
-        className='block-header'
-        onClick={handleClick}
-      >
-        <span className='block-header-button-text map-title'>
-          <CheckMark isCompleted={isCompleted} />
-          {blockType && <BlockLabel blockType={blockType} />}
-          <span>
-            {blockTitle}
-            <span className='sr-only'>, {courseCompletionStatus}</span>
+    <>
+      <h3 className='block-grid-title'>
+        <button
+          aria-expanded={isExpanded ? 'true' : 'false'}
+          aria-controls={`${blockDashed}-panel`}
+          className='block-header'
+          onClick={handleClick}
+        >
+          <span className='block-header-button-text map-title'>
+            <CheckMark isCompleted={isCompleted} />
+            {blockType && <BlockLabel blockType={blockType} />}
+            <span>
+              {blockTitle}
+              <span className='sr-only'>, {courseCompletionStatus}</span>
+            </span>
+            <DropDown />
           </span>
-          <DropDown />
-        </span>
-        {isExpanded && !isEmpty(blockIntroArr) && (
-          <BlockIntros intros={blockIntroArr as string[]} />
-        )}
-        {!isExpanded && !isCompleted && completedCount > 0 && (
-          <div aria-hidden='true' className='progress-wrapper'>
-            <div>
-              <ProgressBar now={percentageCompleted} />
+          {!isExpanded && !isCompleted && completedCount > 0 && (
+            <div aria-hidden='true' className='progress-wrapper'>
+              <div>
+                <ProgressBar now={percentageCompleted} />
+              </div>
+              <span>{`${percentageCompleted}%`}</span>
             </div>
-            <span>{`${percentageCompleted}%`}</span>
-          </div>
-        )}
-      </button>
-    </h3>
+          )}
+        </button>
+      </h3>
+      {isExpanded && !isEmpty(blockIntroArr) && (
+        <BlockIntros intros={blockIntroArr as string[]} />
+      )}
+    </>
   );
 }
 
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 02ff72241c2..c4a5718002a 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -337,6 +337,10 @@ button.map-title {
   margin-bottom: 0;
 }
 
+.block-grid .block-description {
+  padding: 18px 15px;
+}
+
 a.map-grid-item.challenge-completed {
   background: var(--highlight-background);
   position: relative;