Links That Change location.href

[thehabes]

Closes #465

Summary

Converts navigation elements across the codebase from <button> with location.href click handlers and <img onclick="window.open(...)"> to proper <a href> elements. This gives users consistent browser link features everywhere: right-click context menu, middle-click / Ctrl+click to open in new tab, status bar URL preview, and correct screen reader announcements.

Changes

<button> → <a> conversions (with CSS preservation)

• 5 interface pages (options.html, metadata.html, collaborators.html, quicktype/index.html, manage-layers/index.html): "Go to Project Management" buttons
• line-parser.js: #createColumnsBtn and #projectManagementBtn
• manage-role/index.js: #projectManagementBtn
• page-tool/index.js: .lines-btn and .columns-btn
• manage-columns/index.js: 3 .goBtn navigation elements
• leave-project/index.js: #noLeaveBtn (href set directly in template)
• import-tpen28: #openProject button

Each conversion adds text-decoration: none; font: inherit; (and display: inline-block, box-sizing: border-box, text-align: center where needed) to preserve the button appearance on <a> elements.

<img onclick="window.open(...)"> → <a href> wrapping

• user-profile/index.js: 6 social media icons
• contributionActivity.js: 4 RERUM/Transcribe icons (initial render + "show more")

Security: rel="noopener noreferrer" on target="_blank" links

• Footer.js, project-export/index.js (4 instances), about.html, manifest-import/examples.html

Accessibility

• Added aria-label to icon-only links: project-options/index.js (2 emoji links), list-navigation.js (gear icon), project/index.html (gear icon)
• Removed incorrect role="button" and redundant tabindex="0" from 6 <a> footer elements in manage-project/index.html

Documented exceptions

• line-parser.js: OpenSeadragon "Go Transcribe" button stays as OSD Button (the API creates <div> elements, not <a>)
• Header.js: Logout button stays as <button> because TPEN.logout() clears localStorage before redirecting. An <a href> would allow middle-click / right-click "Open in new tab" to hit the logout URL without clearing the token in the current tab, leaving a broken state.
• new-action.js and project/create.html: TPEN 2.8 import buttons stay as <button> because they set document.cookie with a TPEN 2.8 auth cookie before redirecting to the TPEN 2.8 login page. An <a href> would skip the cookie setup on middle-click / right-click, causing the login to fail.

Not in this PR

The Header action-link (tpen-action-link / .action-button) remains a <button> with callback. Converting it requires changing the tpen-gui-action-link event contract from {label, callback} to {label, href}, which will be addressed in a separate PR.

Test plan

• jekyll s — run locally
• For converted elements: right-click shows "Open in new tab", middle-click works, Ctrl+click works, hovering shows URL in status bar
• Tab focuses converted elements, Enter activates them
• Social media icons in user-profile are keyboard accessible
• Verify visual appearance matches before (button styling preserved on <a> elements)

[github-actions]

🚀 Deployed on https://69974fe498517a65a3a09a34--tpen-interfaces-preview.netlify.app

[Copilot]

Pull request overview

This PR addresses issue #465 by converting navigation elements from buttons with click event handlers that change location.href to semantic anchor (<a>) elements with proper href attributes. This improves accessibility by enabling right-click context menus (open in new tab, copy link, etc.) and better screen reader support while maintaining the same visual styling and functionality.

Changes:

• Converted button elements with navigation click handlers to anchor elements with href attributes across 22 files
• Added rel="noopener noreferrer" to external links with target="_blank" for security
• Added aria-label attributes to icon-only navigation links for better accessibility
• Removed unnecessary role="button" and tabindex="0" attributes from semantic anchor elements

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
interfaces/quicktype/index.html	Converted project management button to anchor, added styling
interfaces/project/options.html	Converted project management button to anchor, added styling
interfaces/project/metadata.html	Converted project management button to anchor, added styling
interfaces/project/index.html	Added aria-label to icon-only management link
interfaces/manifest-import/examples.html	Added security attributes to external link
interfaces/manage-project/index.html	Removed role/tabindex from footer navigation links
interfaces/manage-project/collaborators.html	Converted project management button to anchor, added styling
interfaces/manage-layers/index.html	Converted project management button to anchor, added styling
interfaces/manage-columns/index.js	Converted three navigation buttons to anchors, added styling
interfaces/import-tpen28/index.js	Removed click handler, set href directly
interfaces/import-tpen28/index.html	Converted button element to anchor
interfaces/import-tpen28/index.css	Added a.btn styling to match button appearance
components/user-profile/index.js	Converted social media icon onclick to proper anchor links
components/user-profile/contributionActivity.js	Converted contribution icon onclick to proper anchor links
components/projects/list-navigation.js	Added aria-label to icon-only management link
components/project-options/index.js	Added aria-labels to icon-only edit links
components/project-export/index.js	Added security attributes to external IIIF links
components/page-tool/index.js	Converted lines/columns buttons to anchors, added styling
components/manage-role/index.js	Converted project management button to anchor, added styling
components/leave-project/index.js	Converted cancel button to anchor with href
components/gui/site/Footer.js	Added security attributes to license link
components/annotorious-annotator/line-parser.js	Converted navigation buttons to anchors with helpful comment about OSD exception
about.html	Added security attributes to external link

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cubap]

I'm sure I haven't managed to look at everything, but I didn't make it break. There are a few places that look a little different but not wrong.

[cubap]

I noticed here that buttons on project management and possible other places don't have pointers. Something is off with cursor but not from this PR.