fix: drop nested <form> wrapper from comments composer (#77)#98
Open
ItsMalikJones wants to merge 3 commits into
Open
fix: drop nested <form> wrapper from comments composer (#77)#98ItsMalikJones wants to merge 3 commits into
<form> wrapper from comments composer (#77)#98ItsMalikJones wants to merge 3 commits into
Conversation
The composer's outer `<form wire:submit.prevent="save">` produced invalid HTML when `CommentsEntry` was rendered inside a Filament action modal (which renders its own `<form>`), causing the modal footer and any `extraModalFooterActions()` buttons to disappear or render outside the modal. The submit/cancel buttons already used `wire:click`, so the form wrapper was load-bearing only for the invalid HTML it created. Replacing it with a plain `<div>` keeps the same Livewire behavior without nesting forms.
Add the 'add_comment' translation string across all supported languages (en, ar, es, fr, nl, ro) and add semantic HTML role and aria-label to the comment form for better accessibility.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #77.
Problem
When
CommentsEntryis rendered inside a Filament action modal, the comments composer breaks the modal's layout. The composer wraps its editor in an outer<form wire:submit.prevent="save">, and Filament action modals render their own<form>element. Nesting<form>inside<form>is invalid HTML — browsers silently close the inner form early, which causes the modal footer and anyextraModalFooterActions()buttons to disappear or render outside the modal.Fix
This PR replaces the wrapper
<form>with a plain<div>. Livewire behavior is identical: the buttons still dispatch their actions viawire:click, and the composer no longer nests a form inside Filament's modal form.Accessibility
To preserve the semantic grouping the
<form>element previously gave assistive technology, the replacement<div>carriesrole="form"and anaria-label. A newadd_commenttranslation string backs that label and has been added across all supported locales (en, ar, es, fr, nl, ro).Changes
resources/views/comments.blade.php— swap composer<form>for<div role="form">with anaria-labelresources/lang/{en,ar,es,fr,nl,ro}/comments.php— addadd_commenttranslation stringtests/Livewire/CommentsTest.php— new test asserting the composer renders no<form>element, exposesrole="form", and keepswire:click="save"Testing
comments composer does not render a form elementCommentsEntryinside a Filament action modal and confirm the modal footer +extraModalFooterActions()buttons display correctlyNote: I'd recommend a quick manual verification of the modal scenario from #77 before merging, since the bug's visible symptom (footer placement) isn't something the Livewire test can assert.