MOBILE-4338 quiz: Fix popover feedback

main
Noel De Martin 2023-05-15 13:16:35 +02:00
parent ae83b7d87b
commit 647f105873
2 changed files with 23 additions and 6 deletions

View File

@ -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,
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,

View File

@ -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();