fix(NotificationsPanel): remove focus trap (#6829)

* fix(NotificationsPanel): remove focus trap

* fix: added escape key functionality

* fix: removed styling

* fix: comments

* fix: restore trigger button ref

* fix: remove commented code in story

* fix: missing closing animation

* fix: e2e test

Removed tests that confirmed focus trapping.

* fix: remove commented code

e2e/components/NotificationsPanel/NotificationsPanel-test.avt.e2e.js

@@ -39,21 +39,6 @@ test.describe('NotificationsPanel @avt', () => {
     );
     await expect(notificationPanel).toBeVisible();
 
-    const firstElement = page.locator(
-      `button.${pkg.prefix}--notifications-panel__dismiss-button`
-    );
-    await firstElement.focus();
-    await expect(firstElement).toBeFocused();
-
-    const lastElement = page.locator(
-      `button.${pkg.prefix}--notifications-panel__settings-button`
-    );
-    await page.keyboard.press('Shift+Tab');
-    await expect(lastElement).toBeFocused();
-
-    await page.keyboard.press('Tab');
-    await expect(firstElement).toBeFocused();
-
     for (let i = 0; i < 10; i++) {
       await page.keyboard.press('Tab');
       await expect(notificationPanel).toContainText(

packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss

@@ -183,8 +183,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
       .#{$block-class}__notification-read-less-button {
         @include type.type-style('label-01');
 
+        display: flex;
+        align-items: center;
         padding: 0;
-
         min-inline-size: 5.5rem;
 
         .#{c4p-settings.$carbon-prefix}--btn__icon {
@@ -274,6 +275,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     inset-block-end: 0;
     min-block-size: 2.5rem;
     .#{$block-class}__view-all-button {
+      display: flex;
+      width: 100%;
+      max-width: calc(100% - 2.5rem);
+      align-items: center;
       block-size: 2.5rem;
       border-inline-end: 1px solid $layer-02;
       color: $text-primary;