Can't close toast about changing tags

[PKulkoRaccoonGang]

Description

If the user saves new changes in Manage tags (Paragon Sheet component), a toast notification about changes related to tags is displayed. The user cannot close the toast by clicking the close button (Paragon IconButton component).

Screen.Recording.2025-05-02.at.16.41.32.mov

[crathbun428]

@jmakowski1123 - Just wanted to make sure you were aware of this one. Feels medium-high priority to me?

[bradenmacdonald]

This looks like a z-index conflict. Some potential solutions are discussed in openedx/paragon#2990 but it could also be solved quickly by moving the toast to a different corner. Also, I believe the toast will still disappear by itself after a few seconds, right?

[jmakowski1123]

Yeah, the toast disappears by itself after about 5 seconds. You just can't close it in the interim. This is low priority.

[bydawen]

Hello there! After some investigation, I've found that the problem is caused by the data-focus-on-hidden="true" attribute on the toast-container.

This is preventing us from clicking the close button on the toast.

Unfortunately, I can't find the source of where this comes from. I saw a post in the Bootstrap community with a bit similar issue, but currently, there’s no solution:
twbs/bootstrap#41005

As a temporary fix, I created a draft PR where I override the behavior of the data-focus-on-hidden="true" attribute through styles:
#2139

Maybe this will be enough, but if you have any other ideas about what it could be, please let me know.

Thanks!