ETT-586: fix data-hathi-trigger component instantiation for wordpress feedback modal
#126
Conversation
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
carylwyatt
commented
Sep 30, 2025
| let slug = el.dataset.hathiTrigger; | ||
| let props = buildProps(el); | ||
| el.component = new apps[slug]({ | ||
| el.component = mount(apps[slug], { |
carylwyatt
force-pushed
the
ETT-586-wp-feedback-modal
branch
2 times, most recently
from
2d17bd3 to
836a41f
Compare
carylwyatt
force-pushed
the
ETT-586-wp-feedback-modal
branch
from
836a41f to
492ae98
Compare
Ronster2018
reviewed
Oct 3, 2025
@Ronster2018 That is the expected/correct behavior, thank you for confirming! Any other questions for me or is this ready to go? |
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.
The problem
Our wordpress theme has "contact us" buttons sprinkled throughout our pages, and these buttons are supposed to open the feedback form modal, but after the svelte 5 migration, these stopped working.
Why this was happening
I missed that there was a separate component instantiation step happening for elements with the data attribute
data-hathi-trigger. These components were still being created as classes, but in svelte 5, components are functions.a11y
While testing that this fix worked, I noticed that the keyboard navigation flow wasn't correct. Closing the feedback modal put the focus in the navbar on the "GET HELP" dropdown item. We added this conditional/DOM manipulation during the deque audit, but I failed to remember that the feedback modal isn't always triggered from the navbar.
I added a new variable/prop for modals,
focusButtonOnClosethat is applied to the "basic" feedback form if theformprop is set tocontact. Since I had to create a new version of the form for that variable, I took the opportunity to change the title of only this version of the feedback form modal from "Questions?" to "Contact HathiTrust."I also had the opportunity to fix a long-standing a11y issue: the IDs in the FeedbackFormBasic form were not actually unique. Because we sometimes have two (or three in the case of the contact page) of these forms on the page at the same time, an ID of "email" is not unique enough. I changed the ID variable to use the new
$props.id()rune, which creates a unique identifier for each instance of a component, then added that variable to each form label/input.wordpress theme
There's a corresponding PR over in hathitrust/wordpress-hathitrust#50 for the updated markup that uses the
data-hathi-triggerelement.See it in action
This is up on dev-3 at https://dev-3.www.hathitrust.org/contact/