fix(NotificationsPanel): remove focus trap

[paul-balchin-ibm]

Closes #6432

For accessibility reasons: remove the built-in focus trap.

After detailed discussions (see also the refinement comment), the following changes were approved:

1. Remove the focus trap entirely.
2. Solve why the Panel "flickers" when it's open and a new notification is added.
3. Keep the feature: "on click outside / tap escape key → close the Panel."

What did you change?

packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss
packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.stories.jsx
packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel_data.js
packages/ibm-products/src/components/NotificationsPanel/_storybook-styles.scss

How did you test and verify your work?

• Storybook
• Coverage / testing

[netlify]

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	115f84f
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/67a518ea71e1630008fe7962
😎 Deploy Preview	https://deploy-preview-6829--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	115f84f
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/67a518ea65d6fa0008e9f903
😎 Deploy Preview	https://deploy-preview-6829--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.29%. Comparing base (44a206d) to head (115f84f).
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6829      +/-   ##
==========================================
- Coverage   81.31%   81.29%   -0.02%     
==========================================
  Files         397      397              
  Lines       12959    12945      -14     
  Branches     4261     4255       -6     
==========================================
- Hits        10537    10524      -13     
+ Misses       2422     2421       -1     

Components	Coverage Δ
ibm-products	∅ <ø> (∅)
ibm-products-web-components	∅ <ø> (∅)

[paul-balchin-ibm]

Temp fix for draft review.

Removing the HeaderContainer:

1. Solves the problem of re-rendering all children every time there's a state change.
2. Solves the problem of tabbing order by allowing the Panel to be rendered inline with the Shell's notification icon button.

Keeping the HeaderContainer:

1. Requires the Panel to be rendered outside the Shell, but it will lose the expected tabbing order.

[matthewgallo]

Just a few questions for you, I noticed that the exit animation of the panel is gone. Is that something you can check out? Also, triggerButtonRef isn't used at all anymore. Thoughts on this? This is used across modals, panels in Carbon, but since we removed focus trap, suppose we might be able to deprecate it?

[paul-balchin-ibm]

...the triggerButtonRef is gone.

Oops. That was probably part of my aggressive "delete one thing at a time until I see a change in behavior" tactic; and then forgot to put them back in. (All for nothing, it was the UI Shell that was the source of the issues.)

...the exit animation is gone.

If you mean onAnimationEnd, it hasn't been removed.

Thanks, @matthewgallo.

[matthewgallo]

The actual exit animation of the panel is missing now. This is what is currently looks like with the latest changes from main.

Screen.Recording.2025-02-06.at.9.17.38.AM.mov

[paul-balchin-ibm]

The actual exit animation of the panel is missing now

Fixed with latest commit.

[elycheea]

Thank you, @paul-balchin-ibm! Those alignment fixes you snuck in and Storybook cleanup have long overdue. 🚀

[devadula-nandan]

hi @paul-balchin-ibm,
i remember fixing the notification panel flicker issue
#4771

but looks like it got resurrected from the grave after moving them to useIsomorphicEffect as part of fixing csp violations by removing inline css. #6340