From d9bf87d57d04de80393504c84d6b57e58dd8f2f0 Mon Sep 17 00:00:00 2001
From: Valeriy S <ValeraS@users.noreply.github.com>
Date: Wed, 6 Mar 2019 11:31:31 +0300
Subject: [PATCH] fix(ui): make possible use curriculum map with keyboard

---
 client/src/components/Map/components/Block.js      | 8 ++++++--
 client/src/components/Map/components/SuperBlock.js | 8 ++++++--
 client/src/components/Map/map.css                  | 4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Map/components/Block.js b/client/src/components/Map/components/Block.js
index f84a8312c7..b5e9bbce38 100644
--- a/client/src/components/Map/components/Block.js
+++ b/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)
diff --git a/client/src/components/Map/components/SuperBlock.js b/client/src/components/Map/components/SuperBlock.js
index 1fbe29b111..47b51dd708 100644
--- a/client/src/components/Map/components/SuperBlock.js
+++ b/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>
     );
diff --git a/client/src/components/Map/map.css b/client/src/components/Map/map.css
index 287078d5ea..6d49d08253 100644
--- a/client/src/components/Map/map.css
+++ b/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 {