fix(core/burger-menu): a11y expand state (#1112)

siemens · Feb 23, 2024 · cd3d033 · cd3d033
1 parent 62b7565
commit cd3d033
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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();