From fbd036347d4ee108beb53ee153ef6892c879fd54 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 2 Jul 2024 21:34:02 -0700
Subject: [PATCH] fix(a11y): associate block content panel with the header
 (#55366)

---
 .../templates/Introduction/components/block.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index 6c361c5c6d7..894eaac4a94 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -250,6 +250,7 @@ class Block extends Component<BlockProps> {
             <h3 className='block-grid-title'>
               <button
                 aria-expanded={isExpanded ? 'true' : 'false'}
+                aria-controls={`${blockDashedName}-panel`}
                 className='block-header'
                 onClick={() => {
                   this.handleBlockClick();
@@ -281,14 +282,16 @@ class Block extends Component<BlockProps> {
                 </Link>
               </div>
             )}
-            {isExpanded && <BlockIntros intros={blockIntroArr} />}
             {isExpanded && (
-              <Challenges
-                challengesWithCompleted={challengesWithCompleted}
-                isProjectBlock={isProjectBlock}
-                isGridMap={true}
-                blockTitle={blockTitle}
-              />
+              <div id={`${blockDashedName}-panel`}>
+                <BlockIntros intros={blockIntroArr} />
+                <Challenges
+                  challengesWithCompleted={challengesWithCompleted}
+                  isProjectBlock={isProjectBlock}
+                  isGridMap={true}
+                  blockTitle={blockTitle}
+                />
+              </div>
             )}
           </div>
         </ScrollableAnchor>