gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(ui): make possible use curriculum map with keyboard

Browse Source
This commit is contained in:
Valeriy S
2019-03-06 11:31:31 +03:00
committed by mrugesh mohapatra
parent 4d7114b77f
commit d9bf87d57d
3 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/Map/components/Block.js
View File

@ -129,7 +129,11 @@ export class Block extends Component {
}); });
return ( return (
<li className={`block ${isExpanded ? 'open' : ''}`}> <li className={`block ${isExpanded ? 'open' : ''}`}>
<div className='map-title' onClick={this.handleBlockClick}> <button
aria-expanded={isExpanded}
className='map-title'
onClick={this.handleBlockClick}
>
<Caret /> <Caret />
<h4>{blockNameify(blockDashedName)}</h4> <h4>{blockNameify(blockDashedName)}</h4>
<div className='map-title-completed'> <div className='map-title-completed'>
@ -140,7 +144,7 @@ export class Block extends Component {
</span> </span>
<span>{`${completedCount}/${challengesWithCompleted.length}`}</span> <span>{`${completedCount}/${challengesWithCompleted.length}`}</span>
</div> </div>
</div> </button>
<ul> <ul>
{isExpanded {isExpanded
? this.renderChallenges(intro, challengesWithCompleted) ? this.renderChallenges(intro, challengesWithCompleted)

8
client/src/components/Map/components/SuperBlock.js
View File

@ -89,10 +89,14 @@ export class SuperBlock extends Component {
const { superBlock, isExpanded, toggleSuperBlock } = this.props; const { superBlock, isExpanded, toggleSuperBlock } = this.props;
return ( return (
<li className={`superblock ${isExpanded ? 'open' : ''}`}> <li className={`superblock ${isExpanded ? 'open' : ''}`}>
<div className='map-title' onClick={() => toggleSuperBlock(superBlock)}> <button
aria-expanded={isExpanded}
className='map-title'
onClick={() => toggleSuperBlock(superBlock)}
>
<Caret /> <Caret />
<h4>{createSuperBlockTitle(superBlock)}</h4> <h4>{createSuperBlockTitle(superBlock)}</h4>
</div> </button>
{isExpanded ? this.renderBlock(superBlock) : null} {isExpanded ? this.renderBlock(superBlock) : null}
</li> </li>
); );

4
client/src/components/Map/map.css
View File

@ -17,10 +17,12 @@
.map-title { .map-title {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
padding-top: 10px; padding-top: 10px;
padding-bottom: 20px; padding-bottom: 20px;
border: none;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
background-color: transparent;
width: 100%;
} }
.map-title > h4 { .map-title > h4 {