Fix: Added is-highlighted class (#187)

Author: oliverfoster

templates/gmcq.jsx

@@ -23,7 +23,7 @@ export default function Gmcq(props) {
     body,
     instruction,
     ariaQuestion,
-    onKeyPress,
+    onKeyDown,
     onItemSelect,
     onItemFocus,
     onItemBlur
@@ -53,7 +53,7 @@ export default function Gmcq(props) {
         aria-label={ariaQuestion || null}
       >
 
-        {props._items.map(({ text, altText, _index, _isActive, _shouldBeSelected, _graphic }, index) =>
+        {props._items.map(({ text, altText, _index, _isActive, _isHighlighted, _shouldBeSelected, _graphic }, index) =>
 
           <div
             className={classes([
@@ -79,7 +79,7 @@ export default function Gmcq(props) {
                 `${a11y.normalize(altText || text)} ${_graphic?.alt || ''}` :
                 `${_shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect}, ${_isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${a11y.normalize(altText || text)} ${_graphic?.alt || ''}`}
               data-adapt-index={_index}
-              onKeyPress={onKeyPress}
+              onKeyDown={onKeyDown}
               onChange={onItemSelect}
               onFocus={onItemFocus}
               onBlur={onItemBlur}
@@ -91,6 +91,7 @@ export default function Gmcq(props) {
                 'js-item-label',
                 'u-no-select',
                 !_isEnabled && 'is-disabled',
+                _isHighlighted && 'is-highlighted',
                 (_isCorrectAnswerShown ? _shouldBeSelected : _isActive) && 'is-selected'
               ])}
               aria-hidden={true}