ionic-team / ionic-team/ionic-framework

bug: focus is not trapped when presenting an overlay from another overlay

Đang mở
#25,994 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly

### Current Behavior

When an alert is opened from an action sheet, it doesn't immediately trap the focus within the alert. Instead, the focus cycles through the underlying page elements up until it reaches the alert buttons. Once it has reached the alert button, the focus remains properly trapped.

### Expected Behavior

The focus should be immediately trapped within the alert, just like it would when opening the alert from a button.

### Steps to Reproduce

- Open action sheet by clicking ellipsis icon in the top-right
- Click action sheet button to open an alert
- Hit "Tab" key

### Code Reproduction URL

https://github.com/jeroenkroese/IonicAlertFocusBug

### Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.2.8
@angular-devkit/build-angular : 14.2.3
@angular-devkit/schematics : 14.2.3
@angular/cli : 14.2.3
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.3.0
@capacitor/android : not installed
@capacitor/core : 4.3.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.0

System:

NodeJS : v16.16.0 (/usr/local/Cellar/node@16/16.16.0/bin/node)
npm : 8.18.0
OS : macOS Monterey

### Additional Information

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with the linked Code Reproduction URL and reproduce the Tab sequence after opening an alert from an action sheet. Trace the overlay focus behavior involved in that transition; done means focus is immediately confined to the alert, matching the behavior when it is opened from a button.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
accessibility, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.