bug: Keyboard focus order breaks when using slot="fixed" in IonContent

[ijsje71]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

The keyboard focus for accessibility works quite well with Ionic and can be modified to include elements that would normally not be included in the keyboard focus. Using ion-focusable and the ion-focused classes I can create a pleasant experience for users that rely on keyboard focus instead of a mouse.

The only problem I'm facing with keyboard focus is elements that receive the slot="fixed" property in an element that's a child of IonContent. When an element is placed at the very top of the DOM with the slot="fixed" property, it is receives focus as the very last element, even though it is placed on top of the DOM.

I've tried using tab indexes to influence the order of the keyboard focus, without any success. My guess is that this is related to the fact that the slot="fixed" property places the content behind the other items in IonContent in the shadow DOM.

Expected Behavior

I expect the keyboard focus to ignore the fact what slot it receives in the shadow DOM and the slot="fixed" does not interfere with the order that the DOM is read.

Steps to Reproduce

1. Go to https://stackblitz.com/~/github.com/ijsje71/keyboard-focus-order-wrong-position-fixed and open the example in full screen mode (or clone the repository and run the project locally)

2. Start the app

3. Press tab to trigger the keyboard focus

4. Keep pressing tab until you've focused all the items

5. Notice that the segmented picker at the top of the page is focused last

6. Now remove the slot="fixed" tag on the segmented picker

7. Press tab to trigger the keyboard focus again and keep pressing it to see the order

8. Notice that the keyboard focus is behaving as expected

This is unexpected behaviour, as the segmented picker is positioned at the top of the DOM. If the segmented picker opens different content, the user needs to keep tabbing through the entire page until it reaches the content again. This is not much of an issue, but this becomes a bigger problem when there's more content on the surrounding pages such as a menu. Skiplinks can be used as a workaround for this issue, but this is not ideal.

Code Reproduction URL

https://github.com/ijsje71/keyboard-focus-order-wrong-position-fixed#

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/react 8.5.7

Capacitor:

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

Utility:

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

System:

NodeJS : v22.14.0
npm : 10.9.2
OS : macOS Unknown

Additional Information

No response