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

Keep role="dialog" after closing modal/offcanvas if already in the markup #39941

wants to merge 2 commits into
base: main
Choose a base branch


Copy link

@julien-deramond julien-deramond commented Apr 30, 2024


This PR is the result of a discussion that happened in

TL;DR: if a role="dialog" is in the modal/offcanvas markup, our JavaScript will remove it when closing the element. The idea of this PR is to integrate a modification or our JavaScript behavior to keep this role if it is present in the markup.

There was a scenario to handle that, which was to put back the role="dialog" in the markup and doing nothing in the JavaScript by expecting users to correctly use it. But I like the enforcement rule that is present right as a modal/offcanvas can't be used without JavaScript right now anyway.

So I preferred the approach in this PR that doesn't change anything in the current behavior, but allows some flexibility for folks still wanting to add the role="dialog" in the markup for any reason.

Please note that the documentation is not modified as it's still accurate (source:

Note that you don’t need to add role="dialog" since we already add it via JavaScript.

First, dear reviewers, what do you think of this approach, in terms of JavaScript and/or accessibility? As mentioned in the GH discussion, I deducted information in the history, but maybe it's wrong, and you have more history to share.

If we agree to go this way, is handling only role="dialog" this way enough, or do you think we also should do the same thing for aria-modal which follows the same logic?


Type of changes

  • New feature (non-breaking change which adds functionality)


  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • (N/A) My change introduces changes to the documentation
  • (N/A) I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related GH discussion

Copy link

while i don't think it's necessarily needed, i can see how the idea of "our code cleans up after itself" works here.

I would say it may actually be good/make sense for our documentation to say/show that you should ideally add role="dialog" directly in your markup (but that our JS error-corrects for this in case it isn't there)

Copy link
Member Author

I would say it may actually be good/make sense for our documentation to say/show that you should ideally add role="dialog" directly in your markup (but that our JS error-corrects for this in case it isn't there)

So it would mean:

  1. Keeping my JS modification in this PR
  2. Kind of reverting the modifications done in the HTML from (+ other files) by re-adding everywhere role="dialog" for modals and offcanvases.
  3. Slightly improving the doc to explain that there's a safety net in our JavaScript that will add the role by default.

TBH, I prefer this approach where the DOM is correct right away, and the JS tries to help when it can. I hadn't suggested this approach because #30936 explicitly did the opposite. But if you're OK, and the rest of the team too, I can modify this PR in this direction.

Copy link

I think the one problem we had with having the role="dialog" directly in the documentation was that, for modals that we want to show already open (like the "modal components" example one), that will cause issues. If we can somehow not have that there in the rendered version, that'd then work

Copy link
Member Author

Oh, I see! OK then, I won't have time to do it right away, but I'll try to apply everything we said in this PR. So I let it in draft until I have time to do it later on. Thanks a lot for the early feedback, Patrick.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Status: In progress

Successfully merging this pull request may close these issues.

None yet

2 participants