From 8161f4d9a024c9a203f3a587fc15d01061e5f5c9 Mon Sep 17 00:00:00 2001
From: Matthew Piatetsky <mpiatetsky@edx.org>
Date: Mon, 21 Dec 2020 12:13:27 -0500
Subject: [PATCH] fix x button interactivity (#327)

---
 src/courseware/course/sequence/Sequence.jsx | 39 ++++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 7e68a288..606c5091 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -47,21 +47,33 @@ function REV1512Flyover({ toggleREV1512Flyover }) {
         }}
       >
         <span className="rev-1512-notification-span">Notifications</span>
-        <svg
-          onClick={toggleREV1512Flyover}
-          className="hideFlyover"
-          width="14"
-          height="14"
-          viewBox="0 0 14 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          style={{
-            float: 'right',
-            marginTop: '5.5px',
+        <span
+          onClick={() => {
+            toggleREV1512Flyover();
           }}
+          className="hideFlyover"
+          onKeyPress={(event) => {
+            if (event.key === 'Enter') {
+              toggleREV1512Flyover();
+            }
+          }}
+          role="button"
+          tabIndex={0}
         >
-          <path d="M9.60625 7L13.5152 3.09102C13.9949 2.61133 13.9949 1.83359 13.5152 1.35352L12.6465 0.484766C12.1668 0.00507814 11.3891 0.00507814 10.909 0.484766L7 4.39375L3.09102 0.484766C2.61133 0.00507814 1.83359 0.00507814 1.35352 0.484766L0.484766 1.35352C0.00507814 1.8332 0.00507814 2.61094 0.484766 3.09102L4.39375 7L0.484766 10.909C0.00507814 11.3887 0.00507814 12.1664 0.484766 12.6465L1.35352 13.5152C1.8332 13.9949 2.61133 13.9949 3.09102 13.5152L7 9.60625L10.909 13.5152C11.3887 13.9949 12.1668 13.9949 12.6465 13.5152L13.5152 12.6465C13.9949 12.1668 13.9949 11.3891 13.5152 10.909L9.60625 7Z" fill="black" />
-        </svg>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{
+              float: 'right',
+              marginTop: '5.5px',
+            }}
+          >
+            <path d="M9.60625 7L13.5152 3.09102C13.9949 2.61133 13.9949 1.83359 13.5152 1.35352L12.6465 0.484766C12.1668 0.00507814 11.3891 0.00507814 10.909 0.484766L7 4.39375L3.09102 0.484766C2.61133 0.00507814 1.83359 0.00507814 1.35352 0.484766L0.484766 1.35352C0.00507814 1.8332 0.00507814 2.61094 0.484766 3.09102L4.39375 7L0.484766 10.909C0.00507814 11.3887 0.00507814 12.1664 0.484766 12.6465L1.35352 13.5152C1.8332 13.9949 2.61133 13.9949 3.09102 13.5152L7 9.60625L10.909 13.5152C11.3887 13.9949 12.1668 13.9949 12.6465 13.5152L13.5152 12.6465C13.9949 12.1668 13.9949 11.3891 13.5152 10.909L9.60625 7Z" fill="black" />
+          </svg>
+        </span>
         <div
           className="rev-1512-notification-block"
           style={{
@@ -118,6 +130,7 @@ function REV1512FlyoverMobile({ toggleREV1512Flyover }) {
           tabIndex={0}
           style={{
             color: '#00262B',
+            cursor: 'pointer',
           }}
         >
           <FontAwesomeIcon