nodebb-theme-harmony 1.2.11 → 1.2.12

package/package.json

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

package/scss/topic.scss

@@ -124,7 +124,9 @@ body.template-topic {
 						opacity: 1;
 					}
 				}
-
+				[component="post/actions"]:focus-within {
+					opacity: 1;
+				}
 				&:hover {
 					> .post-footer > [component="post/actions"] {
 						opacity: 1;

package/templates/account/blocks.tpl

@@ -4,13 +4,13 @@
 	<div class="justify-content-end">
 		<div class="dropdown">
 			<div class="input-group">
-				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter-username]]" data-bs-toggle="dropdown" autocomplete="off"/>
+				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter-username]]" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
 
-				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;">
-					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;" role="menu">
+					<li><a href="#" class="dropdown-item" role="menuitem">[[admin/menu:search.start-typing]]</a></li>
 					{{{ each edit }}}
-					<li class="">
-						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+					<li>
+						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between" role="menuitem">
 							<div class="text-truncate">
 								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
 							</div>

package/templates/account/categories.tpl

@@ -7,11 +7,12 @@
 
 	<div class="d-flex gap-1">
 		<div class="btn-group bottom-sheet" component="category/watch/all">
-			<button class="btn-ghost-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" type="button">
+			<button class="btn-ghost-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
 				<span>[[user:change-all]]</span>
 			</button>
-			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end">
-				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/watching" data-state="watching">
+			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end" role="menu">
+				<li>
+					<a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/watching" data-state="watching" role="menuitem">
 						<div class="d-flex align-items-center gap-2">
 							<i class="flex-shrink-0 fa fa-fw fa-bell-o"></i>
 							<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
@@ -19,15 +20,17 @@
 						<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
 					</a>
 				</li>
-				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/tracking" data-state="tracking">
-					<div class="d-flex align-items-center gap-2">
-						<i class="flex-shrink-0 fa fa-fw fa-inbox"></i>
-						<span class="flex-grow-1 fw-semibold">[[category:tracking]]</span>
-					</div>
-					<div class="help-text text-muted text-xs">[[category:tracking.description]]</div>
-				</a>
-			</li>
-				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/notwatching" data-state="notwatching">
+				<li>
+					<a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/tracking" data-state="tracking" role="menuitem">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-inbox"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:tracking]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:tracking.description]]</div>
+					</a>
+				</li>
+				<li>
+					<a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/notwatching" data-state="notwatching" role="menuitem">
 						<div class="d-flex align-items-center gap-2">
 							<i class="flex-shrink-0 fa fa-fw fa-clock-o"></i>
 							<span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
@@ -35,7 +38,8 @@
 						<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
 					</a>
 				</li>
-				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/ignoring" data-state="ignoring">
+				<li>
+					<a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/ignoring" data-state="ignoring" role="menuitem">
 						<div class="d-flex align-items-center gap-2">
 							<i class="flex-shrink-0 fa fa-fw fa-eye-slash"></i>
 							<span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>

package/templates/account/topics.tpl

@@ -5,13 +5,13 @@
 		<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
 		{{{ if showSort }}}
 		<div class="btn-group bottom-sheet" component="thread/sort">
-			<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
-			<ul class="dropdown-menu p-1 text-sm">
+			<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+			<ul class="dropdown-menu p-1 text-sm" role="menu">
 				{{{each sortOptions }}}
 				<li>
-					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}">
-					<div class="flex-grow-1">{./name}</div>
-					<i class="flex-shrink-0 fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
+					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}" role="menuitem">
+						<div class="flex-grow-1">{./name}</div>
+						<i class="flex-shrink-0 fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
 					</a>
 				</li>
 				{{{end}}}

package/templates/flags/detail.tpl

@@ -15,24 +15,24 @@
 					[[flags:flagged-user]]
 					<i class="fa fa-chevron-right ms-auto text-secondary"></i>
 				</button>
-				<ul class="dropdown-menu p-1 text-sm">
-					<li><a class="dropdown-item rounded-1" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
+				<ul class="dropdown-menu p-1 text-sm" role="menu">
+					<li><a class="dropdown-item rounded-1" href="{config.relative_path}/uid/{target.uid}" role="menuitem">[[flags:view-profile]]</a></li>
 					{{{ if !config.disableChat }}}
-						<li><a class="dropdown-item rounded-1" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
+						<li><a class="dropdown-item rounded-1" href="#" data-action="chat" role="menuitem">[[flags:start-new-chat]]</a></li>
 					{{{ end }}}
 					<li class="dropdown-divider"></li>
 					{{{ if privileges.ban }}}
-					<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="ban">[[user:ban-account]]</a></li>
-					<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unban">[[user:unban-account]]</a></li>
+					<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="ban" role="menuitem">[[user:ban-account]]</a></li>
+					<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unban" role="menuitem">[[user:unban-account]]</a></li>
 					{{{ end }}}
 					{{{ if privileges.mute}}}
-					<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="mute">[[user:mute-account]]</a></li>
-					<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unmute">[[user:unmute-account]]</a></li>
+					<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="mute" role="menuitem">[[user:mute-account]]</a></li>
+					<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unmute" role="menuitem">[[user:unmute-account]]</a></li>
 					{{{ end }}}
 					{{{ if privileges.admin:users }}}
-					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-account">[[user:delete-account-as-admin]]</a></li>
-					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-content">[[user:delete-content]]</a></li>
-					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-all">[[user:delete-all]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-account" role="menuitem">[[user:delete-account-as-admin]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-content" role="menuitem">[[user:delete-content]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-all" role="menuitem">[[user:delete-all]]</a></li>
 					{{{ end }}}
 				</ul>
 			</div>

package/templates/groups/members.tpl

@@ -1,6 +1,10 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="users">
-	<!-- IMPORT partials/users_list.tpl -->
+	<div id="users-container" class="users-container row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4">
+		{{{ each users }}}
+		<!-- IMPORT partials/users/item.tpl -->
+		{{{ end }}}
+	</div>
 
 	<!-- IMPORT partials/paginator.tpl -->
 </div>

package/templates/header.tpl

@@ -24,6 +24,7 @@
 </head>
 
 <body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
+	<a class="visually-hidden-focusable position-absolute top-0 start-0 p-3 bg-body" style="z-index: 1021;" href="#content">[[global:skip-to-content]]</a>
 	<div class="layout-container d-flex justify-content-between pb-4 pb-md-0">
 		<!-- IMPORT partials/sidebar-left.tpl -->
 

package/templates/partials/account/admin-menu.tpl

@@ -2,34 +2,34 @@
 	<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-gear fa-fw"></i>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links">
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links" role="menu">
 		<li>
-			<a class="dropdown-item rounded-1" href="{config.relative_path}/user/{userslug}/info">[[user:account-info]]</a>
+			<a class="dropdown-item rounded-1" href="{config.relative_path}/user/{userslug}/info" role="menuitem">[[user:account-info]]</a>
 		</li>
 		{{{ if (canBan || canMute) }}}
 		<li role="separator" class="dropdown-divider"></li>
 		{{{ end }}}
 		{{{ if canBan }}}
 		<li class="{{{ if banned }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/ban" href="#">[[user:ban-account]]</a>
+			<a class="dropdown-item rounded-1" component="account/ban" href="#" role="menuitem">[[user:ban-account]]</a>
 		</li>
 		<li class="{{{ if !banned }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/unban" href="#">[[user:unban-account]]</a>
+			<a class="dropdown-item rounded-1" component="account/unban" href="#" role="menuitem">[[user:unban-account]]</a>
 		</li>
 		{{{ end }}}
 		{{{ if canMute }}}
 		<li class="{{{ if muted }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/mute" href="#">[[user:mute-account]]</a>
+			<a class="dropdown-item rounded-1" component="account/mute" href="#" role="menuitem">[[user:mute-account]]</a>
 		</li>
 		<li class="{{{ if !muted }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/unmute" href="#">[[user:unmute-account]]</a>
+			<a class="dropdown-item rounded-1" component="account/unmute" href="#" role="menuitem">[[user:unmute-account]]</a>
 		</li>
 		{{{ end }}}
 		{{{ if isAdmin }}}
 		<li>
-			<a component="account/delete-account" href="#" class="dropdown-item rounded-1">[[user:delete-account-as-admin]]</a>
-			<a component="account/delete-content" href="#" class="dropdown-item rounded-1">[[user:delete-content]]</a>
-			<a component="account/delete-all" href="#" class="dropdown-item rounded-1">[[user:delete-all]]</a>
+			<a component="account/delete-account" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-account-as-admin]]</a>
+			<a component="account/delete-content" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-content]]</a>
+			<a component="account/delete-all" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-all]]</a>
 		</li>
 		{{{ end }}}
 	</ul>

package/templates/partials/account/header.tpl

@@ -74,11 +74,11 @@
 				<div class="btn-group flex-fill">
 					<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
 					{{{ if hasPrivateChat}}}
-					<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
+					<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-caret-down"></i>
 					</button>
 					<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
-						<li><a class="dropdown-item rounded-1" href="#" component="account/new-chat">[[user:new-chat-with, {username}]]</a></li>
+						<li><a class="dropdown-item rounded-1" href="#" component="account/new-chat" role="menuitem"s>[[user:new-chat-with, {username}]]</a></li>
 					</ul>
 					{{{ end }}}
 				</div>

package/templates/partials/categories/lastpost.tpl

@@ -9,7 +9,7 @@
 			</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 }}}"></a>
+			<a class="stretched-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" aria-label="[[global:lastpost]]"></a>
 			{./content}
 		</div>
 	</div>

package/templates/partials/category/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 selectedCategory }}}
     <span class="category-item d-inline-flex align-items-center gap-1">
         {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
@@ -13,14 +13,14 @@
 </div>
 <ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
     <li role="presentation" class="category" data-cid="all">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
             <div class="flex-grow-1">[[unread:all-categories]]</div>
             <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
         </a>
     </li>
     {{{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 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menu-item" href="#">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if ./disabledClass }}}disabled{{{ end }}}" 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">

package/templates/partials/category/selector-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">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
         <span class="category-item d-inline-flex align-items-center gap-1">
@@ -16,11 +16,11 @@
 </div>
 <ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">
-        <a class="dropdown-item rounded-1" role="menu-item">[[search:no-matches]]</a>
+        <a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
     </li>
     {{{ each categoryItems }}}
     <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
-        <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menu-item" href="#">{./level}
+        <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
             <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-flex align-items-center gap-1">
                     {{{ if ./icon }}}

package/templates/partials/category/sort.tpl

@@ -1,29 +1,39 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:sort-by]]</span>
 	</button>
 
-	<ul class="dropdown-menu p-1 text-sm">
-		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest">
-			<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
-			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
-		</a></li>
-		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest">
-			<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
-			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
-		</a></li>
-		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_posts" data-sort="most_posts">
-			<span class="flex-grow-1">[[topic:most-posts]]</span>
-			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
-		</a></li>
-		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes">
-			<span class="flex-grow-1">[[topic:most-votes]]</span>
-			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
-		</a></li>
-		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_views" data-sort="most_views">
-			<span class="flex-grow-1">[[topic:most-views]]</span>
-			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
-		</a></li>
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="newest_to_oldest" role="menuitem">
+				<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="oldest_to_newest" role="menuitem">
+				<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="most_posts" role="menuitem">
+				<span class="flex-grow-1">[[topic:most-posts]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="most_votes" role="menuitem">
+				<span class="flex-grow-1">[[topic:most-votes]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="most_views" role="menuitem">
+				<span class="flex-grow-1">[[topic:most-views]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			</a>
+		</li>
 	</ul>
 </div>

package/templates/partials/category/tools.tpl

@@ -1,34 +1,34 @@
 {{{ if showTopicTools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-gear text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread-tools.title]]</span>
 		<span component="topic/selected/badge" class="badge rounded-pill bg-secondary"></span>
 	</button>
-	<ul class="dropdown-menu p-1 text-sm">
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		<li>
-			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-inbox"></i> [[topic:thread-tools.markAsUnreadForAll]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread-tools.pin]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unpin" href="#" class="hidden dropdown-item rounded-1">
+			<a component="topic/unpin" href="#" class="hidden dropdown-item rounded-1" role="menuitem">
 				<i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread-tools.unpin]]
 			</a>
 		</li>
 
 		<li>
-			<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread-tools.lock]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unlock" href="#" class="hidden dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/unlock" href="#" class="hidden dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread-tools.unlock]]
 			</a>
 		</li>
@@ -36,25 +36,25 @@
 		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread-tools.move]]
 			</a>
 		</li>
 		{{{if template.category}}}
 		<li>
-			<a component="topic/move-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/move-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread-tools.move-all]]
 			</a>
 		</li>
 		{{{end}}}
 		<li>
-			<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread-tools.merge]]
 			</a>
 		</li>
 
 		<li>
-			<a component="topic/tag" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/tag" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-tag"></i> [[topic:thread-tools.tag]]
 			</a>
 		</li>
@@ -62,24 +62,24 @@
 		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+			<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
 				<i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread-tools.delete]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/restore" href="#" class="hidden dropdown-item rounded-1">
+			<a component="topic/restore" href="#" class="hidden dropdown-item rounded-1" role="menuitem">
 				<i class="fa fa-fw text-muted fa-history"></i> [[topic:thread-tools.restore]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/purge" href="#" class="hidden dropdown-item rounded-1">
+			<a component="topic/purge" href="#" class="hidden dropdown-item rounded-1" role="menuitem">
 				<i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread-tools.purge]]
 			</a>
 		</li>
 
 		{{{each thread_tools}}}
 		<li>
-			<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {thread_tools.class}">
+			<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {thread_tools.class}" role="menuitem">
 				<i class="fa fa-fw {thread_tools.icon}"></i>
 				{thread_tools.title}</a>
 		</li>

package/templates/partials/category/watch.tpl

@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
 <div class="btn-group bottom-sheet" component="topic/watch">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-bell-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
 		<span component="category/tracking/menu" {{{ if !./isTracked }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:tracking]]</span></span>
@@ -10,9 +10,9 @@
 		<span component="category/ignoring/menu" {{{ if !./isIgnored }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-eye-slash text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:ignoring]]</span></span>
 	</button>
 
-	<ul class="dropdown-menu p-1 text-sm {{{ if template.account/categories }}}dropdown-menu-end{{{ end }}}">
+	<ul class="dropdown-menu p-1 text-sm {{{ if template.account/categories }}}dropdown-menu-end{{{ end }}}" role="menu">
 		<li>
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
 						<i class="flex-shrink-0 fa fa-fw text-muted fa-bell-o"></i>
@@ -25,7 +25,7 @@
 		</li>
 
 		<li>
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/tracking" data-state="tracking">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/tracking" data-state="tracking" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
 						<i class="flex-shrink-0 fa fa-fw text-muted fa-inbox"></i>
@@ -38,7 +38,7 @@
 		</li>
 
 		<li>
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/notwatching" data-state="notwatching">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/notwatching" data-state="notwatching" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
 						<i class="flex-shrink-0 fa fa-fw text-muted fa-clock-o"></i>
@@ -51,7 +51,7 @@
 		</li>
 
 		<li>
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/ignoring" data-state="ignoring">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/ignoring" data-state="ignoring" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
 						<i class="flex-shrink-0 fa fa-fw text-muted fa-eye-slash"></i>

package/templates/partials/flags/bulk-actions.tpl

@@ -2,8 +2,8 @@
 	<button class="filter-btn btn btn-light btn-sm border" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
 		<span class="filter-label">[[flags:bulk-actions]]</span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm">
-		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
-		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-assign" role="menuitem">[[flags:assign-to-me]]</a></li>
+		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-mark-resolved" role="menuitem">[[flags:bulk-resolve]]</a></li>
 	</ul>
 </div>