Added keyboard support for opening misconception description

Author: Stefano Malagò

frontend/src/components/tagger_component/MisconceptionInfoButton.tsx

@@ -1,9 +1,10 @@
-import React, {useState} from "react"
+import React, {useRef, useState} from "react"
 import HelpIcon from "@material-ui/icons/Help";
 import {Button, Popover} from "@material-ui/core";
 import {createStyles, makeStyles} from "@material-ui/core/styles";
 import stringEquals from "../../util/StringEquals";
 import NoMisconception from "../../util/NoMisconception";
+import withKeyboard from "../../hooks/withKeyboard";
 
 const useStyles = makeStyles(() =>
     createStyles({
@@ -16,12 +17,14 @@ const useStyles = makeStyles(() =>
 interface Input {
     handled_element: number,
     tags: (string | null)[],
+    keyboardIndex?: string
 }
 
-function MisconceptionInfoButton({tags, handled_element}: Input){
-
+function MisconceptionInfoButton({tags, handled_element, keyboardIndex}: Input) {
     const classes = useStyles()
 
+    const ref = useRef<HTMLButtonElement>(null)
+
     const tag: (string | null) = tags[handled_element]
 
     const should_display = () => {
@@ -43,14 +46,20 @@ function MisconceptionInfoButton({tags, handled_element}: Input){
     const id = open ? "simple-popover" : undefined;
     // end popup stuff
 
+    withKeyboard((command => {
+        if (keyboardIndex != undefined && (command == '' + keyboardIndex + 'h')) {
+            ref.current?.click()
+        }
+    }))
+
     return (
         !should_display() ?
             <>
                 <Button disabled={true} className={classes.root}>
                 </Button>
             </> :
             <>
-                <Button title={"Definition"} onClick={handle_click_popup} className={classes.root}>
+                <Button title={"Definition"} ref={ref} onClick={handle_click_popup} className={classes.root}>
                     <HelpIcon/>
                 </Button>
                 <Popover

frontend/src/components/v2/tagger_component/StaticSelectorView.tsx

@@ -124,6 +124,7 @@ function StaticSelectorView({
             <MisconceptionInfoButton
                 handled_element={0}
                 tags={[misconception]}
+                keyboardIndex={'' + handledIndex}
             />
         </>
     )