bug: ion-menu focuses its full-screen host on open and does not restore focus to ion-menu-button on close; ion-menu-button reads aria-label only once

未关闭
  • 哪里不对？
#31,620 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
45/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
typescript
领域
accessibility, frontend

调研方向

The issue identifies ion-menu focus handling and ion-menu-button label updates, but names no Ionic source files or tests. Start by locating those components and their existing accessibility tests, then reproduce the reported open, close, and runtime label changes. Done when focus moves to the visible menu on open, returns to the opener on close, and updated labels are reflected.

由索引模型根据 Issue 内容生成。

描述

type: bug
Prerequisites
Ionic Framework Version

v8.x

Current Behavior
  1. When an ion-menu is closed with the keyboard (Escape or a close button inside the menu),
    the menu blurs the focused element and does not return focus to the ion-menu-button that
    opened it. The focus lands on <body>; a keyboard or screen reader user has to start over
    from the top of the page. Measured on Android 14 (Chromium WebView) and iOS 26 (WKWebView).
  2. ion-menu-button reads its aria-label once (inheritAttributes on load). When the app
    changes the label at runtime (language switch), the button keeps the old name until the
    next page is rendered, while ion-menu itself picks up a new aria-label immediately.
  3. Without an app-provided label the button and the menu are announced with the English
    defaults ("menu", "Navigation. In menu") regardless of the document language.
  4. When the menu opens, ion-menu moves focus to its own host element (afterAnimation calls
    this.el.focus() with tabindex="0" set in beforeAnimation). The host has
    role="navigation" and covers the whole viewport (left/right/top/bottom: 0, backdrop
    included), so TalkBack draws its focus frame around the entire screen instead of the visible
    menu panel and announces only the landmark name. Measured on Android 14 (Chromium WebView,
    TalkBack): after opening, document.activeElement is the ion-menu host.

Verified with the reproduction on Ionic 8.8.5 (Chrome 154, page "2 ion-menu focus"): after closing the menu
document.activeElement is <body>; after changing the host aria-label to "Open menu" the inner button still
carries "Menü öffnen".

Expected Behavior
  • Closing the menu restores focus to the element that opened it, as ion-modal,
    ion-popover and ion-alert do.
  • aria-label changes on ion-menu-button are reflected.
  • Opening the menu focuses the visible menu panel (.menu-inner) or its first focusable
    element, so the screen reader focus matches what is visible.
Steps to Reproduce
  • Closing the menu restores focus to the element that opened it, as ion-modal,
    ion-popover and ion-alert do.
  • aria-label changes on ion-menu-button are reflected.
  • Opening the menu focuses the visible menu panel (.menu-inner) or its first focusable
    element, so the screen reader focus matches what is visible.
Code Reproduction URL

https://stackblitz.com/github/mrambow/starterApp/tree/a11y-repros (page /repro/menu)
GitHub: https://github.com/mrambow/starterApp/tree/a11y-repros (src/app/repros/menu.page.ts)

Code Reproduction URL

https://github.com/mrambow/starterApp/tree/a11y-repros

Ionic Info

Ionic 8.8.5, Angular 17.3, Capacitor 6 (reproduction); found in Ionic 8.8.5, Angular 21, Capacitor 8

Additional Information

No response

主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
2 天 21 小时
30 天内合并 PR
65

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

ionic-team/ionic-framework 的其他 Issue

查看 ionic-team/ionic-framework 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。