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

client/src/components/Map/components/Block.js

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

client/src/components/Map/components/SuperBlock.js

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

client/src/components/Map/map.css

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