[#319] Implement icon display on keyboard focus

kbss-cvut · Nov 1, 2024 · 4f25d94 · 4f25d94
1 parent 6abc8e8
commit 4f25d94
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -121,11 +121,11 @@ export default class Question extends React.Component {
     }
   };
 
-  _onMouseEnterHandler = () => {
+  _onEnterHandler = () => {
     this.setState({ showIcon: true });
   };
 
-  _onMouseLeaveHandler = () => {
+  _onLeaveHandler = () => {
     this.setState({ showIcon: false });
   };
 
@@ -222,8 +222,10 @@ export default class Question extends React.Component {
                 as={Card.Header}
                 onClick={this._toggleCollapse}
                 className={this._getHeaderClassName()}
-                onMouseEnter={this._onMouseEnterHandler}
-                onMouseLeave={this._onMouseLeaveHandler}
+                onMouseEnter={this._onEnterHandler}
+                onMouseLeave={this._onLeaveHandler}
+                onFocus={this._onEnterHandler}
+                onBlur={this._onLeaveHandler}
               >
                 <h6 className="d-inline" id={question["@id"]}>
                   {collapsible &&
@@ -352,8 +354,10 @@ export default class Question extends React.Component {
           key={"row-item-" + i}
           className={cls}
           id={question["@id"]}
-          onMouseEnter={this._onMouseEnterHandler}
-          onMouseLeave={this._onMouseLeaveHandler}
+          onMouseEnter={this._onEnterHandler}
+          onMouseLeave={this._onLeaveHandler}
+          onFocus={this._onEnterHandler}
+          onBlur={this._onLeaveHandler}
         >
           <div className="answer-content" style={this._getAnswerWidthStyle()}>
             <Answer