diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
index f33524b795e39fff7585c3829d8094659429afa2..71b3e7c98f8e23d30f056ef4ad65544794294196 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
@@ -61,4 +61,12 @@ describe('NavItemComponent', () => {
       });
     });
   });
+
+  describe('template', () => {
+    describe('host element role attribute', () => {
+      it('should be "menuitem"', () => {
+        expect(fixture.nativeElement.getAttribute('role')).toBe('menuitem');
+      });
+    });
+  });
 });
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
index d5f54907fe995fa082505d3449a236d89b6f4ecb..14acc1a1b2c6f3c6ca800bc30710d5a7adf48cdc 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
@@ -14,7 +14,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
       'border border-transparent hover:border-primary',
       'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
     ]"
-    role="menuitem"
     [attr.data-test-id]="'link-to-' + to"
   >
     <ng-content select="[icon]" />
@@ -24,4 +23,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
 export class NavItemComponent {
   @Input({ required: true }) caption!: string;
   @Input() to: string;
+
+  @HostBinding('attr.role') role = 'menuitem';
 }
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts b/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
index 171397997f1bccc57c87c4a59b014dbd2aa6ed6a..60adf093640b07510296fab35c0a6e4fbb3650e9 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
+++ b/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
@@ -23,7 +23,7 @@ import { twMerge } from 'tailwind-merge';
       *ngIf="isPopupOpen"
       class="absolute max-h-120 min-w-44 max-w-80 animate-fadeIn overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none"
       [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'"
-      role="dialog"
+      role="menu"
       aria-modal="true"
       tabIndex="-1"
       cdkTrapFocus