Use x-Focus Alpine JS plugin for Livewire stack modal #1186
Conversation
This file contains 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
x7ryan
changed the title
|
@x7ryan great pr! |
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.
This PR replaces the custom focus trapping logic within the Livewire stack's modal with Alpine JS's x-Focus plugin.
The down-side is this does introduce a new dependency. However at the same time it reduces overall code needed to be maintained directly, is cleaner, widely used, all while improving accessibility.
This improves accessibility bu utilizing the
.inertmodifier when defining the focus trapping (see: https://alpinejs.dev/plugins/focus#inert), which will add anaria-hidden="true"property to all elements outside the modal while it is open.I believe this is a net improvement and worth bringing in the dependency. However if you disagree Taylor, no hard feelings if you close this.