Skip to content

No more href to '#' for reasons #466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thehabes merged 5 commits into from
Feb 13, 2026
Merged

No more href to '#' for reasons #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a0f940c
No more href to '#' for reasons
thehabes Feb 12, 2026
da6de92
No more href to '#' for reasons
thehabes Feb 12, 2026
1947b87
Changes while reviewing
thehabes Feb 12, 2026
d7499fb
Changes while reviewing
thehabes Feb 12, 2026
e5c61aa
revert this
thehabes Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/gui/card/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ class TPENCard extends HTMLElement {
padding: 0.5em 1em !important;
transition: all 0.3s;
}
::slotted(a:hover) {
::slotted(a:hover), ::slotted(a:focus-visible) {
background-color: var(--primary-light);
outline: var(--primary-color) 1px solid;
outline-offset: -1.5px;
Expand All @@ -75,7 +75,7 @@ class TPENCard extends HTMLElement {
border-radius: 5px;
transition: all 0.3s;
}
::slotted(button:hover) {
::slotted(button:hover), ::slotted(button:focus-visible) {
background-color: var(--primary-light) !important;
text-transform: capitalize;
outline: var(--primary-color) 1px solid;
Expand Down
2 changes: 1 addition & 1 deletion components/gui/site/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class TpenHeader extends HTMLElement {
<ul>
<li><a href="/index">Home</a></li>
<li><a href="/about">About</a></li>
<li class="logout-btn"><a href="#">Logout</a></li>
<li class="logout-btn"><button type="button">Logout</button></li>
</ul>
</nav>
</header>
Expand Down
15 changes: 13 additions & 2 deletions components/gui/site/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,24 @@ ul {
li {
margin-right: 1em;
}
a {
a, .logout-btn button {
color: var(--primary-light);
text-decoration: none;
}
a:hover {
a:hover, .logout-btn button:hover {
text-decoration: underline;
}
.logout-btn button {
background: none;
border: none;
font: inherit;
cursor: pointer;
padding: 0;
}
.logout-btn button:hover {
background: none;
color: var(--primary-light);
}
.action-button {
background-color: var(--primary-color);
color: var(--white);
Expand Down
19 changes: 12 additions & 7 deletions components/new-action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ class NewAction extends HTMLElement {
justify-items: center;
align-items: center;
}
a {
a, button.action-tile {
text-decoration: none;
color: var(--dark);
font-size: 14px;
Expand All @@ -50,10 +50,16 @@ class NewAction extends HTMLElement {
width: 100%;
box-sizing: border-box;
}
a span.icon {
button.action-tile {
background: none;
border: none;
font: inherit;
cursor: pointer;
}
a span.icon, button.action-tile span.icon {
font-size: 32px; /* Large icon */
}
a:hover {
a:hover, button.action-tile:hover {
background-color: var(--light-gray);
color: var(--primary-color);
}
Expand All @@ -71,10 +77,10 @@ class NewAction extends HTMLElement {
<span class="icon">📄</span>
<span>Import Image</span>
</a>
<a href="#" id="link-tpen-2.8">
<button type="button" class="action-tile" id="link-tpen-2.8">
<span class="icon">🔗</span>
<span>Import a TPEN 2.8 Project</span>
</a>
</button>
<a href="/profile" id="profile-link">
<span class="icon">👤</span>
<span>Manage Profile</span>
Expand All @@ -87,8 +93,7 @@ class NewAction extends HTMLElement {
this.cleanup.onElement(this.shadowRoot.getElementById("link-tpen-2.8"), "click", this.TPEN2ImportHandler.bind(this))
}

TPEN2ImportHandler = async (event) => {
event.preventDefault()
TPEN2ImportHandler = async () => {
const userToken = localStorage.getItem("userToken")
let tokenDomain
let isProdTPEN
Expand Down
9 changes: 8 additions & 1 deletion components/project-details/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,13 @@ class ProjectDetails extends HTMLElement {
.hidden {
display: none;
}
#edit-project-title {
background: none;
border: none;
cursor: pointer;
font-size: inherit;
padding: 0;
}

`

Expand Down Expand Up @@ -130,7 +137,7 @@ class ProjectDetails extends HTMLElement {
const displayTitle = isManagePage ? `Manage Project "${TPEN.screen.title}"` : TPEN.screen.title
TPEN.eventDispatcher.dispatch('tpen-gui-title', displayTitle)
const isProjectEditor = CheckPermissions.checkEditAccess('PROJECT', 'METADATA')
const editTitle = isProjectEditor ? `<a id="edit-project-title" href="#">✏️</a>` : ``
const editTitle = isProjectEditor ? `<button type="button" id="edit-project-title" title="Edit Title">✏️</button>` : ``

this.shadowRoot.innerHTML = `
<style>${this.style}</style>
Expand Down
2 changes: 1 addition & 1 deletion components/projects/list-navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default class ProjectsListNavigation extends HTMLElement {
placeholderItem.setAttribute('aria-hidden', 'true')
placeholderItem.setAttribute('role', 'presentation')
placeholderItem.setAttribute('tabindex', '-1')
placeholderItem.innerHTML = `<a href="#">Loading...</a>`
placeholderItem.innerHTML = `<span>Loading...</span>`
projectList.append(...Array.from({ length: 5 }, () => placeholderItem.cloneNode(true)))
this.shadowRoot.prepend(style, projectList)
}
Expand Down
4 changes: 2 additions & 2 deletions interfaces/import-tpen28/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ <h2>Invite the Collaborators :</h2>
<div class="collaborator-list" id="collaboratorList"></div>
</section>

<a id="openProject" class="btn secondary-btn hidden" href="#" role="button">
<button type="button" id="openProject" class="btn secondary-btn hidden">
Open the Project
</a>
</button>
</div>
</tpen-page>
</body>
Expand Down
12 changes: 6 additions & 6 deletions interfaces/manage-project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,27 @@ <h2 slot="header">This Project</h2>
</a>
</div>
</div>
<a id="leave-project-btn" slot="footer" class="default-btn" href="#" role="button">LEAVE PROJECT</a>
<a id="leave-project-btn" slot="footer" class="default-btn" role="button" tabindex="0">LEAVE PROJECT</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Copilot uses AI. Check for mistakes.
</tpen-card>
<tpen-card tpen-scope="metadata">
<h2 slot="header">Metadata</h2>
<tpen-project-metadata slot="body"></tpen-project-metadata>
<a id="update-metadata-btn" slot="footer" class="default-btn" href="#" role="button">EDIT METADATA</a>
<a id="update-metadata-btn" slot="footer" class="default-btn" role="button" tabindex="0">EDIT METADATA</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Copilot uses AI. Check for mistakes.
</tpen-card>
<tpen-card tpen-entity="member">
<h2 slot="header">Collaborators</h2>
<project-collaborators slot="body"></project-collaborators>
<a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE COLLABORATORS</a>
<a id="manage-collaboration-btn" slot="footer" class="default-btn" role="button" tabindex="0">MANAGE COLLABORATORS</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Copilot uses AI. Check for mistakes.
</tpen-card>
<tpen-card tpen-entity="layer">
<h2 slot="header">Layers & Pages</h2>
<tpen-project-layers slot="body"></tpen-project-layers>
<a id="manage-layers-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS / MODIFY</a>
<a id="manage-layers-btn" slot="footer" class="default-btn" role="button" tabindex="0">SEE DETAILS / MODIFY</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Copilot uses AI. Check for mistakes.
</tpen-card>
<tpen-card tpen-entity="role">
<h2 slot="header">Project Roles</h2>
<tpen-project-permissions slot="body"></tpen-project-permissions>
<a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE ROLE</a>
<a id="manage-custom-role-btn" slot="footer" class="default-btn" role="button" tabindex="0">MANAGE ROLE</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Suggested change
<a id="manage-custom-role-btn" slot="footer" class="default-btn" role="button" tabindex="0">MANAGE ROLE</a>
<button id="manage-custom-role-btn" slot="footer" class="default-btn" type="button">MANAGE ROLE</button>

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Member Author

@thehabes thehabes Feb 12, 2026

Choose a reason for hiding this comment

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

wrong. enter works. href is set by script.

</tpen-card>
<tpen-card tpen-scope="options">
<h2 slot="header">Project Options</h2>
Expand All @@ -60,7 +60,7 @@ <h2 slot="header">Project Options</h2>
Default Transcription Interface: /transcribe
</div>
</tpen-project-options>
<a id="manage-project-options-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS</a>
<a id="manage-project-options-btn" slot="footer" class="default-btn" role="button" tabindex="0">SEE DETAILS</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Copilot uses AI. Check for mistakes.
</tpen-card>
<tpen-card tpen-entity="tools">
<h2 slot="header">Tools</h2>
Expand Down
2 changes: 1 addition & 1 deletion interfaces/project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h2 slot="header">Project Details <a id="projectManagementBtn" title="Manage Pro
</a>
</div>
</div>
<a id="leaveProject" slot="footer" href="#">LEAVE PROJECT</a>
<a id="leaveProject" slot="footer" tabindex="0">LEAVE PROJECT</a>
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

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

This anchor element lacks keyboard accessibility until the href is set by JavaScript. Anchors without href don't respond to Enter key presses, even with tabindex="0". Consider using a placeholder href like "javascript:void(0)" or better yet, converting these to button elements that trigger navigation programmatically. Alternatively, initialize with a disabled state until the JavaScript sets the href.

Suggested change
<a id="leaveProject" slot="footer" tabindex="0">LEAVE PROJECT</a>
<a id="leaveProject" slot="footer" tabindex="0" href="javascript:void(0)">LEAVE PROJECT</a>

Copilot uses AI. Check for mistakes.
</tpen-card>
</div>
</tpen-page>
Expand Down