From cd3d0334bfafcb43fdb1c93f82a8719e1d66c5a8 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Fri, 23 Feb 2024 08:24:36 +0100
Subject: [PATCH] fix(core/burger-menu): a11y expand state (#1112)

---
 .../core/src/components/menu/burger-menu.scss |  4 ----
 .../core/src/components/menu/burger-menu.tsx  |  5 ++++-
 .../core/src/components/menu/test/menu.ct.ts  | 22 +++++++++++++++++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/menu/burger-menu.scss b/packages/core/src/components/menu/burger-menu.scss
index d3d4a453916..9d6587d531e 100644
--- a/packages/core/src/components/menu/burger-menu.scss
+++ b/packages/core/src/components/menu/burger-menu.scss
@@ -74,8 +74,4 @@ $focus-bdr-width: 0.0625rem;
     transform: rotate(45deg);
     y: 11px;
   }
-
-  ix-icon-button {
-    transform: rotate(180deg);
-  }
 }
diff --git a/packages/core/src/components/menu/burger-menu.tsx b/packages/core/src/components/menu/burger-menu.tsx
index 074bcb276e4..102a8ef99e4 100644
--- a/packages/core/src/components/menu/burger-menu.tsx
+++ b/packages/core/src/components/menu/burger-menu.tsx
@@ -52,7 +52,10 @@ export class BurgerMenu {
         }}
       >
         {this.pinned ? (
-          <ix-icon-button icon={'double-chevron-right'} ghost></ix-icon-button>
+          <ix-icon-button
+            icon={`double-chevron-${this.expanded ? 'left' : 'right'}`}
+            ghost
+          ></ix-icon-button>
         ) : (
           <button
             class={{
diff --git a/packages/core/src/components/menu/test/menu.ct.ts b/packages/core/src/components/menu/test/menu.ct.ts
index 1bf6f09a1c4..d05d32be23d 100644
--- a/packages/core/src/components/menu/test/menu.ct.ts
+++ b/packages/core/src/components/menu/test/menu.ct.ts
@@ -206,6 +206,28 @@ test('should close menu by bottom icon click', async ({ mount, page }) => {
   await expect(element).toBeVisible();
 });
 
+test('should have correct aria label', async ({ mount, page }) => {
+  await mount(`
+    <ix-menu pinned>
+    </ix-menu>
+    `);
+
+  await page.locator('ix-menu');
+  const chevronButton = page.locator('ix-icon-button button');
+
+  await expect(chevronButton).toHaveAttribute(
+    'aria-label',
+    'Double Chevron Right'
+  );
+
+  chevronButton.click();
+
+  await expect(chevronButton).toHaveAttribute(
+    'aria-label',
+    'Double Chevron Left'
+  );
+});
+
 async function clickAboutButton(element: Locator, page: Page) {
   const aboutButton = element.locator('ix-menu-item#aboutAndLegal');
   await aboutButton.click();