diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts
index 81ecdb7bb6..cec0d727c8 100644
--- a/packages/color-slider/test/color-slider.test.ts
+++ b/packages/color-slider/test/color-slider.test.ts
@@ -108,15 +108,15 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        el.focusElement.dispatchEvent(new FocusEvent('focus'));
+        el.dispatchEvent(new FocusEvent('focusin'));
         await elementUpdated(el);
 
-        expect(el.focused);
+        expect(el.focused).to.be.true;
 
-        el.focusElement.dispatchEvent(new FocusEvent('blur'));
+        el.dispatchEvent(new FocusEvent('focusout'));
         await elementUpdated(el);
 
-        expect(!el.focused);
+        expect(el.focused).to.be.false;
     });
     it('dispatches input and change events in response to "Arrow*" keypresses', async () => {
         const inputSpy = spy();
@@ -356,7 +356,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        const { handle } = (el as unknown) as { handle: HTMLElement };
+        const { handle } = el as unknown as { handle: HTMLElement };
 
         handle.setPointerCapture = () => {
             return;
@@ -461,7 +461,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        const { handle } = (el as unknown) as { handle: HTMLElement };
+        const { handle } = el as unknown as { handle: HTMLElement };
 
         handle.setPointerCapture = () => {
             return;
@@ -526,7 +526,7 @@ describe('ColorSlider', () => {
         document.documentElement.dir = 'rtl';
         await elementUpdated(el);
 
-        const { handle } = (el as unknown) as { handle: HTMLElement };
+        const { handle } = el as unknown as { handle: HTMLElement };
         const clientWidth = document.documentElement.offsetWidth;
 
         handle.setPointerCapture = () => {