diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js
index 2d66846097..c62760b738 100644
--- a/src/components/sidebar-toggle-button/SidebarToggleButton.js
+++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js
@@ -48,14 +48,28 @@ const SidebarToggleButton = ({
         return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
     };
 
+    // Adding this to stop the mousedown event from being propagated up to box-annotations as
+    // that will cause the active annotation to no longer be active which means that it will not be displayed.
+    // This  causes video annotations not to work properly.
+    const mouseDownHandler = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+    };
+
     if (isPreviewModernizationEnabled) {
         const tooltipPositionModernized = direction === DIRECTION_LEFT ? DIRECTION_RIGHT : DIRECTION_LEFT;
 
         return (
             <BPTooltip content={intlText} side={tooltipPositionModernized}>
                 {/* Workaround to attach BP tooltip to legacy button, remove span when buttons are migrated to BP */}
-                <span>
-                    <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                <span onMouseDown={mouseDownHandler} role="presentation">
+                    <PlainButton
+                        aria-label={intlText}
+                        className={classes}
+                        onClick={onClick}
+                        onMouseDown={mouseDownHandler}
+                        type="button"
+                        {...rest}
+                    >
                         {renderButton()}
                     </PlainButton>
                 </span>
@@ -64,7 +78,14 @@ const SidebarToggleButton = ({
     }
     return (
         <Tooltip position={tooltipPosition} text={intlText}>
-            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+            <PlainButton
+                aria-label={intlText}
+                className={classes}
+                onClick={onClick}
+                onMouseDown={mouseDownHandler}
+                type="button"
+                {...rest}
+            >
                 {renderButton()}
             </PlainButton>
         </Tooltip>
diff --git a/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
index 9cfc881dc8..e00f10abbd 100644
--- a/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
+++ b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
@@ -1,35 +1,75 @@
 import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
 
+import { render } from '../../../test-utils/testing-library';
 import SidebarToggleButton from '..';
 
 describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
-    test('should render correctly as open', () => {
-        const wrapper = mount(<SidebarToggleButton isOpen />);
+    test.each`
+        isOpen   | direction
+        ${true}  | ${'left'}
+        ${false} | ${'left'}
+        ${true}  | ${'right'}
+        ${false} | ${'right'}
+    `(
+        'should render correct button correctly when open is $isOpen and direction is $direction and isPreviewModernizationEnabled is false',
+        ({ isOpen, direction }) => {
+            render(<SidebarToggleButton isOpen={isOpen} direction={direction} />, {
+                wrapperProps: { features: { previewModernization: { enabled: false } } },
+            });
 
-        expect(wrapper).toMatchSnapshot();
-    });
+            const button = screen.getByRole('button');
+            let iconClassName = '';
+            let iconNotDisplayedClassName = '';
+            if (direction === 'left') {
+                iconClassName = isOpen ? 'icon-show' : 'icon-hide';
+                iconNotDisplayedClassName = isOpen ? 'icon-hide' : 'icon-show';
+            } else {
+                iconClassName = isOpen ? 'icon-hide' : 'icon-show';
+                iconNotDisplayedClassName = isOpen ? 'icon-show' : 'icon-hide';
+            }
+            const icon = button.querySelector(`.${iconClassName}`);
+            const iconNotDisplayed = button.querySelector(`.${iconNotDisplayedClassName}`);
+            expect(icon).toBeInTheDocument();
+            expect(iconNotDisplayed).not.toBeInTheDocument();
+            const isCollapsed = button.classList.contains('bdl-is-collapsed');
+            expect(isCollapsed).toBe(!isOpen);
+        },
+    );
 
-    test('should render correctly as closed', () => {
-        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+    test.each([true, false])(
+        'should stop the mousedown event from being propagated up to box-annotations if isPreviewModernizationEnabled is %s',
+        isPreviewModernizationEnabled => {
+            const onMouseDown = jest.fn();
+            const onClick = jest.fn();
+            render(
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div onMouseDown={onMouseDown}>
+                    <SidebarToggleButton isOpen onClick={onClick} />
+                </div>,
+                {
+                    wrapperProps: { features: { previewModernization: { enabled: isPreviewModernizationEnabled } } },
+                },
+            );
+            const button = screen.getByRole('button');
+            fireEvent.mouseDown(button);
+            expect(onMouseDown).not.toHaveBeenCalled();
+        },
+    );
 
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should have the proper class when it is collapsed', () => {
-        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
-
-        expect(wrapper.find('PlainButton').hasClass('bdl-is-collapsed')).toBeTruthy();
-    });
-
-    test('should render correctly as left oriented toggle when open', () => {
-        const wrapper = mount(<SidebarToggleButton direction="left" isOpen />);
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should render correctly as left oriented toggle when closed', () => {
-        const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />);
-
-        expect(wrapper).toMatchSnapshot();
-    });
+    test.each([true, false])(
+        'should show proper button isPreviewModernizationEnabled is %s and click handler should work',
+        isPreviewModernizationEnabled => {
+            const onClick = jest.fn();
+            render(<SidebarToggleButton isOpen onClick={onClick} />, {
+                wrapperProps: { features: { previewModernization: { enabled: isPreviewModernizationEnabled } } },
+            });
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('bdl-SidebarToggleButton');
+            const isModernized = button.classList.contains('bdl-SidebarToggleButton--modernized');
+            expect(isModernized).toBe(isPreviewModernizationEnabled);
+            fireEvent.click(button);
+            expect(onClick).toHaveBeenCalled();
+        },
+    );
 });
diff --git a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap
deleted file mode 100644
index d25c9f336a..0000000000
--- a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap
+++ /dev/null
@@ -1,389 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as closed 1`] = `
-<SidebarToggleButton
-  isOpen={false}
->
-  <SidebarToggleButton
-    intl={
-      {
-        "formatDate": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatRelativeTime": [Function],
-      }
-    }
-    isOpen={false}
-  >
-    <Tooltip
-      constrainToScrollParent={false}
-      constrainToWindow={true}
-      isDisabled={false}
-      position="middle-left"
-      text="Show Sidebar"
-      theme="default"
-    >
-      <TetherComponent
-        attachment="middle right"
-        bodyElement={<body />}
-        classPrefix="tooltip"
-        constraints={
-          [
-            {
-              "attachment": "together",
-              "to": "window",
-            },
-          ]
-        }
-        enabled={false}
-        renderElementTag="div"
-        renderElementTo={null}
-        targetAttachment="middle left"
-      >
-        <PlainButton
-          aria-label="Show Sidebar"
-          className="bdl-SidebarToggleButton bdl-is-collapsed"
-          key=".0"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          tabIndex="0"
-          type="button"
-        >
-          <button
-            aria-label="Show Sidebar"
-            className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            tabIndex="0"
-            type="button"
-          >
-            <IconShow
-              height={16}
-              width={16}
-            >
-              <AccessibleSVG
-                className="icon-show "
-                height={16}
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="icon-show "
-                  focusable="false"
-                  height={16}
-                  role="presentation"
-                  viewBox="0 0 16 16"
-                  width={16}
-                >
-                  <path
-                    d="M7.354 7.646l3.292-3.292a.5.5 0 0 0 0-.708L9.354 2.354a.5.5 0 0 0-.708 0L3.354 7.646a.5.5 0 0 0 0 .708l5.292 5.292a.5.5 0 0 0 .708 0l1.292-1.292a.5.5 0 0 0 0-.708L7.354 8.354a.5.5 0 0 1 0-.708z"
-                    fill="#909090"
-                    fillRule="nonzero"
-                  />
-                </svg>
-              </AccessibleSVG>
-            </IconShow>
-          </button>
-        </PlainButton>
-      </TetherComponent>
-    </Tooltip>
-  </SidebarToggleButton>
-</SidebarToggleButton>
-`;
-
-exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as left oriented toggle when closed 1`] = `
-<SidebarToggleButton
-  direction="left"
-  isOpen={false}
->
-  <SidebarToggleButton
-    direction="left"
-    intl={
-      {
-        "formatDate": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatRelativeTime": [Function],
-      }
-    }
-    isOpen={false}
-  >
-    <Tooltip
-      constrainToScrollParent={false}
-      constrainToWindow={true}
-      isDisabled={false}
-      position="middle-right"
-      text="Show Sidebar"
-      theme="default"
-    >
-      <TetherComponent
-        attachment="middle left"
-        bodyElement={<body />}
-        classPrefix="tooltip"
-        constraints={
-          [
-            {
-              "attachment": "together",
-              "to": "window",
-            },
-          ]
-        }
-        enabled={false}
-        renderElementTag="div"
-        renderElementTo={null}
-        targetAttachment="middle right"
-      >
-        <PlainButton
-          aria-label="Show Sidebar"
-          className="bdl-SidebarToggleButton bdl-is-collapsed"
-          key=".0"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          tabIndex="0"
-          type="button"
-        >
-          <button
-            aria-label="Show Sidebar"
-            className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            tabIndex="0"
-            type="button"
-          >
-            <IconHide
-              height={16}
-              width={16}
-            >
-              <AccessibleSVG
-                className="icon-hide "
-                height={16}
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="icon-hide "
-                  focusable="false"
-                  height={16}
-                  role="presentation"
-                  viewBox="0 0 16 16"
-                  width={16}
-                >
-                  <path
-                    d="M7.646 7.646L4.354 4.354a.5.5 0 0 1 0-.708l1.292-1.292a.5.5 0 0 1 .708 0l5.292 5.292a.5.5 0 0 1 0 .708l-5.292 5.292a.5.5 0 0 1-.708 0l-1.292-1.292a.5.5 0 0 1 0-.708l3.292-3.292a.5.5 0 0 0 0-.708z"
-                    fill="#909090"
-                    fillRule="nonzero"
-                  />
-                </svg>
-              </AccessibleSVG>
-            </IconHide>
-          </button>
-        </PlainButton>
-      </TetherComponent>
-    </Tooltip>
-  </SidebarToggleButton>
-</SidebarToggleButton>
-`;
-
-exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as left oriented toggle when open 1`] = `
-<SidebarToggleButton
-  direction="left"
-  isOpen={true}
->
-  <SidebarToggleButton
-    direction="left"
-    intl={
-      {
-        "formatDate": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatRelativeTime": [Function],
-      }
-    }
-    isOpen={true}
-  >
-    <Tooltip
-      constrainToScrollParent={false}
-      constrainToWindow={true}
-      isDisabled={false}
-      position="middle-right"
-      text="Hide Sidebar"
-      theme="default"
-    >
-      <TetherComponent
-        attachment="middle left"
-        bodyElement={<body />}
-        classPrefix="tooltip"
-        constraints={
-          [
-            {
-              "attachment": "together",
-              "to": "window",
-            },
-          ]
-        }
-        enabled={false}
-        renderElementTag="div"
-        renderElementTo={null}
-        targetAttachment="middle right"
-      >
-        <PlainButton
-          aria-label="Hide Sidebar"
-          className="bdl-SidebarToggleButton"
-          key=".0"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          tabIndex="0"
-          type="button"
-        >
-          <button
-            aria-label="Hide Sidebar"
-            className="btn-plain bdl-SidebarToggleButton"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            tabIndex="0"
-            type="button"
-          >
-            <IconShow
-              height={16}
-              width={16}
-            >
-              <AccessibleSVG
-                className="icon-show "
-                height={16}
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="icon-show "
-                  focusable="false"
-                  height={16}
-                  role="presentation"
-                  viewBox="0 0 16 16"
-                  width={16}
-                >
-                  <path
-                    d="M7.354 7.646l3.292-3.292a.5.5 0 0 0 0-.708L9.354 2.354a.5.5 0 0 0-.708 0L3.354 7.646a.5.5 0 0 0 0 .708l5.292 5.292a.5.5 0 0 0 .708 0l1.292-1.292a.5.5 0 0 0 0-.708L7.354 8.354a.5.5 0 0 1 0-.708z"
-                    fill="#909090"
-                    fillRule="nonzero"
-                  />
-                </svg>
-              </AccessibleSVG>
-            </IconShow>
-          </button>
-        </PlainButton>
-      </TetherComponent>
-    </Tooltip>
-  </SidebarToggleButton>
-</SidebarToggleButton>
-`;
-
-exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as open 1`] = `
-<SidebarToggleButton
-  isOpen={true}
->
-  <SidebarToggleButton
-    intl={
-      {
-        "formatDate": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatRelativeTime": [Function],
-      }
-    }
-    isOpen={true}
-  >
-    <Tooltip
-      constrainToScrollParent={false}
-      constrainToWindow={true}
-      isDisabled={false}
-      position="middle-left"
-      text="Hide Sidebar"
-      theme="default"
-    >
-      <TetherComponent
-        attachment="middle right"
-        bodyElement={<body />}
-        classPrefix="tooltip"
-        constraints={
-          [
-            {
-              "attachment": "together",
-              "to": "window",
-            },
-          ]
-        }
-        enabled={false}
-        renderElementTag="div"
-        renderElementTo={null}
-        targetAttachment="middle left"
-      >
-        <PlainButton
-          aria-label="Hide Sidebar"
-          className="bdl-SidebarToggleButton"
-          key=".0"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          tabIndex="0"
-          type="button"
-        >
-          <button
-            aria-label="Hide Sidebar"
-            className="btn-plain bdl-SidebarToggleButton"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            tabIndex="0"
-            type="button"
-          >
-            <IconHide
-              height={16}
-              width={16}
-            >
-              <AccessibleSVG
-                className="icon-hide "
-                height={16}
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="icon-hide "
-                  focusable="false"
-                  height={16}
-                  role="presentation"
-                  viewBox="0 0 16 16"
-                  width={16}
-                >
-                  <path
-                    d="M7.646 7.646L4.354 4.354a.5.5 0 0 1 0-.708l1.292-1.292a.5.5 0 0 1 .708 0l5.292 5.292a.5.5 0 0 1 0 .708l-5.292 5.292a.5.5 0 0 1-.708 0l-1.292-1.292a.5.5 0 0 1 0-.708l3.292-3.292a.5.5 0 0 0 0-.708z"
-                    fill="#909090"
-                    fillRule="nonzero"
-                  />
-                </svg>
-              </AccessibleSVG>
-            </IconHide>
-          </button>
-        </PlainButton>
-      </TetherComponent>
-    </Tooltip>
-  </SidebarToggleButton>
-</SidebarToggleButton>
-`;