fix(header-dropdown): improve ARIA semantics for overlay dropdowns an…

playwright/snapshots/navbar-launchpad.spec.ts-snapshots/si-navbar--si-navbar-launchpad--profile-menu.yaml

@@ -9,8 +9,8 @@
     - link "Item 2":
       - /url: "#/viewer/viewer/item2"
   - button "Help"
-  - button "Jane Smith" [expanded]
-  - group "Jane Smith":
+  - button "Jane Smith" [expanded]: JS
+  - dialog "Jane Smith":
     - text: Jane Smith jane.smith@example.org ExampleOrg Admin
     - separator
     - button "Company"

playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary--normal-expanded.yaml

@@ -6,12 +6,12 @@
     - link "item 1":
       - /url: "#/viewer/viewer/item1"
     - button "item 2" [expanded]
-    - group "item 2":
+    - dialog "item 2":
       - link "sub-item 1":
         - /url: "#/viewer/viewer/subitem1"
       - link "sub-item 2":
         - /url: "#/viewer/viewer/subitem2"
       - link "sub-item 3":
         - /url: "#/viewer/viewer/subitem3"
   - button "Help"
-  - button "Sandipan Chakraborty"
+  - button "Sandipan Chakraborty": SC

playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded.yaml

@@ -11,12 +11,12 @@
     - /url: "#/viewer/viewer/messages"
     - text: ""
   - button "Help"
-  - button "Jane Smith" [expanded]
-  - group "Jane Smith":
+  - button "Jane Smith" [expanded]: JS
+  - dialog "Jane Smith":
     - text: Jane Smith jane.smith.element@siemens.com Siemens Admin
     - separator
     - button "Company" [expanded]
-    - group "Company":
+    - dialog "Company":
       - link "Siemens":
         - /url: "#/company/siemens"
       - link "RSS Region A":

playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded.yaml

@@ -10,11 +10,11 @@
   - button "Notifications"
   - button /\+\d+ Support/
   - button "Settings"
-  - button "Lars Vegas" [expanded]
-  - group "Lars Vegas":
+  - button "Lars Vegas" [expanded]: LV
+  - dialog "Lars Vegas":
     - text: Lars Vegas lars.vegas@siemens.com Siemens AG Admin
     - button "Language" [expanded]
-    - group "Language":
+    - dialog "Language":
       - text: Selection has no effect!
       - button "German"
       - button "English"

playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded.yaml

@@ -6,7 +6,7 @@
     - link "Module 1":
       - /url: "#/viewer/viewer/m1"
     - button "Module 2" [expanded]
-    - group "Module 2":
+    - dialog "Module 2":
       - link "M2.1":
         - /url: "#/viewer/viewer/m2/1"
       - link "M2.2":
@@ -15,4 +15,4 @@
   - button "Notifications"
   - button /\+\d+ Support/
   - button "Settings"
-  - button "Lars Vegas"
+  - button "Lars Vegas": LV

playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded.yaml

@@ -8,9 +8,9 @@
     - button "Module 2"
   - button "Tenant 2"
   - button "Notifications" [expanded]
-  - group "Notifications":
+  - dialog "Notifications":
     - button "Message 1"
     - button "Message 2"
   - button /\+\d+ Support/
   - button "Settings"
-  - button "Lars Vegas"
+  - button "Lars Vegas": LV

playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover.yaml

@@ -4,26 +4,26 @@
   - text: Application name
   - button "Tenant 1"
   - button "5 Notifications" [expanded]
-  - group "5 Notifications":
+  - dialog "5 Notifications":
     - text: ""
     - button "Dismiss all"
-    - text: ""
+    - text: Danger
     - link "Security Alert - Unusual login detected link":
       - /url: https://www.siemens.com
       - text: Just now Security Alert - Unusual login detected A new login from Germany was detected on your account. If this wasn't you, please review your security settings immediately.
-    - text: ""
+    - text: Info
     - link "System Maintenance - Scheduled downtime link":
       - /url: https://www.siemens.com
       - text: One month ago System Maintenance - Scheduled downtime Planned maintenance window completed successfully. All systems are now operational and performance has been improved.
-    - text: ""
+    - text: Info
     - link "Team Update - Sarah joined your project link":
       - /url: https://www.siemens.com
       - text: /\d+\.\d+\.\d+ \d+:\d+ Team Update - Sarah joined your project Sarah Miller has been added to the Industrial IoT Analytics project and has access to all shared resources\./
-    - text: ""
+    - text: Info
     - link "Report Ready - Monthly analytics available link":
       - /url: https://www.siemens.com
       - text: /\d+\.\d+\.\d+ \d+:\d+ Report Ready - Monthly analytics available Your February performance report is ready for download\. Click to view insights and key metrics for this period\./
     - link "Show all":
       - /url: "#"
   - button "Support"
-  - button "John Doe"
+  - button "John Doe": JD

playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu.yaml

@@ -6,13 +6,13 @@
     - /url: "#/"
   - heading "Application name" [level=1]
   - button "Help" [expanded]
-  - group "Help":
+  - dialog "Help":
     - button "Help"
     - button "Tour"
     - button "About"
     - link "Corporate Information":
       - /url: http://www.siemens.com/corporate-information
-  - button "Jane Smith"
+  - button "Jane Smith": JS
 - navigation:
   - button "collapse" [expanded]
   - button "Home"

projects/element-ng/header-dropdown/si-header-dropdown-item.component.ts

@@ -20,6 +20,7 @@ import { SI_HEADER_WITH_DROPDOWNS } from './si-header.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'dropdown-item focus-inside',
+    '[attr.aria-pressed]': 'checked() ? "true" : null',
     '(click)': 'click()'
   }
 })

projects/element-ng/header-dropdown/si-header-dropdown-items-factory.component.html

@@ -26,6 +26,7 @@
         <a
           si-header-dropdown-item
           activeClass="active"
+          [attr.role]="!(item.href || item.link) ? 'button' : undefined"
           [siLink]="item"
           [icon]="item.icon"
           [badge]="item.badgeStyle !== 'dot' ? item.badge : undefined"

projects/element-ng/header-dropdown/si-header-dropdown-trigger.directive.ts

@@ -8,6 +8,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ComponentRef,
+  computed,
   Directive,
   effect,
   ElementRef,
@@ -49,6 +50,7 @@ class SiHeaderAnchorComponent {
     class: 'dropdown-toggle',
     '[id]': 'id',
     '[class.show]': '_isOpen',
+    '[attr.aria-haspopup]': "inline() ? null : 'dialog'",
     '[attr.aria-expanded]': '_isOpen',
     '[attr.aria-controls]': 'ariaControls',
     '(click)': 'click()'
@@ -80,6 +82,12 @@ export class SiHeaderDropdownTriggerDirective implements OnChanges, OnInit, OnDe
   /** @internal */
   readonly navbar = inject(SI_HEADER_WITH_DROPDOWNS, { optional: true });
 
+  /**
+   * Whether the dropdown is opened inline (mobile) instead of in an overlay (desktop).
+   * Inline dropdowns are simple disclosure groups, while overlay dropdowns are dialogs.
+   */
+  protected readonly inline = computed(() => this.navbar?.inlineDropdown() ?? false);
+
   // we need to create a new injector, so that the parent can be injected properly
   private readonly injector = Injector.create({ parent: inject(Injector), providers: [] });
   private viewRef?: EmbeddedViewRef<unknown>;

projects/element-ng/header-dropdown/si-header-dropdown.component.ts

@@ -20,7 +20,7 @@ import { SI_HEADER_DROPDOWN_OPTIONS } from './si-header.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'dropdown-menu position-static',
-    role: 'group',
+    '[attr.role]': "trigger.isOverlay ? 'dialog' : 'group'",
     '[id]': 'trigger.ariaControls',
     '[attr.aria-labelledby]': 'trigger.id',
     '[class.show]': 'trigger.isOpen',

projects/element-ng/header-dropdown/si-header-dropdown.directive.spec.ts

@@ -67,6 +67,17 @@ describe('SiHeaderDropdown', () => {
       expect(await trigger1Harness.isDesktop()).toBe(true);
     });
 
+    it('should expose the trigger as opening a dialog popup', async () => {
+      expect(await trigger1Harness.getAriaHaspopup()).toBe('dialog');
+    });
+
+    it('should declare the open dropdown as a dialog', async () => {
+      await trigger1Harness.toggle();
+
+      const dropdown = await trigger1Harness.getDropdown();
+      expect(await dropdown.getRole()).toBe('dialog');
+    });
+
     it('should close all on outside click', async () => {
       await trigger1Harness.toggle();
       const trigger2Harness = await trigger1Harness
@@ -139,6 +150,17 @@ describe('SiHeaderDropdown', () => {
       expect(await trigger1Harness.isDesktop()).toBe(false);
     });
 
+    it('should not expose a popup on the trigger', async () => {
+      expect(await trigger1Harness.getAriaHaspopup()).toBeNull();
+    });
+
+    it('should declare the open dropdown as a group', async () => {
+      await trigger1Harness.toggle();
+
+      const dropdown = await trigger1Harness.getDropdown();
+      expect(await dropdown.getRole()).toBe('group');
+    });
+
     it('should close only current on toggle click', async () => {
       await trigger1Harness.toggle();
       const dropdown1 = await trigger1Harness.getDropdown();

projects/element-ng/header-dropdown/testing/si-header-dropdown-trigger.harness.ts

@@ -21,6 +21,10 @@ export class SiHeaderDropdownTriggerHarness extends ComponentHarness {
     return this.host().then(host => host.text());
   }
 
+  async getAriaHaspopup(): Promise<string | null> {
+    return this.host().then(host => host.getAttribute('aria-haspopup'));
+  }
+
   async toggle(): Promise<void> {
     return this.host().then(host => host.click());
   }

projects/element-ng/header-dropdown/testing/si-header-dropdown.harness.ts

@@ -18,6 +18,10 @@ export class SiHeaderDropdownHarness extends ComponentHarness {
     return this.host().then(host => host.hasClass('show'));
   }
 
+  async getRole(): Promise<string | null> {
+    return this.host().then(host => host.getAttribute('role'));
+  }
+
   async getItem(item: string): Promise<SiHeaderDropdownItemHarness> {
     return this.locatorFor(SiHeaderDropdownItemHarness.withText(item))();
   }

src/app/examples/si-navbar/si-navbar-primary-end.html

@@ -16,10 +16,10 @@
       title: 'Company',
       icon: 'element-shuffle',
       items: [
-        { title: 'Siemens', link: '/company/siemens', selectionState: 'radio', type: 'radio' },
-        { title: 'RSS Region A', link: '/company/regionA', type: 'radio' },
-        { title: 'RSS Region B', link: '/company/regionB', type: 'radio' },
-        { title: 'RSS Region C', link: '/company/regionC', type: 'radio' }
+        { title: 'Siemens', selectionState: 'radio', type: 'radio' },
+        { title: 'RSS Region A', type: 'radio' },
+        { title: 'RSS Region B', type: 'radio' },
+        { title: 'RSS Region C', type: 'radio' }
       ]
     },
     { title: '-' },