Modal: won't put attribute on outermost element

[knod]

Bug Report

I'm not sure if this is a bug or if this is supposed to be the expected behavior. Sorry if this is in the wrong place. Also, I couldn't find a duplicate issue, but I wasn't sure how to search for it. Thanks for taking a look!

Steps

1. Create a modal component with an id attribute
2. Inspect it with the inspector tools

Expected Result

The id would be on the outermost wrapping div - the one that currently has the classes 'ui page modals...' If I create any component with an id, I'd expect the id to be on the outermost element created, especially since CSS can't select parents. It's especially a problem if there are multiple modals open at the same time.

I'd expect to be able to do styles such as #myModal ~ div { user-select: none; } so that when people that need to use keyboard input, such as people with disabilities, can tab through the interactive elements in the modal without tabbing through the page behind it too. [My bad, you can't select previous siblings, so that particular issue wouldn't be solved by this. It still prevents other ways of using CSS on the element and its successor siblings.]

Actual Result

The next element in, the div with the modal class is the one that gets the id, preventing CSS rules from reaching the parent and its siblings.

Version

^0.75.1

Testcase

https://codesandbox.io/s/pkwwq712qm

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[knod]

But no one has responded to this yet.

[layershifter]

Will be implemented in #3195. API will be:

<Modal 
  dimmer={{ className: 'custom-classname', inverted: true }}
/>