MOBILE-4338 quiz: Fix popover feedback

src/core/features/question/services/question-helper.ts

@@ -855,10 +855,13 @@ export class CoreQuestionHelperProvider {
         const icons = <HTMLElement[]> Array.from(element.querySelectorAll('ion-icon.questioncorrectnessicon'));
         const title = Translate.instant('core.question.feedback');
         const getClickableFeedback = (icon: HTMLElement) => {
-            if (icon.parentElement instanceof HTMLButtonElement && icon.parentElement.dataset.toggle === 'popover') {
+            const parentElement = icon.parentElement;
+            const parentIsClickable = parentElement instanceof HTMLButtonElement || parentElement instanceof HTMLAnchorElement;
+
+            if (parentElement && parentIsClickable && parentElement.dataset.toggle === 'popover') {
                 return {
-                    element: icon.parentElement,
+                    element: parentElement,
-                    html: icon.parentElement?.dataset.content,
+                    html: parentElement?.dataset.content,
                 };
             }
 
@@ -866,7 +869,7 @@ export class CoreQuestionHelperProvider {
             if (icon.hasAttribute('tappable')) {
                 return {
                     element: icon,
-                    html: icon.parentElement?.querySelector('.feedbackspan.accesshide')?.innerHTML,
+                    html: parentElement?.querySelector('.feedbackspan.accesshide')?.innerHTML,
                 };
             }
 
@@ -881,7 +884,11 @@ export class CoreQuestionHelperProvider {
             }
 
             // There's a hidden feedback, show it when the icon is clicked.
-            target.element.addEventListener('click', () => {
+            target.element.dataset.disabledA11yClicks = 'true';
+            target.element.addEventListener('click', event => {
+                event.preventDefault();
+                event.stopPropagation();
+
                 CoreTextUtils.viewText(title, target.html ?? '', {
                     component: component,
                     componentId: componentId,

src/core/singletons/dom.ts

@@ -536,9 +536,15 @@ export class CoreDom {
         element: HTMLElement & {disabled?: boolean},
         callback: (event: MouseEvent | KeyboardEvent) => void,
     ): void {
-        element.addEventListener('click', (event) => callback(event));
+        const enabled = () => !CoreUtils.isTrueOrOne(element.dataset.disabledA11yClicks ?? 'false');
+
+        element.addEventListener('click', (event) => enabled() && callback(event));
 
         element.addEventListener('keydown', (event) => {
+            if (!enabled()) {
+                return;
+            }
+
             if (event.key === ' ' || event.key === 'Enter') {
                 event.preventDefault();
                 event.stopPropagation();
@@ -546,6 +552,10 @@ export class CoreDom {
         });
 
         element.addEventListener('keyup', (event) => {
+            if (!enabled()) {
+                return;
+            }
+
             if (event.key === ' ' || event.key === 'Enter') {
                 event.preventDefault();
                 event.stopPropagation();