Accessibility - Tab indexing or Tab order not working for FlutterFlow PWA application.

sujitmahadik001 commented 7 months ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

We are developing a PWA for users with disability(mostly hearing and visibility impaired). Ideally when user presses the 'TAB' keys the focus must be shifted to the interactive elements present on the screen. This does not happen in our currently developed PWA application. I have added a demo code for the same here. demo_Code.zip

Expected Behavior

Ideally when user presses the 'Tab' key on keyboard, the focus must be shifted on the interactive elements present on the screen.

Steps to Reproduce

Open PWA app link in Win10+chrome or MacBook + Safari browser.
Click on 'Start Quiz' button.
Once user reaches the first question screen.
Press the 'Tab' key to move focus on interactive elements of the screen.

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

https://app.flutterflow.io/project/demo-test-7nv73t

Context

We are not able to make the PWA app accessible.

Visual documentation

https://github.com/FlutterFlow/flutterflow-issues/assets/158022710/948727b5-c9a3-49c1-bcdd-231d0b78a032

Additional Info

Win 10 + Chrome or Edge browser MacBook Air + Safari or Chrome

Environment

- FlutterFlow version:V4.0
- Platform: Web Win10, MacBook iOS 13 and above
- Browser name and version: Chrome + Safari
- Operating system and version affected: Win 10 and MacOS(all)

hariprasadms commented 7 months ago

Hi @sujitmahadik001 - Thanks for submitting the issue.

@dev note - Tab indexing works correctly when a text field is initially in focus. Otherwise, it does not work when there are only buttons.

sujitmahadik001 commented 7 months ago

Hi hari, We have not used any input text fields. We have only used Labels and buttons.

Hi @sujitmahadik001 - Thanks for submitting the issue.

@dev note - Tab indexing works correctly when a text field is initially in focus. Otherwise, it does not work when there are only buttons.

FlutterFlow / flutterflow-issues