diff --git a/projects/angular/src/wizard/wizard-stepnav-item.spec.ts b/projects/angular/src/wizard/wizard-stepnav-item.spec.ts
index 2b8ee3fc73..221b2136a3 100644
--- a/projects/angular/src/wizard/wizard-stepnav-item.spec.ts
+++ b/projects/angular/src/wizard/wizard-stepnav-item.spec.ts
@@ -272,11 +272,11 @@ export default function (): void {
         });
 
         it('should have aria-controls attribute', () => {
-          const stepNavItemId = testItemComponent.id;
+          const pageId = testItemComponent.page.id;
 
           expect(myStepnavItem.hasAttribute('aria-controls')).toBeTruthy('stepnav item should have aria-controls attr');
           const myAriaControls = myStepnavItem.getAttribute('aria-controls');
-          expect(myAriaControls).toBe(stepNavItemId, 'aria-controls should contain id');
+          expect(myAriaControls).toBe(pageId, 'aria-controls should contain page id');
         });
 
         it('should add disabled attribute when isDisabled return true', () => {
diff --git a/projects/angular/src/wizard/wizard-stepnav-item.ts b/projects/angular/src/wizard/wizard-stepnav-item.ts
index 78b4f2ad25..6014e02a89 100644
--- a/projects/angular/src/wizard/wizard-stepnav-item.ts
+++ b/projects/angular/src/wizard/wizard-stepnav-item.ts
@@ -36,7 +36,7 @@ import { ClrWizardPage } from './wizard-page';
   host: {
     '[id]': 'id',
     '[attr.aria-current]': 'stepAriaCurrent',
-    '[attr.aria-controls]': 'id',
+    '[attr.aria-controls]': 'page.id',
     '[class.clr-nav-link]': 'true',
     '[class.nav-item]': 'true',
     '[class.active]': 'isCurrent',