ionic-team / ionic-team/ionic-framework

bug: chrome, text not selectable in accordion with delegatesFocus

Đang mở
#27,052 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug: external ionitron: stale issue
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

v6.x

### Current Behavior

Any text inside an `ion-accordion` element is not selectable.

### Expected Behavior

Text inside the content of an `ion-accordion` element should be selectable the same way as outside an accordion element.

### Steps to Reproduce

1. Open Stackblitz example
2. Try to select any text

### Code Reproduction URL

https://stackblitz.com/edit/ion-accordion-text-selection

### Ionic Info

```
Ionic:

Ionic CLI : 6.20.8 (/usr/local/share/npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.7.0
@angular-devkit/build-angular : 15.2.4
@angular-devkit/schematics : 15.2.4
@angular/cli : 15.2.4
@ionic/angular-toolkit : 8.0.0

Utility:

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

System:

NodeJS : v18.12.1 (/usr/local/bin/node)
npm : 9.6.2
OS : Linux 5.10
```

### Additional Information

Interestingly, this issue does not occur with Firefox on Windows, but it _does_ occur on Chrome/Edge on Windows and Safari on iOS.

Related issues:
- #24956
Same issue with an `ion-item`. The root cause is [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus) being set on `ion-accordion`.
- #25064
This issue sounds like it's also caused by `delegatesFocus`
- #25529
Also some different behavior from Firefox in relation `delegatesFocus`, although I'm not sure if related.

The reason why it works in Firefox is that clicking inside the content area of the accordion doesn't set the focus to the header `ion-item`. On Chrome/Edge, it will focus the header (although it doesn't receive the focus styling, so this isn't immediately obvious).

This means that clicking into the content area and then pressing spacebar does nothing on Firefox, but it will close the accordion on Chrome. It also means that pressing Shift+Tab will focus the header on Firefox, but it will focus the _previous_ accordion on Chrome.

---

In my personal opinion, I don't think clicking inside the content area of an accordion should focus the header. On mobile devices (or mobile emulation in the Chrome dev tools) this also has the effect of scrolling the header of the accordion to the center of the screen when first tapping inside it (as mentioned in #25064, but this works with any non-focusable content in general. See third accordion in the Stackblitz example).

On another note, it seems like a bug with the spec and/or Chrome/Safari implementation that it's impossible to select text inside a shadow element with `delegatesFocus`. At least on the second tap, when the an element inside the shadow root already has focus, clicking in a non-focusable area of the same shadow element doesn't cause the focus to change.
You can test this with the second accordion in the Stackblitz. Focus one of the inputs, then clicking the text above doesn't change focus, yet it still prevents you from selecting text.
But that's not something Ionic can fix.

It seems like the only solution would be to not use `delegatesFocus`. I don't know what intended behaviors depend on `delegatesFocus` being true and if they can be achieved another way. The keyboard navigation seems to depend on it, and that is currently broken on Firefox due to its incomplete implementation of the `delegatesFocus` spec.

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

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

Hướng nghiên cứu

Start with the StackBlitz reproduction and the ion-accordion entry point, focusing on the delegatesFocus behavior across Chrome, Edge, Safari, and Firefox. Verify text selection, focus movement, keyboard navigation, and accordion activation, then ensure the chosen behavior works without regressing those interactions.

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

Đánh giá

Công nghệ
typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
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.