nodebb-theme-harmony 1.2.12 → 1.2.14

package/library.js

@@ -186,3 +186,8 @@ library.filterMiddlewareRenderHeader = async function (hookData) {
 	return hookData;
 };
 
+library.filterTeasersConfigureStripTags = function (hookData) {
+	// teasers have a stretched-link to go to last post, the anchors in them are not clickable
+	hookData.tags.push('a');
+	return hookData;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "nbbpm": {
     "compatibility": "^3.5.0"
   },

package/plugin.json

@@ -8,7 +8,8 @@
 		{ "hook": "filter:settings.get", "method": "getAdminSettings"},
 		{ "hook": "filter:user.saveSettings", "method": "saveUserSettings" },
 		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
-		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" }
+		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" },
+		{ "hook": "filter:teasers.configureStripTags", "method": "filterTeasersConfigureStripTags"}
 	],
 	"scripts": [
 		"public/harmony.js"

package/scss/common.scss

@@ -119,4 +119,11 @@ body:not(.page-user) {
 		max-height: 500px;
 		width: auto;
 	}
+}
+
+[component="chat/message/body"],
+[component="post/content"],
+[component="topic/teaser"] .post-content,
+[component="category/posts"] .post-content {
+	a { text-decoration: underline;}
 }

package/scss/overrides.scss

@@ -33,7 +33,8 @@ $body-bg: $white !default;
 $body-tertiary-bg: $gray-200 !default;
 $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
-$link-color: shade-color($blue, 20%) !default;
+// $link-color: shade-color($blue, 20%) !default;
+$link-color: #0951be !default;
 
 // no caret on dropdown-toggle
 $enable-caret: false;

package/templates/partials/categories/lastpost.tpl

@@ -4,9 +4,7 @@
 	<div component="category/posts" class="ps-2 text-xs d-flex flex-column h-100 gap-1">
 		<div class="text-nowrap text-truncate">
 			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true, "avatar-tooltip")}</a>
-			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
-				<span class="timeago text-xs" title="{../timestampISO}"></span>
-			</a>
+			<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
 		</div>
 		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm position-relative flex-fill">
 			<a class="stretched-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" aria-label="[[global:lastpost]]"></a>

package/templates/partials/header/brand.tpl

@@ -3,8 +3,8 @@
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
-			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">
-				<img component="brand/logo" alt="{brand:logo:alt}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
+			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}" title="[[global:header.brand-logo]]">
+				<img component="brand/logo" alt="{{{ if brand:logo:alt }}}{brand:logo:alt}{{{ else }}}[[global:header.brand-logo]]{{{ end }}}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
 			</a>
 			{{{ end }}}
 

package/templates/partials/sidebar/chats.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" component="chat/dropdown" aria-haspopup="true" aria-expanded="false">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" component="chat/dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.chats]]">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="chat/icon" class="fa fa-fw {{{ if unreadCount.chat}}}fa-comment{{{ else }}}fa-comment-o{{{ end }}} unread-count" data-content="{unreadCount.chat}"></i>

package/templates/partials/sidebar/drafts.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" aria-haspopup="true" aria-expanded="false">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.drafts]]">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="drafts/icon" class="fa fa-fw fa-pen-to-square unread-count"></i>

package/templates/partials/sidebar/notifications.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" aria-haspopup="true" aria-expanded="false">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.notifications]]">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>

package/templates/partials/sidebar/search.tpl

@@ -1,4 +1,4 @@
-<a component="search/button" id="search-button" href="#" role="button" class="nav-link d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[global:search]]">
 	<span>
 		<i class="fa fa-search fa-fw"></i>
 	</span>

package/templates/partials/sidebar/user-menu.tpl

@@ -1,10 +1,10 @@
-<a component="header/avatar" id="user_dropdown" href="#" role="button" class="nav-link d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<a component="header/avatar" id="user_dropdown" href="#" role="button" class="nav-link d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[user:user-menu]]">
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </a>
-<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" aria-labelledby="user_dropdown" role="menu">
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" role="menu">
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem" aria-label="[[user:profile]]">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
 			<span class="fw-semibold" component="header/username">{user.username}</span>
 		</a>
@@ -13,28 +13,28 @@
 	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online" role="menuitem">
-			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"></span>
 			<span class="flex-grow-1">[[global:online]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
+			<i class="fa-solid fa-check text-muted flex-shrink-0" aria-label="[[global:selected]]"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away" role="menuitem">
-			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"></span>
 			<span class="flex-grow-1">[[global:away]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
+			<i class="fa-solid fa-check text-muted flex-shrink-0"><span class="visually-hidden"></span>[[global:selected]]</span></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd" role="menuitem">
-			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"></span>
 			<span class="flex-grow-1">[[global:dnd]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline" role="menuitem">
-			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"></span>
 			<span class="flex-grow-1">[[global:invisible]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
@@ -92,10 +92,10 @@
 
 	<li role="presentation" class="dropdown-divider"></li>
 	<li component="user/logout">
-		<form method="post" action="{relative_path}/logout">
+		<form method="post" action="{relative_path}/logout" role="menuitem">
 			<input type="hidden" name="_csrf" value="{config.csrf_token}">
 			<input type="hidden" name="noscript" value="true">
-			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
+			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
 				<i class="fa fa-fw fa-sign-out text-muted"></i><span>[[global:logout]]</span>
 			</button>
 		</form>

package/templates/partials/topics_list.tpl

@@ -111,11 +111,10 @@
 					{{{ if ./teaser.pid }}}
 					<div class="ps-2">
 						<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
-						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}">
-						</a>
+						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
 					</div>
 					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
-						<a class="stretched-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}"></a>
+						<a class="stretched-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
 						{./teaser.content}
 					</div>
 					{{{ end }}}