ionic-team / ionic-team/ionic-framework
bug: chrome, text not selectable in accordion with delegatesFocus
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 51
説明
### 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.
コントリビューションガイド
評価
この issue はまだ評価されていません。