bug: accessibility issues with popup modals

[SuhelMakkad]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

Accessibility issues with popup modals.
When I try navigating with the tab key, the focus is getting stuck on the model itself (see the below video)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to the authentication tab
2. Click on Users on the sidebar
3. Click on add user -> create new user
4. Hit the tab to go to the next input field
5. The focus will shift to the modal and then again come back to the input

Expected behavior

When we hit the tab the focus should shift to the next input field or button.

Screenshots

Screen.Recording.2023-08-15.at.11.19.33.PM.mov

System information

• OS: macOS
• Browser chrome

[Jonath-z]

@SuhelMakkad I would like to work on this issue, can you assign me?

[GaryAustin1]

@Jonath-z this was from one of the Supabase devs yesterday.
Hey kishanhitk! We don't really have an assignment process. You can feel free to work on it though — adding an in-progress PR here often helps, even if it's very-very in-progress!

[Jonath-z]

Great, thank you! I start working on it then

[nwaliaez]

Hey @Jonath-z, I believe the issue is being caused by the tabindex="-1" attribute on modal div. If you remove this attribute, the problem should be resolved.

[Jonath-z]

I'm gonna do that and see.

[Jonath-z]

@nwaliaez do you have an idea about why I can not access the authentication page locally?

This is the error that I'm getting:

[nwaliaez]

@Jonath-z, based on my investigations, the issue seems to be related to PostgreSQL. To address this:

1. You'll need to set up PostgreSQL using the docker-compose.yml file located in the docker/ directory.
2. Before doing that, create a .env file within the docker/ directory.
3. Copy the contents of .env.example to the newly created .env file.

I'm currently trying this approach on my end. I'll update this thread once I have more information on whether it resolves the issue.

[Jonath-z]

@nwaliaez thanks.
I investigated, I think is issue is caused by the Modal wrapper, as we can also see the same behavior on send invite model, How can I approach it?

Screencast.from.2023-08-16.14-16-34.webm

To reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to the authentication tab
Click on Users on the sidebar
Click on add user -> send invitation
Hit the tab to go to the next input field
The focus will shift to the modal and then again come back to the input

[nwaliaez]

@Jonath-z, I've made another observation. Once a valid string is entered into the input, the "TAB" key functions as expected.

[Jonath-z]

@nwaliaez

hmm, I'm not able to get that, for me even with the righ input it still does not work as expected. Do you have an idea about the reason why?

[sagarkashyap989]

i am new here, i am facing some issue while seting up=the project,
after cloning i tried npm i but its taking too long, is there is anything i am doing wrong.

[nwaliaez]

@sagarkashyap989 Thats perfect it will take some time depending on network speed.

[sagarkashyap989]

i see, i wait then. (i actually came here after watching you video only).
thank you,
is it okay, if i ping you when i get stuck solving in the just this issue

[nwaliaez]

@sagarkashyap989, I'm here to assist in any way I can. Feel free to reach out whenever you need help!

[sagarkashyap989]

After a clean git clone, I could not start & setup the project

Running npm install and i am facing these issuse:

[nwaliaez]

Hi @sagarkashyap989, you might want to consider these steps: clearing your cache, removing package-lock.json, and deleting node_modules. After that, giving 'yarn' a try worked like a charm for me. Feel free to give it a shot!

[justynleung]

I was testing this issue and I found out that if the user has a valid input in the input field, the tab button will navigate to the button. The problem was only reproduced without the valid input. I don't think it is necessary to fix this because an input is expected, it will then navigate to the button.

[nwaliaez]

@justynleung Hello, I made another attempt, but even with valid input, the issue persists for me. Pressing the tab key still causes the modal to receive focus.

[justynleung]

@nwaliaez
I think I have found the issue. Only invite user modal is not working.
For the add URL modal, it is actually working with a valid input. Could you please double check that too?

[nwaliaez]

I've implemented a solution that appears to be effective when tested on my local machine. However, it's not yet functional on the website.

[nwaliaez]

its working now XD

[justynleung]

I could not find a functional solution for the problem.