bug: chrome, text not selectable in accordion with delegatesFocus

[ReneZeidler]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing 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 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.

[liamdebeasi]

Thanks for the report. I can reproduce this, and this does appear to be a browser-level issue: https://bugs.chromium.org/p/chromium/issues/detail?id=950357&q=delegatesFocus%20select%20text&can=2