Skip to content

Commit e58fb31

Browse files
thehabesthehabes
authored
No more href to '#' for reasons (#466)
* No more href to '#' for reasons * No more href to '#' for reasons * Changes while reviewing * Changes while reviewing * revert this
1 parent 047d778 commit e58fb31

9 files changed

Lines changed: 46 additions & 23 deletions

File tree

‎components/gui/card/Card.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ class TPENCard extends HTMLElement {
6161
padding: 0.5em 1em !important;
6262
transition: all 0.3s;
6363
}
64-
::slotted(a:hover) {
64+
::slotted(a:hover), ::slotted(a:focus-visible) {
6565
background-color: var(--primary-light);
6666
outline: var(--primary-color) 1px solid;
6767
outline-offset: -1.5px;
@@ -75,7 +75,7 @@ class TPENCard extends HTMLElement {
7575
border-radius: 5px;
7676
transition: all 0.3s;
7777
}
78-
::slotted(button:hover) {
78+
::slotted(button:hover), ::slotted(button:focus-visible) {
7979
background-color: var(--primary-light) !important;
8080
text-transform: capitalize;
8181
outline: var(--primary-color) 1px solid;

‎components/gui/site/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ class TpenHeader extends HTMLElement {
5050
<ul>
5151
<li><a href="/index">Home</a></li>
5252
<li><a href="/about">About</a></li>
53-
<li class="logout-btn"><a href="#">Logout</a></li>
53+
<li class="logout-btn"><button type="button">Logout</button></li>
5454
</ul>
5555
</nav>
5656
</header>

‎components/gui/site/header.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,24 @@ ul {
8989
li {
9090
margin-right: 1em;
9191
}
92-
a {
92+
a, .logout-btn button {
9393
color: var(--primary-light);
9494
text-decoration: none;
9595
}
96-
a:hover {
96+
a:hover, .logout-btn button:hover {
9797
text-decoration: underline;
9898
}
99+
.logout-btn button {
100+
background: none;
101+
border: none;
102+
font: inherit;
103+
cursor: pointer;
104+
padding: 0;
105+
}
106+
.logout-btn button:hover {
107+
background: none;
108+
color: var(--primary-light);
109+
}
99110
.action-button {
100111
background-color: var(--primary-color);
101112
color: var(--white);

‎components/new-action.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class NewAction extends HTMLElement {
3535
justify-items: center;
3636
align-items: center;
3737
}
38-
a {
38+
a, button.action-tile {
3939
text-decoration: none;
4040
color: var(--dark);
4141
font-size: 14px;
@@ -50,10 +50,16 @@ class NewAction extends HTMLElement {
5050
width: 100%;
5151
box-sizing: border-box;
5252
}
53-
a span.icon {
53+
button.action-tile {
54+
background: none;
55+
border: none;
56+
font: inherit;
57+
cursor: pointer;
58+
}
59+
a span.icon, button.action-tile span.icon {
5460
font-size: 32px; /* Large icon */
5561
}
56-
a:hover {
62+
a:hover, button.action-tile:hover {
5763
background-color: var(--light-gray);
5864
color: var(--primary-color);
5965
}
@@ -71,10 +77,10 @@ class NewAction extends HTMLElement {
7177
<span class="icon">📄</span>
7278
<span>Import Image</span>
7379
</a>
74-
<a href="#" id="link-tpen-2.8">
80+
<button type="button" class="action-tile" id="link-tpen-2.8">
7581
<span class="icon">🔗</span>
7682
<span>Import a TPEN 2.8 Project</span>
77-
</a>
83+
</button>
7884
<a href="/profile" id="profile-link">
7985
<span class="icon">👤</span>
8086
<span>Manage Profile</span>
@@ -87,8 +93,7 @@ class NewAction extends HTMLElement {
8793
this.cleanup.onElement(this.shadowRoot.getElementById("link-tpen-2.8"), "click", this.TPEN2ImportHandler.bind(this))
8894
}
8995

90-
TPEN2ImportHandler = async (event) => {
91-
event.preventDefault()
96+
TPEN2ImportHandler = async () => {
9297
const userToken = localStorage.getItem("userToken")
9398
let tokenDomain
9499
let isProdTPEN

‎components/project-details/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,13 @@ class ProjectDetails extends HTMLElement {
6161
.hidden {
6262
display: none;
6363
}
64+
#edit-project-title {
65+
background: none;
66+
border: none;
67+
cursor: pointer;
68+
font-size: inherit;
69+
padding: 0;
70+
}
6471
6572
`
6673

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

135142
this.shadowRoot.innerHTML = `
136143
<style>${this.style}</style>

‎components/projects/list-navigation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default class ProjectsListNavigation extends HTMLElement {
111111
placeholderItem.setAttribute('aria-hidden', 'true')
112112
placeholderItem.setAttribute('role', 'presentation')
113113
placeholderItem.setAttribute('tabindex', '-1')
114-
placeholderItem.innerHTML = `<a href="#">Loading...</a>`
114+
placeholderItem.innerHTML = `<span>Loading...</span>`
115115
projectList.append(...Array.from({ length: 5 }, () => placeholderItem.cloneNode(true)))
116116
this.shadowRoot.prepend(style, projectList)
117117
}

‎interfaces/import-tpen28/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ <h2>Invite the Collaborators :</h2>
3838
<div class="collaborator-list" id="collaboratorList"></div>
3939
</section>
4040

41-
<a id="openProject" class="btn secondary-btn hidden" href="#" role="button">
41+
<button type="button" id="openProject" class="btn secondary-btn hidden">
4242
Open the Project
43-
</a>
43+
</button>
4444
</div>
4545
</tpen-page>
4646
</body>

‎interfaces/manage-project/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,27 +31,27 @@ <h2 slot="header">This Project</h2>
3131
</a>
3232
</div>
3333
</div>
34-
<a id="leave-project-btn" slot="footer" class="default-btn" href="#" role="button">LEAVE PROJECT</a>
34+
<a id="leave-project-btn" slot="footer" class="default-btn" role="button" tabindex="0">LEAVE PROJECT</a>
3535
</tpen-card>
3636
<tpen-card tpen-scope="metadata">
3737
<h2 slot="header">Metadata</h2>
3838
<tpen-project-metadata slot="body"></tpen-project-metadata>
39-
<a id="update-metadata-btn" slot="footer" class="default-btn" href="#" role="button">EDIT METADATA</a>
39+
<a id="update-metadata-btn" slot="footer" class="default-btn" role="button" tabindex="0">EDIT METADATA</a>
4040
</tpen-card>
4141
<tpen-card tpen-entity="member">
4242
<h2 slot="header">Collaborators</h2>
4343
<project-collaborators slot="body"></project-collaborators>
44-
<a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE COLLABORATORS</a>
44+
<a id="manage-collaboration-btn" slot="footer" class="default-btn" role="button" tabindex="0">MANAGE COLLABORATORS</a>
4545
</tpen-card>
4646
<tpen-card tpen-entity="layer">
4747
<h2 slot="header">Layers & Pages</h2>
4848
<tpen-project-layers slot="body"></tpen-project-layers>
49-
<a id="manage-layers-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS / MODIFY</a>
49+
<a id="manage-layers-btn" slot="footer" class="default-btn" role="button" tabindex="0">SEE DETAILS / MODIFY</a>
5050
</tpen-card>
5151
<tpen-card tpen-entity="role">
5252
<h2 slot="header">Project Roles</h2>
5353
<tpen-project-permissions slot="body"></tpen-project-permissions>
54-
<a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE ROLE</a>
54+
<a id="manage-custom-role-btn" slot="footer" class="default-btn" role="button" tabindex="0">MANAGE ROLE</a>
5555
</tpen-card>
5656
<tpen-card tpen-scope="options">
5757
<h2 slot="header">Project Options</h2>
@@ -60,7 +60,7 @@ <h2 slot="header">Project Options</h2>
6060
Default Transcription Interface: /transcribe
6161
</div>
6262
</tpen-project-options>
63-
<a id="manage-project-options-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS</a>
63+
<a id="manage-project-options-btn" slot="footer" class="default-btn" role="button" tabindex="0">SEE DETAILS</a>
6464
</tpen-card>
6565
<tpen-card tpen-entity="tools">
6666
<h2 slot="header">Tools</h2>

‎interfaces/project/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ <h2 slot="header">Project Details <a id="projectManagementBtn" title="Manage Pro
7878
</a>
7979
</div>
8080
</div>
81-
<a id="leaveProject" slot="footer" href="#">LEAVE PROJECT</a>
81+
<a id="leaveProject" slot="footer" tabindex="0">LEAVE PROJECT</a>
8282
</tpen-card>
8383
</div>
8484
</tpen-page>

0 commit comments

Comments
 (0)