question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accessibility: No way to wrap PF4 modal content and footer in a single HTML form elemente

See original GitHub issue

Describe 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

cc @rebeccaalpert @janwright73 @rhamilto

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
spadgettcommented, Oct 8, 2021

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.

0reactions
tlabajcommented, Oct 12, 2021

@mcarrano can we prioritize this issue. Core has a PR up for the demo, React can add one too.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found