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.