Skip to content

fix(a11y): make plain URLs clickable in metadata#21

Open
padma012 wants to merge 2 commits into
mainfrom
pc-a11y-html-link-parser
Open

fix(a11y): make plain URLs clickable in metadata#21
padma012 wants to merge 2 commits into
mainfrom
pc-a11y-html-link-parser

Conversation

@padma012

@padma012 padma012 commented May 18, 2026

Copy link
Copy Markdown
Contributor

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 without href attributes. 95% of these were in the Copyright section's rights field

🛠️ Summary of Changes [REQUIRED]

  • Added autoLinkHTML() function in MetadataRenderer.js that:
    • Detects plain URLs (http://, https://, www.)
    • Fixes broken <a> tags missing href attribute
    • Wraps URLs in proper <a href="..."> tags
  • Integrated autoLinkHTML into cleanHTML() pipeline (runs before sanitization)
  • Fixed CollapsibleCards Copyright section: replaced htmlParsedValue() with cleanHTML() to apply the fix
  • Added array handling for rights field (can have multiple values)
  • Applies to metadata fields: rights, rights_holder, metadata fields: description and examples

🧪 How Should PR Be Tested? [REQUIRED]

Currently tested in vtdlpdev and vtdlp-pprd environments.

  • Archive item pages: Verified on federated (vtdlp-pprd) - rights/rights-holder URLs render as clickable links, including URLs embedded in surrounding text.
  • Metadata guide page (/metadata): Verified on both federated and iawa - URLs in teh Description/Example columns render as clickable links.and iawa repository 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_TYPE only filters which items load. vtdlp-pprd currently has no iawa archive items (categories present: federated, hokies, podcasts, swva), so archive-page rights links cant be shown under iawa. Verified on federated items containing rights URLs; 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:

  • URL renders as a styled, focusable link (color+underline)
  • Cursor should change to pointer on hover
  • Links should be clickable and open in browser
  • Right-click should show link context menu

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:

  • Does this PR change anything in the front-end? This includes backend-only changes that may affect front end components (data schema changes, global configs, package version updates, etc.)

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

  • Complete an axe DevTools full or partial page scans and link it here (axe DevTools scanning docs)
  • Keyboard navigability: Focus ring showing on all focusable/interactive elements in expected order, standard interaction present (keyboard testing basics)
  • Screen reader comprehension: No elements hidden from screen reader, alt text, no repeated text (screen reader keyboard shortcuts)
  • Color contrast at least WCAG AA (contrast checker)
  • Accessible markup used (e.g., proper heading levels, labels, roles, and semantic HTML as much as possible)
  • Other accessibility testing (please describe):

📝 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

- 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
@padma012 padma012 requested a review from ervinkellym May 18, 2026 17:03
@padma012 padma012 requested a review from goynejennifer June 17, 2026 15:36

@goynejennifer goynejennifer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@padma012

padma012 commented Jun 23, 2026

Copy link
Copy Markdown
Contributor Author

Please test this on ally backend env. Yes, the fix will work for federated and iawa.
The link rendering lives in a shared component (CollapsibleCards/cleanHTML) and is identical across repository types - REACT_APP_REP_TYPE only filters which items load. vtdlp-pprd currently has no iawa archive items (categories present: federated, hokies, podcasts, swva), so archive-page rights links cant be shown under iawa. Verified on federated items containing rights URLs; the same code renders for all rep types.

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 goynejennifer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants