diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index d825d7c6..dd4a7785 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -94,9 +94,9 @@ describe('Course', () => {
     const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
 
     expect(notificationTrigger).toBeInTheDocument();
-    expect(notificationTrigger).toHaveClass('active');
+    expect(notificationTrigger).toHaveClass('trigger-active');
     fireEvent.click(notificationTrigger);
-    expect(notificationTrigger).not.toHaveClass('active');
+    expect(notificationTrigger).not.toHaveClass('trigger-active');
   });
 
   it('passes handlers to the sequence', async () => {
diff --git a/src/courseware/course/NotificationTrigger.jsx b/src/courseware/course/NotificationTrigger.jsx
index 183a35a1..3486ae4e 100644
--- a/src/courseware/course/NotificationTrigger.jsx
+++ b/src/courseware/course/NotificationTrigger.jsx
@@ -9,7 +9,7 @@ import messages from './messages';
 function NotificationTrigger({ intl, toggleNotificationTray, isNotificationTrayVisible }) {
   return (
     <button
-      className={classNames('notification-trigger-btn', { active: isNotificationTrayVisible() })}
+      className={classNames('notification-trigger-btn', { 'trigger-active': isNotificationTrayVisible() })}
       type="button"
       onClick={() => { toggleNotificationTray(); }}
       aria-label={intl.formatMessage(messages.openNotificationTrigger)}
diff --git a/src/courseware/course/NotificationTrigger.scss b/src/courseware/course/NotificationTrigger.scss
index 1273b663..fe06bb8b 100644
--- a/src/courseware/course/NotificationTrigger.scss
+++ b/src/courseware/course/NotificationTrigger.scss
@@ -14,7 +14,7 @@
     }
 }
 
-.active::after {
+.trigger-active::after {
     content: '';
     position: absolute;
     border-bottom: 2px solid $primary-700;