Describe the bug
When using a DynamicPage with a header area that gets snapped (collapsed) on scroll, pressing Shift+Tab to navigate focus backward from the content area to the title area does NOT expand the header. The header remains snapped/hidden, making the header content invisible to keyboard users.
The DynamicPage component already handles forward focus correctly — onContentFocusIn sets scroll-padding-top and calls scrollIntoView to ensure focused content elements are visible. However, there is no equivalent handler for when focus moves backward into the title/header area while the header is snapped.
This is an accessibility (a11y) issue: screen reader and keyboard-only users cannot see the header content (participants, status, dates, etc.) when navigating backward through the page.
Isolated Example
https://stackblitz.com/edit/github-2ee1n6vw?file=src%2FApp.tsx
Reproduction steps
- Open the example above in a browser
- Scroll down until the DynamicPage header snaps (collapses) — only the title area remains visible
- Use Tab to move focus to any element in the content area (e.g., a list item or the "Save" button at the bottom)
- Press Shift+Tab repeatedly to move focus backward toward the title area
- Observe that when focus reaches the title area (breadcrumbs, action buttons, or the expand/collapse button), the header remains snapped — the header content (Participants, Status, Last Updated) is NOT visible
Expected Behaviour
When focus moves to the title area via Shift+Tab (reverse tabbing), the DynamicPage header should automatically expand, making the header content visible — symmetrical to how onContentFocusIn ensures content elements are visible when receiving focus via forward Tab.
The component already has the infrastructure for this:
onContentFocusIn handles forward focus by setting scroll-padding and calling scrollIntoView
headerSnapped setter can programmatically toggle the header state
_toggleHeader() handles the expand/collapse logic
A focusin handler on the title-header wrapper (.ui5-dynamic-page-title-header-wrapper) that un-snaps the header would fix this issue.
Screenshots or Videos
No response
UI5 Web Components for React Version
2.21.3 & latest
UI5 Web Components Version
2.21.1 & latest
Browser
Chrome
Operating System
No response
Additional Context
This behavior was previously reported against the classic OpenUI5 sap.f.DynamicPage in UI5/openui5#4229, but the Web Components DynamicPage is a completely separate implementation.
The Web Components version already handles the analogous forward-focus case (onContentFocusIn at line 325 of DynamicPage.js), so the fix would be adding a symmetric handler for focus entering the title area while the header is snapped.
WCAG 2.1 Success Criterion 2.4.3 (Focus Order) requires that focus order preserves meaning and operability — a snapped header hiding content from keyboard users during reverse navigation violates this principle.
Relevant log output
Organization
SAP SuccessFactors
Declaration
Describe the bug
When using a DynamicPage with a header area that gets snapped (collapsed) on scroll, pressing Shift+Tab to navigate focus backward from the content area to the title area does NOT expand the header. The header remains snapped/hidden, making the header content invisible to keyboard users.
The DynamicPage component already handles forward focus correctly — onContentFocusIn sets scroll-padding-top and calls scrollIntoView to ensure focused content elements are visible. However, there is no equivalent handler for when focus moves backward into the title/header area while the header is snapped.
This is an accessibility (a11y) issue: screen reader and keyboard-only users cannot see the header content (participants, status, dates, etc.) when navigating backward through the page.
Isolated Example
https://stackblitz.com/edit/github-2ee1n6vw?file=src%2FApp.tsx
Reproduction steps
Expected Behaviour
When focus moves to the title area via Shift+Tab (reverse tabbing), the DynamicPage header should automatically expand, making the header content visible — symmetrical to how onContentFocusIn ensures content elements are visible when receiving focus via forward Tab.
The component already has the infrastructure for this:
onContentFocusIn handles forward focus by setting scroll-padding and calling scrollIntoView
headerSnapped setter can programmatically toggle the header state
_toggleHeader() handles the expand/collapse logic
A focusin handler on the title-header wrapper (.ui5-dynamic-page-title-header-wrapper) that un-snaps the header would fix this issue.
Screenshots or Videos
No response
UI5 Web Components for React Version
2.21.3 & latest
UI5 Web Components Version
2.21.1 & latest
Browser
Chrome
Operating System
No response
Additional Context
This behavior was previously reported against the classic OpenUI5 sap.f.DynamicPage in UI5/openui5#4229, but the Web Components DynamicPage is a completely separate implementation.
The Web Components version already handles the analogous forward-focus case (onContentFocusIn at line 325 of DynamicPage.js), so the fix would be adding a symmetric handler for focus entering the title area while the header is snapped.
WCAG 2.1 Success Criterion 2.4.3 (Focus Order) requires that focus order preserves meaning and operability — a snapped header hiding content from keyboard users during reverse navigation violates this principle.
Relevant log output
Organization
SAP SuccessFactors
Declaration