4.1.2; 2.4.3 Vyskakovacie okno vloženého podpisovania nie je dialóg a nespravuje zameranie

URL: agp.dev.slovensko.digital/sdk.js

Popis problému:

Integrátori vkladajú podpisovanie na svoje stránky cez sdk.js (agp.initContractIframe(id, { mode: 'popup' })). V režime popup SDK vytvorí prekrytie <div data-agp-popup> s hlavičkou <h3> „AGP Portal“, tlačidlom „ד a rámcom <iframe> s podpisovaním. Overili sme na testovacej hostiteľskej stránke:

• prekrytie nemá role="dialog", aria-modal ani prístupný názov,
• po otvorení zostane zameranie na tlačidle hostiteľskej stránky, ktoré okno otvorilo; prvé stlačenie tabulátora presunie zameranie na odkaz hostiteľskej stránky skrytý pod prekrytím, nie do okna,
• zameranie nie je v okne udržiavané a po zatvorení sa nevráti na tlačidlo, ktoré okno otvorilo (končí na <body>),
• kláves Escape okno zatvorí iba vtedy, keď je zameranie na hostiteľskej stránke; ak je používateľ v rámci podpisovania (kde prebieha celá práca), Escape nefunguje, pretože poslucháč je iba na document hostiteľskej stránky,
• tlačidlo na zatvorenie má prístupný názov „ד a predvolený nadpis „AGP Portal“ nehovorí, o čo ide.

Dopad:

Používateľ čítača obrazovky sa nedozvie, že sa otvorilo okno, a pokračuje v čítaní hostiteľskej stránky za ním. Používateľ klávesnice sa tabulátorom dostáva k prvkom ukrytým pod polopriehľadným prekrytím a nevidí, kde je zameranie. Po zatvorení stratí pozíciu na stránke. Tlačidlo „ד čítač obrazovky prečíta ako „krát“ alebo „násobenie“. Postihnutí sú nevidiaci a slabozrakí používatelia čítačov obrazovky, používatelia klávesnice a používatelia hlasového ovládania.

Závažnosť: vysoká — vložené podpisovanie je na stránkach integrátorov bez myši ťažko použiteľné.

Efektívne riešenie:

Pre splnenie kritérií úspešnosti je potrebné okno vytvoriť ako modálny dialóg — najjednoduchšie natívnym elementom <dialog> otvoreným cez showModal(), ktorý zabezpečí oddelenie obsahu stránky, zachytenie zamerania a zatvorenie klávesom Escape. Je potrebné:

• dialógu dať prístupný názov z nadpisu (aria-labelledby) a nadpis predvolene „Podpísanie dokumentu“,
• po otvorení presunúť zameranie do dialógu (na nadpis alebo na rámec) a po zatvorení ho vrátiť na prvok, ktorý dialóg otvoril,
• tlačidlu na zatvorenie dať názov aria-label="Zavrieť podpisovanie",
• zatváranie klávesom Escape zabezpečiť aj z vnútra rámca — stránka v rámci môže pri Escape poslať správu postMessage, na ktorú SDK okno zatvorí.

const dialog = document.createElement('dialog');
dialog.setAttribute('aria-labelledby', 'agp-dialog-title');
dialog.innerHTML = '<h2 id="agp-dialog-title">Podpísanie dokumentu</h2>' +
  '<button type="button" aria-label="Zavrieť podpisovanie">×</button>';
dialog.append(iframe); document.body.append(dialog);
const opener = document.activeElement; dialog.showModal();
dialog.addEventListener('close', () => opener && opener.focus());