diff --git a/src/core/features/question/services/question-helper.ts b/src/core/features/question/services/question-helper.ts index c6de41b09..f797dc92c 100644 --- a/src/core/features/question/services/question-helper.ts +++ b/src/core/features/question/services/question-helper.ts @@ -855,10 +855,13 @@ export class CoreQuestionHelperProvider { const icons = 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, - html: icon.parentElement?.dataset.content, + element: parentElement, + 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, diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts index 66aff6a71..36bdceb2d 100644 --- a/src/core/singletons/dom.ts +++ b/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();