Merge pull request #2665 from pie-framework/develop

merge

Author: CarlaCostea

packages/drag-in-the-blank/controller/src/__tests__/index.test.js

@@ -52,36 +52,36 @@ describe('controller', () => {
     describe('correctResponse behavior across modes', () => {
       it('does not include correctResponse in gather mode', async () => {
         const result = await model(question, {}, { mode: 'gather' });
-    
+
         expect(result.correctResponse).toBeUndefined();
       });
-    
+
       it('includes correctResponse in view mode for instructor', async () => {
         const result = await model(question, {}, { mode: 'view', role: 'instructor' });
-    
-        expect(result.correctResponse).toBeDefined();
+
+        expect(result.correctResponse).toBeUndefined();
       });
-    
+
       it('does not include correctResponse in view mode for student', async () => {
         const result = await model(question, {}, { mode: 'view', role: 'student' });
-    
+
         expect(result.correctResponse).toBeUndefined();
       });
-    
+
       it('includes correctResponse in evaluate mode', async () => {
         const result = await model(question, {}, { mode: 'evaluate' });
-    
+
         expect(result.correctResponse).toBeDefined();
       });
-    
+
       it('ensures correctResponse is explicitly undefined when not in evaluate mode or instructor view', async () => {
         const gatherResult = await model(question, {}, { mode: 'gather' });
         const viewStudentResult = await model(question, {}, { mode: 'view', role: 'student' });
-    
+
         expect(gatherResult.correctResponse).toBeUndefined();
         expect(viewStudentResult.correctResponse).toBeUndefined();
       });
-    });    
+    });
 
     const assertGather = (label, extra, session, expected) => {
       it(`'mode: gather, ${label}'`, async () => {
@@ -164,7 +164,7 @@ describe('controller', () => {
           disabled: true,
           feedback: {},
           responseCorrect: undefined,
-          correctResponse: q.correctResponse,
+          correctResponse: undefined,
           ...expected,
         });
       });

packages/drag-in-the-blank/controller/src/index.js

@@ -59,7 +59,7 @@ export function model(question, session, env, updateSession) {
       choices = await getShuffledChoices(choices, session, updateSession, 'id');
     }
 
-    const shouldIncludeCorrectResponse = env.mode === 'evaluate' || (env.role === 'instructor' && env.mode === 'view');
+    const shouldIncludeCorrectResponse = env.mode === 'evaluate';
 
     const out = {
       ...normalizedQuestion,
@@ -68,7 +68,7 @@ export function model(question, session, env, updateSession) {
       feedback,
       mode: env.mode,
       disabled: env.mode !== 'gather',
-      responseCorrect: env.mode === 'evaluate' ? getScore(normalizedQuestion, session) === 1 : undefined,
+      responseCorrect: shouldIncludeCorrectResponse ? getScore(normalizedQuestion, session) === 1 : undefined,
       correctResponse: shouldIncludeCorrectResponse ? normalizedQuestion.correctResponse : undefined,
     };
 

packages/ebsr/docs/demo/generate.js

@@ -2,7 +2,7 @@ exports.model = (id, element) => ({
   id,
   element,
   partA: {
-    choiceMode: 'radio',
+    choiceMode: 'checkbox',
     choices: [
       {
         value: 'yellow',
@@ -24,7 +24,7 @@ exports.model = (id, element) => ({
     promptEnabled: true,
   },
   partB: {
-    choiceMode: 'radio',
+    choiceMode: 'checkbox',
     choices: [
       {
         value: 'orange',

packages/image-cloze-association/controller/src/__tests__/index.test.js

@@ -546,32 +546,32 @@ describe('controller', () => {
   describe('validation property behavior across modes', () => {
     it('does not include validation in gather mode', async () => {
       const result = await model(question, {}, { mode: 'gather' });
-  
+
       expect(result.validation).toBeUndefined();
     });
-  
+
     it('does not include validation in view mode', async () => {
       const result = await model(question, {}, { mode: 'view' });
-  
+
       expect(result.validation).toBeUndefined();
     });
-  
+
     it('includes validation in evaluate mode and when instructor is in view mode', async () => {
       const evalResult = await model(question, {}, { mode: 'evaluate' });
       const viewResult = await model(question, {}, { mode: 'view', role: 'instructor' });
-    
+
       expect(evalResult.validation).toBeDefined();
-      expect(viewResult.validation).toBeDefined();
-    });    
-  
+      expect(viewResult.validation).toBeUndefined();
+    });
+
     it('ensures validation is explicitly undefined when not in evaluate or instructor view mode', async () => {
       const gatherResult = await model(question, {}, { mode: 'gather' });
       const studentViewResult = await model(question, {}, { mode: 'view', role: 'student' });
-    
+
       expect(gatherResult.validation).toBeUndefined();
       expect(studentViewResult.validation).toBeUndefined();
-    });    
-  });  
+    });
+  });
 
   describe('getPartialScore', () => {
     const returnPartialScore = (sess) => {

packages/image-cloze-association/controller/src/index.js

@@ -15,7 +15,7 @@ export const model = (question, session, env) => {
   const questionCamelized = camelizeKeys(questionNormalized);
 
   return new Promise((resolve) => {
-    const shouldIncludeCorrectResponse = env.mode === 'evaluate' || (env.role === 'instructor' && env.mode === 'view');
+    const shouldIncludeCorrectResponse = env.mode === 'evaluate';
 
     const out = {
       disabled: env.mode !== 'gather',

packages/multiple-choice/src/choice-input.jsx

@@ -121,7 +121,7 @@ const inputStyles = {
 };
 
 export const StyledCheckbox = withStyles(inputStyles)((props) => {
-  const { correctness, classes, checked, onChange, disabled, value, id } = props;
+  const { correctness, classes, checked, onChange, disabled, value, id, onKeyDown, inputRef } = props;
   const key = (k) => (correctness ? `${correctness}-${k}` : k);
 
   const resolved = {
@@ -135,7 +135,9 @@ export const StyledCheckbox = withStyles(inputStyles)((props) => {
   return (
     <Checkbox
       id={id}
+      inputRef={inputRef}
       aria-checked={checked}
+      onKeyDown={onKeyDown}
       focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}
       disableRipple
       {...miniProps}
@@ -150,7 +152,7 @@ export const StyledCheckbox = withStyles(inputStyles)((props) => {
 });
 
 export const StyledRadio = withStyles(inputStyles)((props) => {
-  const { correctness, classes, checked, onChange, disabled, value, id, tagName } = props;
+  const { correctness, classes, checked, onChange, disabled, value, id, tagName, inputRef } = props;
   const key = (k) => (correctness ? `${correctness}-${k}` : k);
 
   const resolved = {
@@ -164,6 +166,7 @@ export const StyledRadio = withStyles(inputStyles)((props) => {
   return (
     <Radio
       id={id}
+      inputRef={inputRef}
       aria-checked={checked}
       focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}
       disableRipple
@@ -193,6 +196,7 @@ export class ChoiceInput extends React.Component {
     value: PropTypes.string.isRequired,
     classes: PropTypes.object,
     className: PropTypes.string,
+    tagName: PropTypes.string,
     hideTick: PropTypes.bool,
     isEvaluateMode: PropTypes.bool,
     choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
@@ -220,6 +224,37 @@ export class ChoiceInput extends React.Component {
     return 'choice-' + (Math.random() * 10000).toFixed();
   }
 
+  handleKeyDown = (event) => {
+    const { choiceMode } = this.props;
+
+    if (choiceMode !== 'checkbox') return;
+
+    const isArrowDown = event.key === 'ArrowDown';
+    const isArrowUp = event.key === 'ArrowUp';
+
+    if (!isArrowDown && !isArrowUp) return;
+
+    event.preventDefault();
+
+    const currentEl = document.getElementById(this.choiceId);
+    if (!currentEl) return;
+
+    const fieldset = currentEl.closest('fieldset');
+    if (!fieldset) return;
+
+    const groupCheckboxes = Array.from(fieldset.querySelectorAll('input[type="checkbox"]'));
+
+    const currentIndex = groupCheckboxes.findIndex((el) => el === currentEl);
+    if (currentIndex === -1) return;
+
+    const nextIndex = isArrowDown ? currentIndex + 1 : currentIndex - 1;
+    const nextEl = groupCheckboxes[nextIndex];
+
+    if (nextEl) {
+      nextEl.focus();
+    }
+  };
+
   render() {
     const {
       choiceMode,
@@ -276,6 +311,7 @@ export class ChoiceInput extends React.Component {
       value,
       id: this.choiceId,
       onChange: this.onToggleChoice,
+      onKeyDown: this.handleKeyDown,
       'aria-describedby': this.descId,
     };
 
@@ -298,7 +334,7 @@ export class ChoiceInput extends React.Component {
     ) : (
       <>
         {hasMathOrImage && screenReaderLabel}
-        <Tag {...tagProps} />
+        <Tag {...tagProps} inputRef={this.props.autoFocusRef} />
       </>
     );
 

packages/multiple-choice/src/choice.jsx

@@ -33,6 +33,7 @@ export class Choice extends React.Component {
       gridColumns,
       isSelectionButtonBelow,
       selectedAnswerBackgroundColor,
+      autoFocusRef,
       tagName
     } = this.props;
     const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
@@ -65,7 +66,7 @@ export class Choice extends React.Component {
 
     return (
       <div className={choiceClass} key={index} style={{ backgroundColor: choiceBackground }}>
-        <ChoiceInput {...choiceProps} className={names} />
+        <ChoiceInput {...choiceProps} className={names} autoFocusRef={autoFocusRef} />
       </div>
     );
   }
@@ -88,7 +89,8 @@ Choice.propTypes = {
   gridColumns: PropTypes.string,
   selectedAnswerBackgroundColor: PropTypes.string,
   tagName: PropTypes.string,
-  isSelectionButtonBelow: PropTypes.bool
+  isSelectionButtonBelow: PropTypes.bool,
+  autoFocusRef: PropTypes.object,
 };
 
 export default withStyles((theme) => ({

packages/multiple-choice/src/multiple-choice.jsx

@@ -94,7 +94,7 @@ export class MultipleChoice extends React.Component {
     customAudioButton: {
       playImage: PropTypes.string,
       pauseImage: PropTypes.string,
-    }
+    },
   };
 
   constructor(props) {
@@ -106,6 +106,7 @@ export class MultipleChoice extends React.Component {
     };
 
     this.onToggle = this.onToggle.bind(this);
+    this.firstInputRef = React.createRef();
   }
 
   isSelected(value) {
@@ -222,6 +223,19 @@ export class MultipleChoice extends React.Component {
     );
   }
 
+  handleGroupFocus = (e) => {
+    const fieldset = e.currentTarget;
+    const activeEl = document.activeElement;
+
+    if (fieldset.contains(activeEl) && activeEl !== fieldset) {
+      return;
+    }
+
+    if (this.firstInputRef?.current) {
+      this.firstInputRef.current.focus();
+    }
+  };
+
   render() {
     const {
       mode,
@@ -243,7 +257,7 @@ export class MultipleChoice extends React.Component {
       maxSelections,
       autoplayAudioEnabled,
       session,
-      customAudioButton
+      customAudioButton,
     } = this.props;
     const { showCorrect, maxSelectionsErrorState } = this.state;
     const isEvaluateMode = mode === 'evaluate';
@@ -264,7 +278,11 @@ export class MultipleChoice extends React.Component {
       if (minSelections && maxSelections) {
         return minSelections === maxSelections
           ? translator.t('translation:multipleChoice:minmaxSelections_equal', { lng: language, minSelections })
-          : translator.t('translation:multipleChoice:minmaxSelections_range', { lng: language, minSelections, maxSelections });
+          : translator.t('translation:multipleChoice:minmaxSelections_range', {
+              lng: language,
+              minSelections,
+              maxSelections,
+            });
       }
 
       if (minSelections) {
@@ -275,7 +293,7 @@ export class MultipleChoice extends React.Component {
     };
 
     return (
-        <div id={'main-container'} className={classNames(classes.main, className, 'multiple-choice')}>
+      <div id={'main-container'} className={classNames(classes.main, className, 'multiple-choice')}>
         {partLabel && <h3 className={classes.partLabel}>{partLabel}</h3>}
 
         {this.renderHeading()}
@@ -297,7 +315,12 @@ export class MultipleChoice extends React.Component {
           </div>
         )}
 
-        <fieldset tabIndex={0} className={classes.fieldset} role={choiceMode === 'radio' ? 'radiogroup' : 'group'}>
+        <fieldset
+          tabIndex={0}
+          className={classes.fieldset}
+          onFocus={this.handleGroupFocus}
+          role={choiceMode === 'radio' ? 'radiogroup' : 'group'}
+        >
           <PreviewPrompt
             className="prompt"
             defaultClassName="prompt"
@@ -325,6 +348,7 @@ export class MultipleChoice extends React.Component {
           >
             {choices.map((choice, index) => (
               <StyledChoice
+                autoFocusRef={index === 0 ? this.firstInputRef : null}
                 choicesLayout={this.props.choicesLayout}
                 selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}
                 gridColumns={gridColumns}
@@ -336,7 +360,7 @@ export class MultipleChoice extends React.Component {
                 isEvaluateMode={isEvaluateMode}
                 choiceMode={choiceMode}
                 disabled={disabled}
-                tagName={partLabel ? `group-${partLabel}`: 'group'}
+                tagName={partLabel ? `group-${partLabel}` : 'group'}
                 onChoiceChanged={this.handleChange}
                 hideTick={choice.hideTick}
                 checked={this.getChecked(choice)}
@@ -348,10 +372,8 @@ export class MultipleChoice extends React.Component {
           </div>
         </fieldset>
 
-        {choiceMode === 'checkbox' && (selections < minSelections) && (
-          <div className={classes.errorText}>
-            {getMultipleChoiceMinSelectionErrorMessage()}
-          </div>
+        {choiceMode === 'checkbox' && selections < minSelections && (
+          <div className={classes.errorText}>{getMultipleChoiceMinSelectionErrorMessage()}</div>
         )}
         {choiceMode === 'checkbox' && maxSelectionsErrorState && (
           <div className={classes.errorText}>