fix(a11y): make plain URLs clickable in metadata#21
Conversation
- Add autoLinkHTML() function to detect and wrap plain URLs - Integrate into cleanHTML() pipeline (runs before sanitization) - Fix CollapsibleCards Copyright section to use cleanHTML instead of htmlParsedValue - Fixes 12,437 broken links across 6 metadata fields in preprod - 95% of issues (11,795) were in Copyright section rights field in preprod Files changed: - src/lib/MetadataRenderer.js: Added autoLinkHTML() function - src/components/CollapsibleCards.js: Updated getCopyrightData() to use cleanHTML
goynejennifer
left a comment
There was a problem hiding this comment.
Please add a location of where this needs to be tested. Will this fix work for federated and IAWA? Please include additional information for testing
|
Please test this on |
Apply cleanHTML/autoLinkHTML to the Description and Example cells of the metadata field reference table so plain URLs render as clickable links, consistent with the item-metadata link handling.
goynejennifer
left a comment
There was a problem hiding this comment.
I approve this PR but will wait on Kelly's final update. Kelly feel free to approve once you are done with your edits.
Thank you!
Title of Pull Request(PR) [REQUIRED]
fix(a11y): make plain URLs clickable in metadata
🔗 Asana, 4Help, and Related Links [REQUIRED]
Asana Ticket: https://app.asana.com/1/955176856078227/project/1210742763721034/task/1213363294923210?focus=true
✨ What Does This Pull Request Do? [REQUIRED]
Fixes accessibility issue where URLs in metadata fields were displaying as plain text instead of clickable links
Around 12k broken links found across preprod db where URLs were either plain text or inside
<a>tags withouthrefattributes. 95% of these were in the Copyright section'srightsfield🛠️ Summary of Changes [REQUIRED]
autoLinkHTML()function in MetadataRenderer.js that:<a>tags missing href attribute<a href="...">tagshtmlParsedValue()withcleanHTML()to apply the fixrightsfield (can have multiple values)🧪 How Should PR Be Tested? [REQUIRED]
Currently tested in vtdlpdev and vtdlp-pprd environments.
federated(vtdlp-pprd) - rights/rights-holder URLs render as clickable links, including URLs embedded in surrounding text.iawarepository types on vtdlp-pprd - verified on archive item pages and the metadata guide page.Note: The link rendering lives in a shared component (
CollapsibleCards/cleanHTML) and is identical across repository types -REACT_APP_REP_TYPEonly filters which items load.vtdlp-pprdcurrently has noiawaarchive items (categories present:federated, hokies, podcasts, swva), so archive-pagerightslinks cant be shown underiawa. Verified on federated items containingrightsURLs; the same code renders for all rep types.Please test on the ally backend environment.
Step 1: Navigate to any archive detail page (e.g., search for an item and click to view details)
Step 2: Expand the "Copyright" collapsible card
Step 3: Verify the Rights and Rights Holder fields:
Step 4: Confirm unrelated existing fields still render as before - e.g. a source field whose value is a full URL stays clickable, and facet fields like type/tags still work as search links. (These use pre-existing rendering, unchanged by this PR.)
Step 5: On the Metadata Guide (
/metadata), confirm URLs in the Description and Example columns are clickable links.♿ Accessibility Testing [REQUIRED]
Complete standard accessibility testing and provide additional test steps/details, if applicable:
If "Yes", provide test environment details and complete or mark N/A all of the following tests:
OS/Browser/Screen reader details: For Example: macOS Tahoe 26.0.1, Google Chrome v141.0.7390.55, VoiceOver v10
📝 Additional Notes
Any extra context that would help reviewers. Consider the following:
*What branch should be used for testing?
*Does this introduce new dependencies?
*Are documentation updates required?
*Could this impact existing functionality?
👥 Interested Parties
Tag any reviewers or stakeholders you'd like to include in the discussion:
@username
🚨[REQUIRED] - Required fields/information in the pull request