Merge pull request #2096 from pie-framework/feat/PD-2452

feat(math-inline): Adjust tooltip positioning with PopperProps for enhanced accessibility, Ensure logical DOM placement and improve screen reader support PD-2452

Author: andreeapescar

packages/math-inline/src/__tests__/main.test.js

@@ -6,6 +6,7 @@ import { shallowChild } from '@pie-lib/pie-toolbox/test-utils';
 import { Feedback } from '@pie-lib/pie-toolbox/render-ui';
 import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
 import SimpleQuestionBlock from '../simple-question-block';
+import { mount } from 'enzyme';
 
 const Mathquill = require('@pie-framework/mathquill');
 
@@ -97,6 +98,7 @@ describe('Math-Inline Main', () => {
           },
         },
         showCorrect: false,
+        tooltipContainerRef: expect.any(Object),
       });
 
       expect(Mathquill.getInterface().registerEmbed).toHaveBeenCalled();
@@ -211,6 +213,7 @@ describe('Math-Inline Main', () => {
           },
         },
         showCorrect: false,
+        tooltipContainerRef: expect.any(Object),
       });
     });
 
@@ -237,6 +240,7 @@ describe('Math-Inline Main', () => {
           },
         },
         showCorrect: false,
+        tooltipContainerRef: expect.any(Object),
       });
     });
 
@@ -262,6 +266,7 @@ describe('Math-Inline Main', () => {
           },
         },
         showCorrect: false,
+        tooltipContainerRef: expect.any(Object),
       });
 
       const newProps = { ...defaultProps };
@@ -289,6 +294,7 @@ describe('Math-Inline Main', () => {
           },
         },
         showCorrect: false,
+        tooltipContainerRef: expect.any(Object),
       });
     });
   });

packages/math-inline/src/main.jsx

@@ -111,6 +111,7 @@ export class Main extends React.Component {
       session: { ...props.session, answers },
       activeAnswerBlock: '',
       showCorrect: this.props.model.config.alwaysShowCorrect || false,
+      tooltipContainerRef: React.createRef(),
     };
   }
 
@@ -525,7 +526,7 @@ export class Main extends React.Component {
 
   render() {
     const { model, classes } = this.props;
-    const { activeAnswerBlock, showCorrect, session } = this.state;
+    const { activeAnswerBlock, showCorrect, session, tooltipContainerRef } = this.state;
     const {
       config,
       correctness,
@@ -622,6 +623,7 @@ export class Main extends React.Component {
 
               {responseType === ResponseTypes.advanced && (
                 <div
+                  ref={tooltipContainerRef}
                   className={cx(classes.expression, {
                     [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
                     [classes.correct]: !emptyResponse && (correct || showCorrect),
@@ -639,6 +641,9 @@ export class Main extends React.Component {
                       tooltip: classes.keypadTooltip,
                       popper: classes.keypadTooltipPopper,
                     }}
+                    PopperProps={{
+                      container: tooltipContainerRef?.current || undefined,
+                    }}
                     title={Object.keys(session.answers).map(
                       (answerId) =>
                         (answerId === activeAnswerBlock && !(showCorrect || disabled) && (