Accessibility: No way to wrap PF4 modal content and footer in a single HTML form elemente
See original GitHub issueDescribe the issue. What is the expected and unexpected behavior?
In OpenShift, we have many modals that are forms. We need to be able to wrap the form inputs from the modal body and the buttons from the footer in a single HTML form
element with a submit handler for accessibility. Not being able to do this breaks features like pressing enter inside an input to submit the form. It doesn’t appear to be possible with the PF4 modal, however.
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug, no clear workaround. Maybe it’s possible to put the buttons in the modal body.
What is your product and what release version are you targeting?
OpenShift 4.4
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (8 by maintainers)
Top Results From Across the Web
Modal Dialog Example | APG | WAI - W3C
The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog.
Read more >Wrapping .modal-body and .modal-footer elements with <form ...
When I inspect element using Chrome's dev tools I don't see any CSS rules with a selector like .modal-content > .modal-body that would...
Read more >aria-modal - Accessibility - MDN Web Docs
The aria-modal attribute indicates whether an element is modal when displayed. Description. A section of content is "modal" means navigation is ...
Read more >Accessible dialog tutorial - ally.js
Accessible dialog tutorial. This document explains what steps need to be taken in order to make a visually compelling, yet fully accessible dialog...
Read more >Modal - Bootstrap
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey, @nicolethoen. We’ve worked around it, but this still seems like a bug to me and something PF should support. The dialog is not accessible if you use modal footer with a form.
@mcarrano can we prioritize this issue. Core has a PR up for the demo, React can add one too.