diff --git a/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss b/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss
index dc495495c23..a59afa4411b 100644
--- a/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss
+++ b/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss
@@ -145,14 +145,15 @@ $block-size: 38.5rem;
     // stylelint-disable-next-line carbon/layout-use
     inset-block-start: 3.0625rem;
   }
-  .#{$block-class}__notification:hover,
-  .#{$block-class}__notification:focus {
+  .#{$block-class}__notification-content--wrapper:hover,
+  .#{$block-class}__notification-content--wrapper:focus {
     background-color: $layer-accent-01;
-    .#{$block-class}__dismiss-single-button {
+    + .#{c4p-settings.$carbon-prefix}--popover-container
+      .#{$block-class}__dismiss-single-button {
       opacity: 1;
     }
   }
-  .#{$block-class}__notification:focus {
+  .#{$block-class}__notification-content--wrapper:focus {
     border-color: $focus;
     box-shadow:
       inset 0 0 0 2px $focus,
@@ -162,14 +163,8 @@ $block-size: 38.5rem;
   .#{$block-class}__notification {
     position: relative;
     display: flex;
-    align-items: flex-start;
-    padding: $spacing-05;
     border: 0;
     background-color: $layer-01;
-    cursor: pointer;
-    inline-size: 100%;
-    min-block-size: 6.25rem;
-    text-align: start;
     transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
       @include type.type-style('heading-01');
@@ -202,6 +197,19 @@ $block-size: 38.5rem;
         fill: $support-info;
       }
     }
+    .#{$block-class}__notification-content--wrapper {
+      display: flex;
+      align-items: flex-start;
+      padding: $spacing-05;
+      inline-size: 100%;
+      min-block-size: 6.25rem;
+      text-align: start;
+    }
+    .#{$block-class}__notification-content--wrapper--clickable {
+      @extend .#{$block-class}__notification-content--wrapper;
+
+      cursor: pointer;
+    }
     .#{$block-class}__notification-content {
       .#{$block-class}__notification-time-label {
         margin-block-end: $spacing-03;
@@ -282,7 +290,7 @@ $block-size: 38.5rem;
   .#{$block-class}__notification-yesterday:not(:first-of-type):before,
   .#{$block-class}__notification-previous:not(:first-of-type):before {
     position: absolute;
-    margin: 0 auto;
+    margin: 0 #{$spacing-05};
     background-color: $border-subtle-01;
     block-size: 1px;
     content: '';
diff --git a/packages/ibm-products-web-components/src/components/notification-panel/notification-footer.ts b/packages/ibm-products-web-components/src/components/notification-panel/notification-footer.ts
index a3f3bc69481..17848e35780 100644
--- a/packages/ibm-products-web-components/src/components/notification-panel/notification-footer.ts
+++ b/packages/ibm-products-web-components/src/components/notification-panel/notification-footer.ts
@@ -50,14 +50,16 @@ class CDSNotificationFooter extends HostListenerMixin(LitElement) {
       >
         ${viewAllLabel}
       </cds-button>
-      <cds-button
+      <cds-icon-button
+        align="left"
         kind="ghost"
         size="sm"
         class="${blockClass}__settings-button"
         @click=${onClickSettings}
       >
         ${iconLoader(Settings16, { slot: 'icon' })}
-      </cds-button>
+        <span slot="tooltip-content">Settings</span>
+      </cds-icon-button>
     `;
   }
 
diff --git a/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.test.ts b/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.test.ts
index 8cb9f38dd77..06485a1e71d 100644
--- a/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.test.ts
+++ b/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.test.ts
@@ -7,6 +7,7 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { html, fixture, oneEvent, elementUpdated } from '@open-wc/testing';
+// import { expect as chaiExpect } from '@open-wc/testing';
 import './index';
 import CDSNotificationPanel from './notification-panel';
 
@@ -90,6 +91,16 @@ const template = (props: any = defaultProps) => {
 };
 
 describe('c4p-notification-panel', () => {
+  // Currently, this test is failing because of an a11y violation in the carbon cds-toggle component.
+  // To rectify this, an issue (ID: 20106) has been logged with the carbon team.
+  // Once the mentioned issue is resolved, this test should be re-enabled.
+
+  // it('should be accessible and have no axe violations', async () => {
+  //   const el = (await fixture(template())) as CDSNotificationPanel;
+  //   // Runs axe-core, checks for WCAG compliance
+  //   await chaiExpect(el).to.be.accessible();
+  // });
+
   it('should render the notification panel', async () => {
     const panel = (await fixture(template())) as CDSNotificationPanel;
     expect(panel?.open).toBeTruthy();
diff --git a/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.ts b/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.ts
index ac1850067ce..a1b4b84626b 100644
--- a/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.ts
+++ b/packages/ibm-products-web-components/src/components/notification-panel/notification-panel.ts
@@ -182,7 +182,12 @@ class CDSNotificationPanel extends HostListenerMixin(LitElement) {
     });
 
     return html`
-      <div role="dialog" tabindex="0" class=${classes}>
+      <div
+        role="dialog"
+        tabindex="0"
+        class=${classes}
+        aria-label="Notifications"
+      >
         <div class="${blockClass}__header-container">
           <div class="${blockClass}__header-flex">
             <h2 class="${blockClass}__header">${titleText}</h2>
@@ -201,7 +206,6 @@ class CDSNotificationPanel extends HostListenerMixin(LitElement) {
             id="${blockClass}__do-not-disturb-toggle-component"
             label-a=${doNotDisturbLabel}
             label-b=${doNotDisturbLabel}
-            aria-label=${doNotDisturbLabel}
             @cds-toggle-changed=${handleToggle}
           ></cds-toggle>
         </div>
diff --git a/packages/ibm-products-web-components/src/components/notification-panel/notification.scss b/packages/ibm-products-web-components/src/components/notification-panel/notification.scss
index 9dd91ab72fa..828f480bae9 100644
--- a/packages/ibm-products-web-components/src/components/notification-panel/notification.scss
+++ b/packages/ibm-products-web-components/src/components/notification-panel/notification.scss
@@ -27,19 +27,13 @@ $block-notification-class: #{$prefix}--notifications-panel__notification;
 :host(#{$prefix}-notification) {
   position: relative;
   display: flex;
-  align-items: flex-start;
-  padding: $spacing-05;
   border: 0;
   background-color: $layer-01;
-  cursor: pointer;
-  inline-size: 100%;
-  min-block-size: 6.25rem;
-  text-align: start;
   transition: background-color $duration-moderate-02 motion(standard);
   @media screen and (prefers-reduced-motion: reduce) {
     &::before {
       position: absolute;
-      margin: 0 auto;
+      margin: 0 #{$spacing-05};
       background-color: $border-subtle-01;
       block-size: 1px;
       content: '';
@@ -51,7 +45,7 @@ $block-notification-class: #{$prefix}--notifications-panel__notification;
 
   &::before {
     position: absolute;
-    margin: 0 auto;
+    margin: 0 #{$spacing-05};
     background-color: $border-subtle-01;
     block-size: 1px;
     content: '';
@@ -60,9 +54,16 @@ $block-notification-class: #{$prefix}--notifications-panel__notification;
     transition: background-color $duration-moderate-02 motion(standard);
   }
 
-  &:hover::before {
-    background-color: transparent;
+  .#{$block-notification-class}-content--wrapper {
+    display: flex;
+    align-items: flex-start;
+    padding: $spacing-05;
+    cursor: pointer;
+    inline-size: 100%;
+    min-block-size: 6.25rem;
+    text-align: start;
   }
+
   .#{$block-notification-class}-status-icon {
     margin-inline-end: $spacing-03;
     min-inline-size: 1rem;
diff --git a/packages/ibm-products-web-components/src/components/notification-panel/notification.ts b/packages/ibm-products-web-components/src/components/notification-panel/notification.ts
index d4ee3380da5..cd9d69d36b6 100644
--- a/packages/ibm-products-web-components/src/components/notification-panel/notification.ts
+++ b/packages/ibm-products-web-components/src/components/notification-panel/notification.ts
@@ -61,16 +61,6 @@ class CDSNotification extends HostListenerMixin(LitElement) {
     }
   };
 
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'button');
-    }
-    if (!this.hasAttribute('tabindex')) {
-      this.setAttribute('tabindex', '0');
-    }
-    this.addEventListener('keydown', this._handleKeyDown);
-  }
   render() {
     const {
       type,
@@ -82,21 +72,29 @@ class CDSNotification extends HostListenerMixin(LitElement) {
     const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
     const icon = fetchIcon(type);
     return html`
-      ${icon}
-      <div class="${blockClass}-content">
-        <p class="${blockClass}-time-label">
-          ${dateTimeFormat.relative.format(timestamp as Date, {
-            locale: supportedLocale as string,
-            style: dateTimeStyle,
-          })}
-        </p>
-        <slot name="title"></slot>
-        <div class="${blockClass}-description">
-          <slot name="description"></slot>
+      <div
+        class="${blockClass}-content--wrapper"
+        role=${this.hasAttribute('role') ? this.getAttribute('role') : 'button'}
+        tabindex=${this.hasAttribute('tabindex')
+          ? this.getAttribute('tabindex')
+          : '0'}
+        @keydown=${this._handleKeyDown}
+      >
+        ${icon}
+        <div class="${blockClass}-content">
+          <p class="${blockClass}-time-label">
+            ${dateTimeFormat.relative.format(timestamp as Date, {
+              locale: supportedLocale as string,
+              style: dateTimeStyle,
+            })}
+          </p>
+          <slot name="title"></slot>
+          <div class="${blockClass}-description">
+            <slot name="description"></slot>
+          </div>
         </div>
       </div>
-      <cds-button
-        tooltip-text=""
+      <cds-icon-button
         align="left"
         kind="ghost"
         size="sm"
@@ -104,13 +102,11 @@ class CDSNotification extends HostListenerMixin(LitElement) {
         @click=${dismissSingleNotification}
       >
         ${iconLoader(Close16, { slot: 'icon' })}
-      </cds-button>
+        <span slot="tooltip-content">Dismiss</span>
+      </cds-icon-button>
     `;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('keydown', this._handleKeyDown);
-  }
+
   /**
    * Handles user-initiated dismiss request of the Notification.
    *
diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.test.js b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.test.js
index 1b08f5c9f31..ffa4bace3d0 100644
--- a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.test.js
+++ b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.test.js
@@ -19,6 +19,7 @@ import { NotificationsPanel } from '.';
 import data from './NotificationsPanel_data';
 
 const blockClass = `${pkg.prefix}--notifications-panel`;
+const componentName = NotificationsPanel.displayName;
 const dataTestId = uuidv4();
 const onNotificationClickFn = jest.fn();
 const onDismissSingleNotificationFn = jest.fn();
@@ -47,7 +48,18 @@ const renderNotifications = ({ ...rest } = {}) =>
     />
   );
 
-describe('Notifications', () => {
+describe(componentName, () => {
+  // it('has no accessibility violations', async () => {
+  //   const { container } = renderNotifications({
+  //     data: testData,
+  //   });
+
+  //   const notificationsPanelElement = container.querySelector(`.${blockClass}`);
+
+  //   await expect(notificationsPanelElement).toBeAccessible(componentName);
+  //   await expect(notificationsPanelElement).toHaveNoAxeViolations();
+  // });
+
   it('renders the notification panel', async () => {
     const { animationStart, animationEnd } = fireEvent;
     const { container, rerender } = renderNotifications({
@@ -304,7 +316,7 @@ describe('Notifications', () => {
       onDismissSingleNotification: onDismissSingleNotificationFn,
     });
     const notificationElement = screen.getByText(/Test notification title/i)
-      .parentNode.parentNode;
+      .parentNode.parentNode.parentNode;
     const dismissSingleNotificationClass = `${blockClass}__dismiss-single-button`;
     const dismissIconButtonElement = notificationElement.querySelector(
       `.${dismissSingleNotificationClass}`
@@ -334,7 +346,7 @@ describe('Notifications', () => {
       onDismissSingleNotification: onDismissSingleNotificationFn,
     });
     const notificationElement = screen.getByText(/Test notification title/i)
-      .parentNode.parentNode;
+      .parentNode.parentNode.parentNode;
     const dismissSingleNotificationClass = `${blockClass}__dismiss-single-button`;
     const dismissIconButtonElement = notificationElement.querySelector(
       `.${dismissSingleNotificationClass}`
diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
index 5a24a39f6a8..f9c35a17448 100644
--- a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
+++ b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
@@ -586,109 +586,113 @@ export const NotificationsPanel = React.forwardRef(
           [`${blockClass}__notification-title-unread`]: notification.unread,
         },
       ]);
+      let wrapperParams: any = {
+        className: `${blockClass}__notification-content--wrapper`,
+      };
+      if (typeof notification.onNotificationClick === 'function') {
+        wrapperParams = {
+          role: 'button',
+          'aria-label': 'Notification details',
+          tabIndex: 0,
+          className: `${blockClass}__notification-content--wrapper--clickable`,
+          onClick: () => notification.onNotificationClick(notification),
+          onKeyDown: (event) => {
+            if (event.which === 13) {
+              notification.onNotificationClick(notification);
+            }
+          },
+        };
+      }
+
       return (
         <Section
           key={`${notification.timestamp}-${notification.title}-${index}`}
           className={notificationClassName}
           as="div"
-          role="button"
-          tabIndex={0}
-          onClick={() => notification.onNotificationClick(notification)}
-          onKeyDown={(event) => {
-            if (
-              event.target instanceof HTMLElement &&
-              event.target.classList.contains(
-                `${blockClass}__dismiss-single-button`
-              )
-            ) {
-              return;
-            }
-            if (event.which === 13) {
-              notification.onNotificationClick(notification);
-            }
-          }}
         >
-          {notification.type === 'error' && (
-            <ErrorFilled
-              size={16}
-              className={cx([
-                `${blockClass}__notification-status-icon`,
-                `${blockClass}__notification-status-icon-error`,
-              ])}
-            />
-          )}
-          {notification.type === 'success' && (
-            <CheckmarkFilled
-              size={16}
-              className={cx([
-                `${blockClass}__notification-status-icon`,
-                `${blockClass}__notification-status-icon-success`,
-              ])}
-            />
-          )}
-          {notification.type === 'warning' && (
-            <WarningAltFilled
-              size={16}
-              className={cx([
-                `${blockClass}__notification-status-icon`,
-                `${blockClass}__notification-status-icon-warning`,
-              ])}
-            />
-          )}
-          {notification.type === 'informational' && (
-            <InformationSquareFilled
-              size={16}
-              className={cx([
-                `${blockClass}__notification-status-icon`,
-                `${blockClass}__notification-status-icon-informational`,
-              ])}
-            />
-          )}
-          <div className={`${blockClass}__notification-content`}>
-            <p className={`${blockClass}__notification-time-label`}>
-              {/**
-               * If the new dateTimeLocale has been passed a value,
-               * then use the new dateTimeFormat.relative.format(),
-               * else use the deprecated timeAgo().
-               */}
-              {dateTimeLocale
-                ? dateTimeFormat.relative.format(notification.timestamp, {
-                    locale: supportedLocale as string,
-                    style: dateTimeStyle,
-                  })
-                : timeAgo({
-                    previousTime: notification.timestamp,
-                    secondsAgoText,
-                    minuteAgoText,
-                    minutesAgoText,
-                    hoursAgoText,
-                    hourAgoText,
-                    daysAgoText,
-                    yesterdayAtText,
-                    monthsAgoText,
-                    monthAgoText,
-                    yearsAgoText,
-                    yearAgoText,
-                    nowText,
-                  })}
-            </p>
-            <Heading className={notificationHeaderClassName}>
-              {notification.title}
-            </Heading>
-            {notification.description &&
-              notification.description.length &&
-              renderDescription(notification.id)}
-            {notification.link &&
-              notification.link.text &&
-              notification.link.url && (
-                <Link
-                  href={notification.link.url}
-                  className={`${blockClass}__notifications-link`}
-                  {...prepareProps({}, notification.link, ['text', 'url'])}
-                >
-                  {notification.link.text}
-                </Link>
-              )}
+          <div {...(wrapperParams as Readonly<object>)}>
+            {notification.type === 'error' && (
+              <ErrorFilled
+                size={16}
+                className={cx([
+                  `${blockClass}__notification-status-icon`,
+                  `${blockClass}__notification-status-icon-error`,
+                ])}
+              />
+            )}
+            {notification.type === 'success' && (
+              <CheckmarkFilled
+                size={16}
+                className={cx([
+                  `${blockClass}__notification-status-icon`,
+                  `${blockClass}__notification-status-icon-success`,
+                ])}
+              />
+            )}
+            {notification.type === 'warning' && (
+              <WarningAltFilled
+                size={16}
+                className={cx([
+                  `${blockClass}__notification-status-icon`,
+                  `${blockClass}__notification-status-icon-warning`,
+                ])}
+              />
+            )}
+            {notification.type === 'informational' && (
+              <InformationSquareFilled
+                size={16}
+                className={cx([
+                  `${blockClass}__notification-status-icon`,
+                  `${blockClass}__notification-status-icon-informational`,
+                ])}
+              />
+            )}
+            <div className={`${blockClass}__notification-content`}>
+              <p className={`${blockClass}__notification-time-label`}>
+                {/**
+                 * If the new dateTimeLocale has been passed a value,
+                 * then use the new dateTimeFormat.relative.format(),
+                 * else use the deprecated timeAgo().
+                 */}
+                {dateTimeLocale
+                  ? dateTimeFormat.relative.format(notification.timestamp, {
+                      locale: supportedLocale as string,
+                      style: dateTimeStyle,
+                    })
+                  : timeAgo({
+                      previousTime: notification.timestamp,
+                      secondsAgoText,
+                      minuteAgoText,
+                      minutesAgoText,
+                      hoursAgoText,
+                      hourAgoText,
+                      daysAgoText,
+                      yesterdayAtText,
+                      monthsAgoText,
+                      monthAgoText,
+                      yearsAgoText,
+                      yearAgoText,
+                      nowText,
+                    })}
+              </p>
+              <Heading className={notificationHeaderClassName}>
+                {notification.title}
+              </Heading>
+              {notification.description &&
+                notification.description.length &&
+                renderDescription(notification.id)}
+              {notification.link &&
+                notification.link.text &&
+                notification.link.url && (
+                  <Link
+                    href={notification.link.url}
+                    className={`${blockClass}__notifications-link`}
+                    {...prepareProps({}, notification.link, ['text', 'url'])}
+                  >
+                    {notification.link.text}
+                  </Link>
+                )}
+            </div>
           </div>
           <IconButton
             align="left"
diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel_data.js b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel_data.js
index 2b2154021f3..630fe4428bf 100644
--- a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel_data.js
+++ b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel_data.js
@@ -92,7 +92,6 @@ const data = [
     },
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -102,7 +101,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -112,7 +110,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -122,7 +119,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -132,7 +128,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -142,7 +137,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -152,7 +146,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -162,7 +155,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -172,7 +164,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
   {
     id: uuidv4(),
@@ -182,7 +173,6 @@ const data = [
       'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
     timestamp: dayBeforeYesterday,
     unread: false,
-    onNotificationClick: action(`Clicked on notification`),
   },
 ];