fix(navbar-vertical-next): update toggle button text and flyout accessibility

playwright/e2e/element-examples/navbar-vertical-next.spec.ts

@@ -23,9 +23,9 @@ test.describe('navbar vertical next', () => {
   test(example + ' collapsed', async ({ page, si }) => {
     await si.visitExample(example);
 
-    await page.getByLabel('Toggle', { exact: true }).click();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
     await page.getByRole('button', { name: 'User management' }).click();
-    await expect(page.getByRole('group', { name: 'User management' })).toBeVisible();
+    await expect(page.getByRole('dialog', { name: 'User management' })).toBeVisible();
     await page.getByRole('link', { name: 'Sub item 2' }).click();
 
     await si.waitForAllAnimationsToComplete();
@@ -48,7 +48,7 @@ test.describe('navbar vertical next', () => {
     );
 
     await page.getByRole('button', { name: 'User management' }).click();
-    await expect(page.getByRole('group', { name: 'User management' })).toBeVisible();
+    await expect(page.getByRole('dialog', { name: 'User management' })).toBeVisible();
 
     await si.waitForAllAnimationsToComplete();
     await si.runVisualAndA11yTests('always-flyout');
@@ -59,8 +59,8 @@ test.describe('navbar vertical next', () => {
 
     await page.getByRole('checkbox', { name: 'Inline collapse' }).check();
 
-    await page.getByLabel('Toggle', { exact: true }).click();
-    await expect(page.getByLabel('Toggle', { exact: true })).toHaveAttribute(
+    await page.getByLabel('Show side navigation', { exact: true }).click();
+    await expect(page.getByLabel('Show side navigation', { exact: true })).toHaveAttribute(
       'aria-expanded',
       'false'
     );
@@ -76,7 +76,7 @@ test.describe('navbar vertical next', () => {
     await page.getByRole('checkbox', { name: 'Inline collapse' }).check();
     await page.getByRole('button', { name: 'User management' }).click();
     await page.getByRole('link', { name: 'Sub item', exact: true }).click();
-    await page.getByLabel('Toggle', { exact: true }).click();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
     await si.waitForAllAnimationsToComplete();
 
     const chip = page.locator('button[aria-haspopup="dialog"]');
@@ -97,7 +97,7 @@ test.describe('navbar vertical next', () => {
     await page.getByRole('checkbox', { name: 'Inline collapse' }).check();
     await page.getByRole('button', { name: 'User management' }).click();
     await page.getByRole('link', { name: 'Sub item', exact: true }).click();
-    await page.getByLabel('Toggle', { exact: true }).click();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
     await si.waitForAllAnimationsToComplete();
 
     const chip = page.locator('button[aria-haspopup="dialog"]');
@@ -115,7 +115,7 @@ test.describe('navbar vertical next', () => {
     await page.getByRole('checkbox', { name: 'Inline collapse' }).check();
     await page.getByRole('button', { name: 'User management' }).click();
     await page.getByRole('link', { name: 'Sub item', exact: true }).click();
-    await page.getByLabel('Toggle', { exact: true }).click();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
 
     const chip = page.locator('button[aria-haspopup="dialog"]');
     await chip.click();
@@ -127,12 +127,12 @@ test.describe('navbar vertical next', () => {
 
   test.skip('it should show tooltip only on keyboard interaction', async ({ page, si }) => {
     await si.visitExample(example);
-    await page.getByLabel('Toggle', { exact: true }).click();
-    await expect(page.getByLabel('Toggle', { exact: true })).toBeVisible();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
+    await expect(page.getByLabel('Show side navigation', { exact: true })).toBeVisible();
     await si.waitForAllAnimationsToComplete();
     const userManagement = page.getByRole('button', { name: 'User management' });
     const tooltip = page.getByRole('tooltip', { name: 'User management' });
-    const group = page.getByRole('group', { name: 'User management' });
+    const group = page.getByRole('dialog', { name: 'User management' });
 
     // This checks the tooltip is visible when using the keyboard
     await userManagement.focus();
@@ -155,7 +155,7 @@ test.describe('navbar vertical next', () => {
     await page.setViewportSize({ width: 570, height: 600 });
     await si.visitExample(example, false);
 
-    await expect(page.getByLabel('Toggle', { exact: true })).toBeVisible();
+    await expect(page.getByLabel('Show side navigation', { exact: true })).toBeVisible();
 
     await si.waitForAllAnimationsToComplete();
     await si.runVisualAndA11yTests('mobile-collapsed');
@@ -165,18 +165,18 @@ test.describe('navbar vertical next', () => {
     await page.setViewportSize({ width: 570, height: 600 });
     await si.visitExample(example, false);
 
-    await page.getByLabel('Toggle', { exact: true }).click();
-    await expect(page.getByLabel('Toggle', { exact: true })).toHaveAttribute(
+    await page.getByLabel('Show side navigation', { exact: true }).click();
+    await expect(page.getByLabel('Show side navigation', { exact: true })).toHaveAttribute(
       'aria-expanded',
       'true'
     );
     await page.getByText('Documentation').click();
     await page.getByRole('link', { name: 'Sub item 4' }).click();
-    await expect(page.getByLabel('Toggle', { exact: true })).toHaveAttribute(
+    await expect(page.getByLabel('Show side navigation', { exact: true })).toHaveAttribute(
       'aria-expanded',
       'false'
     );
-    await page.getByLabel('Toggle', { exact: true }).click();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
 
     await si.waitForAllAnimationsToComplete();
     await si.runVisualAndA11yTests('mobile-expanded');
@@ -202,9 +202,9 @@ test.describe('navbar vertical next badges', () => {
   test(example + ' collapsed', async ({ page, si }) => {
     await si.visitExample(example);
 
-    await page.getByLabel('Toggle', { exact: true }).click();
+    await page.getByLabel('Show side navigation', { exact: true }).click();
     await page.getByRole('button', { name: 'Group with badges' }).click();
-    await expect(page.getByRole('group', { name: 'Group with badges' })).toBeVisible();
+    await expect(page.getByRole('dialog', { name: 'Group with badges' })).toBeVisible();
     await page.getByRole('link', { name: 'Sub item info' }).click();
 
     await si.waitForAllAnimationsToComplete();

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--always-flyout.yaml

@@ -5,15 +5,15 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle" [expanded]
+  - button "Show side navigation" [expanded]
   - textbox "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
   - text: Modules
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
-  - button "User management"
-  - group "User management":
+  - button "User management" [expanded]
+  - dialog "User management":
     - link "Sub item":
       - /url: "#/viewer/viewer/subItem"
     - link "Sub item 2":
@@ -31,4 +31,6 @@
   - heading "Here is a title" [level=2]
   - text: Content with path 'home' Control panel
   - checkbox "Always flyout" [checked]
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed-flyout.yaml

@@ -5,14 +5,14 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
   - button "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
-  - button "User management"
-  - group "User management":
+  - button "User management" [expanded]
+  - dialog "User management":
     - link "Sub item":
       - /url: "#/viewer/viewer/subItem"
     - link "Sub item 2":
@@ -30,4 +30,6 @@
   - heading "Here is a title" [level=2]
   - text: Content with path 'subItem2' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed.yaml

@@ -5,7 +5,7 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
   - button "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
@@ -24,4 +24,6 @@
   - heading "Here is a title" [level=2]
   - text: Content with path 'subItem2' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse-chip-submenu.yaml

@@ -5,7 +5,7 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
   - button "User management" [expanded]
 - main:
   - heading "Here is a title" [level=2]
@@ -14,7 +14,7 @@
   - text: Always flyout
   - checkbox "Inline collapse" [checked]
   - text: Inline collapse
-- group "User management":
+- dialog "User management":
   - link "Sub item":
     - /url: "#/viewer/viewer/subItem"
   - link "Sub item 2":

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse.yaml

@@ -5,7 +5,8 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
+  - button "Home"
 - main:
   - heading "Here is a title" [level=2]
   - text: Content with path 'home' Control panel

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-collapsed.yaml

@@ -5,9 +5,11 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
 - main:
   - heading "Here is a title" [level=2]
   - text: Content with path 'home' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-expanded.yaml

@@ -5,7 +5,7 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle" [expanded]
+  - button "Show side navigation" [expanded]
   - textbox "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
@@ -31,4 +31,6 @@
   - heading "Here is a title" [level=2]
   - text: Content with path 'subItem4' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed-flyout.yaml

@@ -5,14 +5,14 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Badges Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
   - button "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
   - link "Text badge Info":
     - /url: "#/viewer/viewer/text-badge"
-  - button "Group with badges 6"
-  - group "Group with badges 6":
+  - button "Group with badges 6" [expanded]
+  - dialog "Group with badges 6":
     - link "Sub item critical 1":
       - /url: "#/viewer/viewer/sub-badge-1"
     - link "Sub item info 2":
@@ -31,4 +31,6 @@
   - heading "Badge Examples" [level=2]
   - text: Content with path 'sub-badge-2' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed.yaml

@@ -5,7 +5,7 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Badges Example" [level=1]
 - navigation:
-  - button "Toggle"
+  - button "Show side navigation"
   - button "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
@@ -25,4 +25,6 @@
   - heading "Badge Examples" [level=2]
   - text: Content with path 'sub-badge-2' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges.yaml

@@ -5,7 +5,7 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Badges Example" [level=1]
 - navigation:
-  - button "Toggle" [expanded]
+  - button "Show side navigation" [expanded]
   - textbox "Search..."
   - link "Home Text":
     - /url: "#/viewer/viewer/home"
@@ -32,4 +32,6 @@
   - heading "Badge Examples" [level=2]
   - text: Content with path 'sub-badge-1' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next.yaml

@@ -5,7 +5,7 @@
     - /url: "#/"
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
-  - button "Toggle" [expanded]
+  - button "Show side navigation" [expanded]
   - textbox "Search..."
   - link "Home":
     - /url: "#/viewer/viewer/home"
@@ -31,4 +31,6 @@
   - heading "Here is a title" [level=2]
   - text: Content with path 'subItem4' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/static.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-text.yaml

@@ -4,9 +4,9 @@
   - link "Siemens logo":
     - /url: "#/"
   - heading "Navbar vertical next text only" [level=1]
-  - button "Jane Smith"
+  - button "Jane Smith": JS
 - navigation:
-  - button "Toggle" [expanded]
+  - button "Show side navigation" [expanded]
   - button "Home"
   - group "Home"
   - button "Documentation"

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts

@@ -30,7 +30,7 @@ import { SI_NAVBAR_VERTICAL_NEXT } from './si-navbar-vertical-next.provider';
   }`,
   styleUrl: './si-navbar-vertical-next-group.component.scss',
   host: {
-    role: 'group',
+    '[attr.role]': "groupTrigger.flyout() ? 'dialog' : 'group'",
     '[id]': 'groupTrigger.groupId',
     '[attr.aria-labelledby]': 'groupTrigger.id',
     'animate.enter': 'component-enter',

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.ts

@@ -124,10 +124,12 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
    *
    * @defaultValue
    * ```
-   * t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`)
+   * t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Show side navigation`)
    * ```
    */
-  readonly toggleButtonText = input(t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`));
+  readonly toggleButtonText = input(
+    t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Show side navigation`)
+  );
 
   /**
    * An optional stateId to uniquely identify a component instance.

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts

@@ -353,7 +353,7 @@ describe('SiNavbarVerticalNext', () => {
       await fixture.whenStable();
 
       const item = page.getByRole('button', { name: 'item1' });
-      const collapseToggle = page.getByRole('button', { name: 'Toggle' });
+      const collapseToggle = page.getByRole('button', { name: 'Show side navigation' });
 
       // User expands the group inline.
       await userEvent.click(item);

src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-badges.html

@@ -8,7 +8,7 @@ <h1 class="application-name">Navbar Vertical Next Badges Example</h1>
 
   <si-navbar-vertical-next
     stateId="navbar-vertical-next-badges"
-    toggleButtonText="Toggle"
+    toggleButtonText="Show side navigation"
     [alwaysFlyout]="alwaysFlyout"
     [inlineCollapse]="inlineCollapse"
   >