Making a modal accessible with aria-hidden or inert

Thanks in advance for any suggestions. Completely new to JS and coding generally, so bear with me here. I’m not remotely familiar with any frameworks, so this is strictly vanilla.

I have a modal that appears as the first thing the user sees. It contains a series of inputs and a button to submit that data. When the button is clicked, the modal’s opacity fades to 0, and it ceases to accept pointer-events, allowing the user to see and use the content beneath it.

Goal: I don’t want screenreaders to announce anything in the background (let’s call it backgroundContainer) until the modal is dismissed.

Tried:
Setting aria-hidden = "true" in the HTML and then having the form submission trigger backgroundContainer.setAttribute('aria-hidden', 'false'); in the JavaScript. Tried the same thing as an event listener when the user clicks on the Submit button.

Outcome:
The HTML works as expected; background-container is ignored on loading the page. However, NVDA(screenreader) doesn’t read the backgroundContainer after the button press.

Tried:
Adding backgroundContainer.inert = false; to the above and wrapping the whole thing in a function to be called either by the form’s submission or in response to a separate event listener connected to the submit button. For example:

function ariaReset() {
    let backgroundContainer = document.getElementById('background-container');
    backgroundContainer.inert = false;
    backgroundContainer.setAttribute('aria-hidden', 'false');
}

Outcome: As above.

I’ve also tried a few variations on the above, but I suspect I’m just going about it all wrong. Any and all help appreciated.