[SF-ACC][DynamicPage]: form field will be hidden by the floating footer when using tab key
GongRichard opened this issue · 7 comments
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
- open page https://stackblitz.com/edit/github-7xhsfg?file=src%2FApp.tsx
- use tab key to access the form fields
- 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.
Hi @GongRichard
the footer of the DynamicPage is floating by design and you can just scroll to see the full content.
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
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.
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
I quickly checked and it seems that this is already possible to prevent. I found two options to achieve this:
- Using CSS. By using
scroll-padding-block-endor the respective physical property. - 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.
Hi @Lukas742 ,
Would you please release this fix to next version v1.29.4?
Thanks,
Richard
🎉 This issue has been resolved in version v1.29.4 🎉
The release is available on v1.29.4
Your semantic-release bot 📦🚀