[SF-ACC][DynamicPage]: form field will be hidden by the floating footer when using tab key

[GongRichard]

Describe the bug

form field will be hidden by floating footer when using tab key to access page

Isolated Example

https://stackblitz.com/edit/github-7xhsfg?file=src%2FApp.tsx

Reproduction steps

1. open page https://stackblitz.com/edit/github-7xhsfg?file=src%2FApp.tsx
2. use tab key to access the form fields
3. some fields will be hidden by the floating footer

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

MAC OS

Additional Context

No response

Relevant log output

No response

Organization

SAP SuccessFactors

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @GongRichard

the footer of the DynamicPage is floating by design and you can just scroll to see the full content.

[GongRichard]

Hi @Lukas742 ,
How to set DynamicPage to show scroll bar only in the content and not in the whole page?
For ui5 DynamicPage https://sapui5.hana.ondemand.com/#/api/sap.f.DynamicPage, it has fitContent property.
Thanks,
Richard

[Lukas742]

Currently there is no equivalent to fitContent, as every use case could be solved with standard CSS so far and therefore we decided that we don't need this as prop.

Could you explain your use case in more detail? I can then check if it's already feasible to implement, or if a dedicated feature request is necessary.

[GongRichard]

Hi @Lukas742 ,
We got a customer a11y issue, our page was just like the sample https://stackblitz.com/edit/github-7xhsfg?file=src%2FApp.tsx, the scrollbar was in the dynamic page, then the floating footer would hide the form field when user used tab key to access the form field.
Thanks,
Richard

[Lukas742]

I quickly checked and it seems that this is already possible to prevent. I found two options to achieve this:

1. Using CSS. By using scroll-padding-block-end or the respective physical property.
2. Adding the footer below the page.

I've created an example for both options here: https://stackblitz.com/edit/github-7xhsfg-ysr8cg?file=src%2FApp.tsx,src%2Findex.css,src%2Fmain.tsx

Since the first approach is maybe something we can offer out of the box, I'll reopen this issue and treat it as feature request.

[GongRichard]

Hi @Lukas742 ,
Would you please release this fix to next version v1.29.4?
Thanks,
Richard

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v1.29.4 🎉

The release is available on v1.29.4

Your semantic-release bot 📦🚀