a11i/Accessibility problem in Markdown Editor - Not possible to use TAB-key to reach next form element

[camya]

Package

filament/forms

Package Version

v3

Laravel Version

v11

Livewire Version

v3

PHP Version

PHP 8.2

Problem description

For accessibility (a11y), e.g. for people who can't or don't want to use a mouse, the next form element must be accessible using the "TAB" key on the keyboard.

Currently the Markdown Editor, e.g. (MarkdownEditor::make('content')), hijacks the TAB key to format the content within the text area.

This makes the next form element inaccessible to keyboard-only users. The next form element is then only accessible with a mouse.

2-step solution:

1. Don't capture the "TAB" key in the editor by default.
2. Capture the "TAB" key only when the user has selected text. (See GitHub's implementation here on the Create Issue form)

The video shows this behaviour on Github. Without selection, TAB goes to the next form element. With selection, it changes to text indentation.

Screen.Recording.2024-05-02.at.17.52.24.mov

Expected behavior

Pressing TAB-Key inside Markdown Editor jumps to the next Form-Field.

Steps to reproduce

Use TAB key to navigate between Fields of your Form. If you're inside a Markdown Editor Field, you are captured and cant escape using the TAB key.

Reproduction repository

https://github.com/camya/filament

Relevant log output

No response

[github-actions]

Hey @camya! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

[github-actions]

Thank you for providing reproduction steps! Reopening the issue now.