From 5c388607a9bb7d625c5eeebd84a2ec643d457fb3 Mon Sep 17 00:00:00 2001
From: Karan Mistry <karan.mistry@siemens.com>
Date: Mon, 27 Jul 2026 19:00:26 +0530
Subject: [PATCH] fix(navbar-vertical-next): update toggle button text and
 flyout accessibility

---
 .../navbar-vertical-next.spec.ts              | 36 +++++++++----------
 ...i-navbar-vertical-next--always-flyout.yaml | 10 +++---
 ...avbar-vertical-next--collapsed-flyout.yaml | 10 +++---
 ...t--si-navbar-vertical-next--collapsed.yaml |  6 ++--
 ...al-next--inline-collapse-chip-submenu.yaml |  4 +--
 ...navbar-vertical-next--inline-collapse.yaml |  3 +-
 ...avbar-vertical-next--mobile-collapsed.yaml |  6 ++--
 ...navbar-vertical-next--mobile-expanded.yaml |  6 ++--
 ...ertical-next-badges--collapsed-flyout.yaml | 10 +++---
 ...avbar-vertical-next-badges--collapsed.yaml |  6 ++--
 ...-next--si-navbar-vertical-next-badges.yaml |  6 ++--
 ...ertical-next--si-navbar-vertical-next.yaml |  6 ++--
 ...al-next--si-navbar-vertical-next-text.yaml |  4 +--
 ...si-navbar-vertical-next-group.component.ts |  2 +-
 .../si-navbar-vertical-next.component.ts      |  6 ++--
 .../si-navbar-vertical-next.spec.ts           |  2 +-
 .../si-navbar-vertical-next-badges.html       |  2 +-
 .../si-navbar-vertical-next-routing.html      |  2 +-
 .../si-navbar-vertical-next-text.html         |  2 +-
 .../si-navbar-vertical-next.html              |  2 +-
 20 files changed, 76 insertions(+), 55 deletions(-)

diff --git a/playwright/e2e/element-examples/navbar-vertical-next.spec.ts b/playwright/e2e/element-examples/navbar-vertical-next.spec.ts
index 4c60835f07..4dd16fa288 100644
--- a/playwright/e2e/element-examples/navbar-vertical-next.spec.ts
+++ b/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();
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--always-flyout.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--always-flyout.yaml
index bd03a443b5..a79f4332b7 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--always-flyout.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed-flyout.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed-flyout.yaml
index 3fe4d6512a..812c811eaf 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed-flyout.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed.yaml
index 17e9907b86..c1ed573808 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--collapsed.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse-chip-submenu.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse-chip-submenu.yaml
index 596ab6513b..03eda956c3 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse-chip-submenu.yaml
+++ b/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":
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse.yaml
index bf6a036b8b..dbecfff019 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse.yaml
+++ b/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
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-collapsed.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-collapsed.yaml
index 1f3b022a2a..b2d2f8f80a 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-collapsed.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-expanded.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-expanded.yaml
index ec70854cd8..5cbd02551e 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-expanded.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed-flyout.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed-flyout.yaml
index 503001b70f..9589008f16 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed-flyout.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed.yaml
index e2b9b91c74..b5ba1ddc37 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges--collapsed.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges.yaml
index c146eed78a..e8f3119bf0 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-badges.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next.yaml b/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next.yaml
index ec70854cd8..5cbd02551e 100644
--- a/playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next.yaml
+++ b/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
\ No newline at end of file
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-text.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-text.yaml
index 290f3ae010..c7f1bf782c 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-text.yaml
+++ b/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"
diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts
index bc61342844..b06f17e048 100644
--- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts
+++ b/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',
diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.ts
index 03c7c78a25..1901ec17fb 100644
--- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.ts
+++ b/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.
diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts
index 1ddb5a3f8e..bde4f36284 100644
--- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts
+++ b/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);
diff --git a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-badges.html b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-badges.html
index 77140ba0b7..e0c6fbb94b 100644
--- a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-badges.html
+++ b/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"
   >
diff --git a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-routing.html b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-routing.html
index 43dfde7898..e3ad1de50a 100644
--- a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-routing.html
+++ b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-routing.html
@@ -8,7 +8,7 @@ <h1 class="application-name">Navbar Vertical Next Example</h1>
 
   <si-navbar-vertical-next
     stateId="navbar-vertical-next-routing"
-    toggleButtonText="Toggle"
+    toggleButtonText="Show side navigation"
     [inlineCollapse]="inlineCollapse()"
   >
     <si-navbar-vertical-next-search placeholder="Search..." />
diff --git a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-text.html b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-text.html
index 23471967ee..ed809357f5 100644
--- a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-text.html
+++ b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next-text.html
@@ -27,7 +27,7 @@ <h1 class="application-name">Navbar vertical next text only</h1>
 
   <si-navbar-vertical-next
     stateId="navbar-vertical-next-without-icons"
-    toggleButtonText="Toggle"
+    toggleButtonText="Show side navigation"
     [textOnly]="true"
     [alwaysFlyout]="alwaysFlyout"
     [inlineCollapse]="inlineCollapse"
diff --git a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next.html b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next.html
index 43db88dcac..11a9a43e1b 100644
--- a/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next.html
+++ b/src/app/examples/si-navbar-vertical-next/si-navbar-vertical-next.html
@@ -8,7 +8,7 @@ <h1 class="application-name">Navbar Vertical Next Example</h1>
 
   <si-navbar-vertical-next
     stateId="navbar-vertical-next-with-icons"
-    toggleButtonText="Toggle"
+    toggleButtonText="Show side navigation"
     [alwaysFlyout]="alwaysFlyout"
     [inlineCollapse]="inlineCollapse"
   >