fix(notificationsPanel): nested interactive controls

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: '';

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>
     `;
   }
 

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();

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>

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;

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,35 +72,41 @@ 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"
         class="${blockClass}__dismiss-single-button"
         @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.
    *

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}`