Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility Issue accessing tabs in a model with the keyboard #1354

Open
Nimo-19 opened this issue Nov 14, 2023 · 3 comments
Open

Accessibility Issue accessing tabs in a model with the keyboard #1354

Nimo-19 opened this issue Nov 14, 2023 · 3 comments

Comments

@Nimo-19
Copy link

Nimo-19 commented Nov 14, 2023

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)

@Nimo-19
Copy link
Author

Nimo-19 commented Nov 14, 2023

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.

@Nimo-19
Copy link
Author

Nimo-19 commented Nov 16, 2023

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

@petschki
Copy link
Member

petschki commented Apr 21, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants