plone/mockup

Accessibility Issue accessing tabs in a model with the keyboard

Opened this issue · 3 comments

Hi, while testing some keyboard navigation related stuff on plone.app.mosaic I noticed that it is impossible to access tabs in their 'Properties' Modal.
It seems the 'keydown' Listener on a modal form ( see modal.js#L444 ) prevents the on click event to fire, which would trigger the tab change.
Because field sets as tabs are such a common thing in Plone I think this should work.

I don't fully grasp the function of the aforementioned keydown listener, but maybe there should be testet if the target is actually a form Element.

Maybe something like: || ! ['INPUT','SELECT','BUTTON (?!) '].includes(event.target.nodeName)

After I fiddled around a bit with the above idea, I noticed that the focusTrap does not update.

I went on to try to understand a working one. My choice was the 'Insert Image' Modal in the TinyMCE, but there the focusTrap Listener is never accessed and the focus can go outside of the modal without a problem.

I found out why the focus trap on Insert Image/Link Modals in TinyMCE did not work.

The classname of the modal 'modal-dialog modal-lg' (see: links.js#L476 )
does not work with the listener registration via selector: "." + self.options.templateOptions.classDialog (see modal.js#L797 ). The selector searches for a child <modal-lg> of a <... class="modal-dialog> which does obviously not exist

I think there's a missconfiguration, because modal-lg should go into the general modalSizeClass option of pat-plone-modal ... this should be fixed in links.js ...

EDIT: and reloadWindowOnClose is not in templateOptions but in actionOptions... maybe its a leftover of previous version to not introduce a breaking change. But since version 5.x I assume we can clean that up.