search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
426 stars 94 forks source link

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

Closed GongRichard closed 3 days ago

GongRichard commented 3 days ago

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 image

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

Lukas742 commented 3 days ago

Hi @GongRichard

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

GongRichard commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

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.