You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Don't capture the "TAB" key in the editor by default.
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.
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.
camya
changed the title
a11i/Accessibility problem in Markdown Editor - Not possible to use TAB-key to reach next form element + Solution
a11i/Accessibility problem in Markdown Editor - Editor actions are not reachable using the TAB-key
May 2, 2024
camya
changed the title
a11i/Accessibility problem in Markdown Editor - Editor actions are not reachable using the TAB-key
a11i/Accessibility problem in Markdown Editor - Not possible to use TAB-key to reach next form element
May 2, 2024
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:
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
The text was updated successfully, but these errors were encountered: