nodebb-theme-harmony 1.2.11 → 1.2.12

package/templates/partials/flags/filters.tpl

@@ -1,12 +1,12 @@
 <div component="flags/filters" class="d-flex flex-wrap gap-2 pb-3 border-bottom">
 	<div class="btn-group bottom-sheet">
-		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.quick }}}[[flags:filter-quick-{./filters.quick}]]{{{ else }}}[[flags:quick-filters]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
-		<ul class="dropdown-menu p-1 text-sm">
+		<ul class="dropdown-menu p-1 text-sm" role="menu">
 			<li>
-				<a class="dropdown-item rounded-1" href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a>
+				<a class="dropdown-item rounded-1" href="{config.relative_path}/flags?quick=mine" role="menuitem">[[flags:filter-quick-mine]]</a>
 			</li>
 		</ul>
 	</div>
@@ -30,7 +30,7 @@
 		<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
 			{{{each categoryItems}}}
 			<li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
-				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
 					{../level}
 					<span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
 						<div class="category-item d-inline-flex align-items-center gap-1">
@@ -48,54 +48,54 @@
 	</div>
 
 	<div class="btn-group bottom-sheet">
-		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if (sort != "newest") }}}[[flags:sort-{./sort}]]{{{ else }}}[[flags:sort]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
-		<ul class="dropdown-menu p-1 text-sm">
+		<ul class="dropdown-menu p-1 text-sm" role="menu">
 			<li><h6 class="dropdown-header">[[flags:sort-all]]</h6></li>
-			<li class="dropdown-item rounded-1" data-name="sort" data-value="newest">[[flags:sort-newest]]</li>
-			<li class="dropdown-item rounded-1" data-name="sort" data-value="oldest">[[flags:sort-oldest]]</li>
-			<li class="dropdown-item rounded-1" data-name="sort" data-value="reports">[[flags:sort-reports]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="newest" role="menuitem">[[flags:sort-newest]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="oldest" role="menuitem">[[flags:sort-oldest]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="reports" role="menuitem">[[flags:sort-reports]]</li>
 			<li><h6 class="dropdown-header">[[flags:sort-posts-only]]</h6></li>
-			<li class="dropdown-item rounded-1" data-name="sort" data-value="downvotes">[[flags:sort-downvotes]]</li>
-			<li class="dropdown-item rounded-1" data-name="sort" data-value="upvotes">[[flags:sort-upvotes]]</li>
-			<li class="dropdown-item rounded-1" data-name="sort" data-value="replies">[[flags:sort-replies]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="downvotes" role="menuitem">[[flags:sort-downvotes]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="upvotes" role="menuitem">[[flags:sort-upvotes]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="replies" role="menuitem">[[flags:sort-replies]]</li>
 		</ul>
 	</div>
 
 	<div class="btn-group bottom-sheet">
-		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.state }}}[[flags:state-{./filters.state}]]{{{ else }}}[[flags:filter-state]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
-		<ul class="dropdown-menu p-1 text-sm">
-			<li class="dropdown-item rounded-1" data-name="state" data-value="open">[[flags:state-open]]</li>
-			<li class="dropdown-item rounded-1" data-name="state" data-value="wip">[[flags:state-wip]]</li>
-			<li class="dropdown-item rounded-1" data-name="state" data-value="resolved">[[flags:state-resolved]]</li>
-			<li class="dropdown-item rounded-1" data-name="state" data-value="rejected">[[flags:state-rejected]]</li>
+		<ul class="dropdown-menu p-1 text-sm" role="menu">
+			<li class="dropdown-item rounded-1" data-name="state" data-value="open" role="menuitem">[[flags:state-open]]</li>
+			<li class="dropdown-item rounded-1" data-name="state" data-value="wip" role="menuitem">[[flags:state-wip]]</li>
+			<li class="dropdown-item rounded-1" data-name="state" data-value="resolved" role="menuitem">[[flags:state-resolved]]</li>
+			<li class="dropdown-item rounded-1" data-name="state" data-value="rejected" role="menuitem">[[flags:state-rejected]]</li>
 		</ul>
 	</div>
 
 	<div class="btn-group bottom-sheet">
-		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.type }}}[[flags:filter-type-{./filters.type}]]{{{ else }}}[[flags:filter-type]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
-		<ul class="dropdown-menu p-1 text-sm">
-			<li class="dropdown-item rounded-1" data-name="type" data-value="all">[[flags:filter-type-all]]</li>
-			<li class="dropdown-item rounded-1" data-name="type" data-value="post">[[flags:filter-type-post]]</li>
-			<li class="dropdown-item rounded-1" data-name="type" data-value="user">[[flags:filter-type-user]]</li>
+		<ul class="dropdown-menu p-1 text-sm" role="menu">
+			<li class="dropdown-item rounded-1" data-name="type" data-value="all" role="menuitem">[[flags:filter-type-all]]</li>
+			<li class="dropdown-item rounded-1" data-name="type" data-value="post" role="menuitem">[[flags:filter-type-post]]</li>
+			<li class="dropdown-item rounded-1" data-name="type" data-value="user" role="menuitem">[[flags:filter-type-user]]</li>
 		</ul>
 	</div>
 
 	<div component="flags/filter/assignee" class="dropdown bottom-sheet" data-filter-name="assignee">
-		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.assignee }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.assignee }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">[[flags:filter-assignee]]</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
 
-		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
+		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;" role="menu">
 			<li class="px-3 py-1 d-flex flex-column gap-2">
 				<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
 				<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
@@ -117,12 +117,12 @@
 	</div>
 
 	<div component="flags/filter/reporterId" class="dropdown bottom-sheet" data-filter-name="reporterId">
-		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.reporterId }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.reporterId }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">[[flags:filter-reporterId]]</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
 
-		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
+		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;" role="menu">
 			<li class="px-3 py-1 d-flex flex-column gap-2">
 				<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
 				<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
@@ -144,12 +144,12 @@
 	</div>
 
 	<div component="flags/filter/targetUid" class="dropdown bottom-sheet" data-filter-name="targetUid">
-		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.targetUid }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.targetUid }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">[[flags:filter-targetUid]]</span>
 			<span class="caret text-primary opacity-75"></span>
 		</a>
 
-		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
+		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;" role="menu">
 			<li class="px-3 py-1 d-flex flex-column">
 				<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
 				<div component="user/filter/selected" class="d-flex flex-wrap gap-2">

package/templates/partials/groups/filter-dropdown-content.tpl

@@ -1,5 +1,5 @@
 <div class="dropdown bottom-sheet">
-	<button type="button" class="btn-ghost-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown">
+	<button type="button" class="btn-ghost-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		{{{ if selectedGroup }}}
 		<span class="fw-semibold">{selectedGroup.displayName}</span>
 		{{{ else }}}
@@ -8,14 +8,14 @@
 	</button>
 	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		<li role="presentation" class="user {{{ if !selectedGroup}}}selected{{{end}}}">
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{allGroupsUrl}">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{allGroupsUrl}">
 				<div class="flex-grow-1">[[groups:all-groups]]</div>
 				<i class="flex-shrink-0 fa fa-fw {{{ if !selectedGroup }}}fa-check{{{ end }}}"></i>
 			</a>
 		</li>
 		{{{ each groups }}}
 		<li role="presentation" class="user {{{ if ./selected}}}selected{{{end}}}">
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{./url}">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{./url}">
 				<div class="flex-grow-1 d-inline-flex gap-1 align-items-center">{./displayName}</div>
 				<i class="flex-shrink-0 fa fa-fw {{{ if ./selected }}}fa-check{{{ end }}}"></i>
 			</a>

package/templates/partials/mobile-footer.tpl

@@ -5,13 +5,13 @@
 	<div class="bottombar-nav p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
 		<div class="bottombar-nav-left d-flex gap-3 align-items-center">
 			<div>
-				<a href="#" role="button" class="nav-link d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
+				<a href="#" role="button" class="nav-link d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<span class="position-relative">
 						<i class="fa fa-fw fa-lg fa-bars"></i>
 						<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
 					</span>
 				</a>
-				<ul class="navigation-dropdown dropdown-menu">
+				<ul class="navigation-dropdown dropdown-menu" role="menu">
 					{{{ each navigation }}}
 					{{{ if displayMenuItem(@root, @index) }}}
 					<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">

package/templates/partials/post_bar.tpl

@@ -14,7 +14,7 @@
 				<!-- IMPORT partials/topic/tools.tpl -->
 
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}"><i class="fa fa-rss text-primary"></i></a>
+				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
 
 				{{{ if browsingUsers }}}

package/templates/partials/search-filters.tpl

@@ -2,12 +2,12 @@
 	<!-- category filter -->
 	<div class="post-search-item">
 		<div component="category/filter" class="dropdown" data-filter-name="category">
-			<a component="category/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.categories.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<a component="category/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.categories.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 				<span class="filter-label">{{{ if filters.categories.active }}}{filters.categories.label}{{{ else }}}[[search:categories]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm">
+			<ul class="dropdown-menu p-1 text-sm" role="menu">
 				<li class="px-3 py-1 mb-2 d-flex flex-column gap-2">
 					<div component="category-selector-search">
 						<input type="text" class="form-control" component="category/filter/search" placeholder="[[search:type-a-category]]">
@@ -28,12 +28,12 @@
 	<!-- tag filter -->
 	<div class="post-search-item">
 		<div component="tag/filter" class="dropdown" data-filter-name="tag">
-			<a component="tag/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.tags.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<a component="tag/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.tags.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 				<span class="filter-label">{{{ if filters.tags.active }}}{filters.tags.label}{{{ else }}}[[search:tags]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;">
+			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<input type="text" class="form-control" component="tag/filter/search" placeholder="[[search:type-a-tag]]">
 					<div component="tag/filter/selected" class="d-flex flex-wrap gap-2">
@@ -58,12 +58,12 @@
 	<!-- user name filter -->
 	<div class="post-search-item">
 		<div component="user/filter" class="dropdown" data-filter-name="user">
-			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.users.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.users.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 				<span class="filter-label">{{{ if filters.users.active }}}{filters.users.label}{{{ else }}}[[search:posted-by]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;">
+			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
 					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
@@ -89,12 +89,12 @@
 	<!-- reply count filter -->
 	<div class="post-search-item">
 		<div class="dropdown" data-filter-name="replies">
-			<a id="reply-count-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.replies.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+			<a id="reply-count-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.replies.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				<span class="filter-label">{{{ if filters.replies.active }}}{filters.replies.label}{{{ else }}}[[search:replies]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;">
+			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-nowrap gap-2">
 					<select id="reply-count-filter" class="form-select py-2 ps-2 pe-3">
 						<option value="atleast">[[search:at-least]]</option>
@@ -109,12 +109,12 @@
 	<!-- time filter -->
 	<div class="post-search-item">
 		<div class="dropdown" data-filter-name="time">
-			<a id="post-time-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.time.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+			<a id="post-time-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.time.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				<span class="filter-label">{{{ if filters.time.active }}}{filters.time.label}{{{ else }}}[[search:time]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;">
+			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-nowrap gap-2">
 					<select id="post-time-filter" class="form-select py-2 ps-2 pe-3">
 						<option value="newer">[[search:newer-than]]</option>
@@ -138,12 +138,12 @@
 	<!-- sort filter -->
 	<div class="post-search-item">
 		<div class="dropdown" data-filter-name="sort">
-			<a id="sort-by-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.sort.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+			<a id="sort-by-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.sort.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				<span class="filter-label">{{{ if filters.sort.active }}}{filters.sort.label}{{{ else }}}[[search:sort]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm" style="width: 250px;">
+			<ul class="dropdown-menu p-1 text-sm" style="width: 250px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<select id="post-sort-by" class="form-select py-2 ps-2 pe-3">
 						<option value="relevance">[[search:relevance]]</option>
@@ -170,10 +170,10 @@
 	<!-- save & reset preferences -->
 	<div class="post-search-item">
 		<div class="dropdown">
-			<a class="btn btn-light btn-sm border border-gray-300 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">[[search:save]] <span class="caret text-primary opacity-75"></span>
+			<a class="btn btn-light btn-sm border border-gray-300 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">[[search:save]] <span class="caret text-primary opacity-75"></span>
 			</a>
 
-			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;">
+			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<button id="save-preferences" class="btn btn-primary">[[search:save-preferences]]</button>
 					<button id="clear-preferences" class="btn-ghost border">[[search:clear-preferences]]</button>

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">
+<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">
 	<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>
@@ -8,7 +8,7 @@
 	</span>
 	<span component="chat/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.chat }}}hidden{{{ end }}}">{unreadCount.chat}</span>
 </a>
-<ul class="chats-dropdown dropdown-menu p-1 shadow">
+<ul class="chats-dropdown dropdown-menu p-1 shadow" role="menu">
 	<li>
 		<div component="chat/list" class="list-container chats-list overscroll-behavior-contain p-0 pe-1 ff-base">
 			<div class="rounded-1">

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">
+<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">
 	<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>
@@ -8,7 +8,7 @@
 	</span>
 	<span component="drafts/count" class="visible-open badge rounded-1 bg-primary hidden">0</span>
 </a>
-<ul class="drafts-dropdown dropdown-menu p-1 shadow">
+<ul class="drafts-dropdown dropdown-menu p-1 shadow" role="menu">
 	<li>
 		<div component="drafts/list" class="list-container draft-list list-unstyled d-flex flex-column overscroll-behavior-contain gap-1 pe-1">
 			<div class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
@@ -29,7 +29,7 @@
 				{{{ end }}}
 				<div data-save-id="{./save_id}">
 					<div class="d-flex gap-1 justify-content-between ff-base">
-						<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}">
+						<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}" role="menuitem">
 							{{{ if (./action == "topics.post") }}}
 							{{{ if ./title}}}
 							<div class="text text-xs fw-semibold line-clamp-2 text-break">{./title}</div>

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">
+<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">
 	<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>
@@ -8,7 +8,7 @@
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
-<ul class="notifications-dropdown dropdown-menu p-1 shadow">
+<ul class="notifications-dropdown dropdown-menu p-1 shadow" role="menu">
 	<li>
 		<div component="notifications/list" class="list-container notification-list overscroll-behavior-contain pe-1 ff-base">
 			<div class="mb-2 p-1">

package/templates/partials/sidebar/search-mobile.tpl

@@ -1,8 +1,8 @@
-<a component="search/button" id="search-button" href="#" role="button" class="nav-link text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]" aria-haspopup="true" aria-expanded="false">
 	<i class="fa fa-search fa-fw"></i>
 	<span class="nav-text visible-open px-2 fw-semibold">[[global:search]]</span>
 </a>
-<div class="search-dropdown dropdown-menu p-2 shadow">
+<div class="search-dropdown dropdown-menu p-2 shadow" role="menu">
 	<form component="search/form" id="search-form" class="d-flex justify-content-end align-items-center" role="search" method="GET">
 		<div component="search/fields" class="w-100" id="search-fields">
 			<div id="quick-search-container" class="quick-search-container d-block hidden">

package/templates/partials/sidebar/search.tpl

@@ -1,10 +1,10 @@
-<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">
+<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">
 	<span>
 		<i class="fa fa-search fa-fw"></i>
 	</span>
 	<span class="nav-text small visible-open fw-semibold">[[global:search]]</span>
 </a>
-<div class="search-dropdown dropdown-menu p-2 shadow">
+<div class="search-dropdown dropdown-menu p-2 shadow" role="menu">
 	<form component="search/form" id="search-form" class="d-flex justify-content-end align-items-center" role="search" method="GET">
 		<div component="search/fields" class="w-100" id="search-fields">
 			<div class="d-flex gap-1">

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">
+<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">
 	{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">
+<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">
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem">
 			<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>
@@ -12,28 +12,28 @@
 	<li role="presentation" class="dropdown-divider"></li>
 	<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">
+		<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 class="flex-grow-1">[[global:online]]</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.away }}}selected{{{ end }}}" data-status="away">
+		<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 class="flex-grow-1">[[global:away]]</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.dnd }}}selected{{{ end }}}" data-status="dnd">
+		<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 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">
+		<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 class="flex-grow-1">[[global:invisible]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
@@ -41,17 +41,17 @@
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks" role="menuitem">
 			<i class="fa fa-fw fa-bookmark text-muted"></i> <span>[[user:bookmarks]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit" role="menuitem">
 			<i class="fa fa-fw fa-edit text-muted"></i> <span>[[user:edit-profile]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings" role="menuitem">
 			<i class="fa fa-fw fa-gear text-muted"></i> <span>[[user:settings]]</span>
 		</a>
 	</li>
@@ -59,31 +59,31 @@
 	<li role="presentation" class="dropdown-divider"></li>
 	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags" role="menuitem">
 			<i class="fa fa-fw fa-flag text-muted"></i> <span>[[pages:flagged-content]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
 			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ if registrationQueueEnabled }}}
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/registration-queue">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/registration-queue" role="menuitem">
 			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:registration-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist" role="menuitem">
 			<i class="fa fa-fw fa-ban text-muted"></i> <span>[[pages:ip-blacklist]]</span>
 		</a>
 	</li>
 	{{{ else }}}
 	{{{ if postQueueEnabled }}}
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
 			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
@@ -95,7 +95,7 @@
 		<form method="post" action="{relative_path}/logout">
 			<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">
+			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw fa-sign-out text-muted"></i><span>[[global:logout]]</span>
 			</button>
 		</form>

package/templates/partials/sidebar-left.tpl

@@ -4,7 +4,7 @@
 		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
 			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
 						{{{ if ./iconClass }}}
@@ -19,7 +19,7 @@
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>
 			{{{ if ./dropdown }}}
-			<ul class="dropdown-menu p-1 shadow">
+			<ul class="dropdown-menu p-1 shadow" role="menu">
 				{./dropdownContent}
 			</ul>
 			{{{ end }}}
@@ -33,7 +33,7 @@
 		{{{ end }}}
 
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
-			<a href="#" role="button" component="sidebar/toggle" class="nav-link d-flex gap-2 align-items-center p-2 pointer w-100 text-nowrap" title="[[themes/harmony:expand]]">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-link d-flex gap-2 align-items-center p-2 pointer w-100 text-nowrap" title="[[themes/harmony:expand]]" aria-label="[[themes/harmony:sidebar-toggle]]">
 				<i class="fa fa-fw fa-angles-right"></i>
 				<i class="fa fa-fw fa-angles-left"></i>
 				<span class="nav-text visible-open fw-semibold small lh-1">[[themes/harmony:collapse]]</span>

package/templates/partials/skin-switcher.tpl

@@ -1,5 +1,5 @@
 <div class="dropend m-2" component="skinSwitcher" title="[[themes/harmony:skins]]">
-	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link position-relative">
+	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link position-relative" aria-haspopup="true" aria-expanded="false" aria-label="[[themes/harmony:skins]]">
 		<span class="justify-content-between w-100">
 			<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 				<span>
@@ -10,14 +10,14 @@
 		</span>
 	</a>
 
-	<ul class="dropdown-menu p-1 text-sm overflow-auto p-1">
+	<ul class="dropdown-menu p-1 text-sm overflow-auto p-1" role="menu">
 		<div class="d-flex">
 			<div>
 				<li class="dropdown-header">Light</li>
 				<div class="d-grid" style="grid-template-columns: 1fr 1fr;">
 					{{{ each bootswatchSkinOptions.light }}}
 					<li>
-						<a href="#" class="dropdown-item rounded-1" data-value="{./value}">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+						<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
 					</li>
 					{{{ end }}}
 				</div>
@@ -26,7 +26,7 @@
 				<li class="dropdown-header">Dark</li>
 				{{{ each bootswatchSkinOptions.dark }}}
 				<li>
-					<a href="#" class="dropdown-item rounded-1" data-value="{./value}">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+					<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
 				</li>
 				{{{ end }}}
 			</div>
@@ -37,12 +37,12 @@
 		<div class="d-grid" style="grid-template-columns: 1fr 1fr;">
 			{{{ each bootswatchSkinOptions.default }}}
 			<li>
-				<a href="#" class="dropdown-item rounded-1" data-value="{./value}">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+				<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
 			</li>
 			{{{ end }}}
 			{{{ each bootswatchSkinOptions.custom }}}
 			<li>
-				<a href="#" class="dropdown-item rounded-1" data-value="{./value}">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+				<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
 			</li>
 			{{{ end }}}
 		</div>

package/templates/partials/tags/filter-dropdown-content.tpl

@@ -1,4 +1,4 @@
-<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     {{{ if selectedTag }}}
     <span class="d-inline-flex align-items-center gap-1">
         <i class="fa fa-fw fa-tags text-primary"></i>
@@ -12,16 +12,16 @@
 <div component="tag/filter/search" class="hidden position-absolute top-0">
     <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="tag/filter/list" class="dropdown-menu p-1 text-sm overflow-auto" role="menu" style="max-height: 500px;">
+<ul component="tag/filter/list" class="dropdown-menu p-1 text-sm overflow-auto" role="menu" style="max-height: 500px;" role="menu">
     <li role="presentation" data-tag="">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
             <span class="flex-grow-1">[[tags:all-tags]]</span>
             <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
         </a>
     </li>
     {{{ each tagItems }}}
     <li role="presentation" data-tag="{./valueEscaped}">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
             <span component="tag-markup" class="flex-grow-1">
                 <div class="d-inline-flex align-items-center gap-1">
                     {./valueEscaped}