jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-08 22:00:25 -04:00
Code Issues Projects Releases Wiki Activity

fix(a11y): separate disclosure content from toggle button (#59286)

Browse Source
This commit is contained in:
Bruce Blaser
2025-03-20 13:16:20 -07:00
committed by GitHub
parent 173d87f1fa
commit c86ea2b4a9
2 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/templates/Introduction/components/block-header.tsx
View File

@@ -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[]} />
)}
</>
);
}

4
client/src/templates/Introduction/intro.css
View File

@@ -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;