search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.48k stars 254 forks source link

[SF_ACC][FileUploader]: Input is skipped in the reverse tabbing order in the dialog #9090

Closed ksblklu02 closed 1 month ago

ksblklu02 commented 1 month ago

Bug Description

With JAWS, When user navigate with Tab key on all the input field until reaching Cancel button -> After press Shift+Tab and continue tabbing until reaching the FileUploader Input Upon pressing the Shift+Tab key again -> Observe that the focus skips the input field, resulting in an incorrect tab order.

Affected Component

ui5-file-uploader

Expected Behaviour

The tabbing order defined on the page is logical and tab order should not get trapped, Also user should be able to tab through the entire page and shift+tab back in the same reverse order.

Isolated Example

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

Steps to Reproduce

  1. Go to https://stackblitz.com/edit/github-utmbsj?file=src%2FApp.tsx
  2. Click"open dialog" button
  3. Tabbing to the cancel button, and then use Shift + Tab reverse tab to the FileUploader component
  4. See the FileUploader input was skipped in reverse tabbing order

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

Mac OS

Additional Context

No response

Organization

SAP SuccessFactors

Declaration

niyap commented 1 month ago

Hello @SAP/ui5-webcomponents-topic-b,

When ui5-file-uploader without button but just an input field is placed within a dialog as a first element, it receives focus which I think is not expected, as it does not receive focus in any other use case. On backward navigation the same component is not focused. Here is a sample: Playground

The issue can be reproduced in the provided StackBlitz sample as well.

Could you please check?

Thank you in advance!

Kind Regards, Niya