fix: #14123, aria-hidden fixes

add aria-labels

install/package.json

@@ -108,7 +108,7 @@
         "nodebb-plugin-spam-be-gone": "2.3.2",
         "nodebb-plugin-web-push": "0.7.7",
         "nodebb-rewards-essentials": "1.0.2",
-        "nodebb-theme-harmony": "2.2.61",
+        "nodebb-theme-harmony": "2.2.62",
         "nodebb-theme-lavender": "7.1.21",
         "nodebb-theme-peace": "2.2.57",
         "nodebb-theme-persona": "14.2.33",

src/views/admin/extend/plugins.tpl

@@ -125,7 +125,7 @@
 					<div class="modal-content">
 						<div class="modal-header">
 							<h4 class="modal-title">[[admin/extend/plugins:order-active]]</h4>
-							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 						</div>
 						<div class="modal-body">
 							<p>

src/views/admin/footer.tpl

@@ -6,7 +6,7 @@
 	<div class="">
 		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px; z-index: 1090;">
 			<div id="reconnect-alert" class="alert alert-dismissible alert-warning fade hide" component="toaster/toast">
-				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button>
+				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="[[global:buttons.close]]"></button>
 				<p class="mb-0">[[global:reconnecting-message, {config.siteTitle}]]</p>
 			</div>
 		</div>

src/views/admin/manage/tags.tpl

@@ -45,12 +45,12 @@
 			</div>
 		</div>
 
-		<div class="modal fade" id="create-modal">
+		<div class="modal fade" id="create-modal" tabindex="-1" aria-hidden="true">
 			<div class="modal-dialog">
 				<div class="modal-content">
 					<div class="modal-header">
 						<h4 class="modal-title">[[admin/manage/tags:create]]</h4>
-						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 					</div>
 					<div class="modal-body">
 						<form>

src/views/admin/partials/create_group_modal.tpl

@@ -1,9 +1,9 @@
-<div class="modal fade" id="create-modal">
+<div class="modal fade" id="create-modal" tabindex="-1" aria-label="[[admin/manage/groups:create]]">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h4 class="modal-title">[[admin/manage/groups:create]]</h4>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 			</div>
 			<div class="modal-body">
 				<form>

src/views/chat.tpl

@@ -1,8 +1,8 @@
-<div id="chat-modal" class="chat-modal d-flex flex-nowrap modal hide overflow-visible" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-center="false">
+<div id="chat-modal" class="chat-modal d-flex flex-nowrap modal overflow-visible" tabindex="-1" role="dialog" aria-labelledby="chat-room-title-{roomId}" data-center="false">
 	<div class="modal-dialog">
 		<div class="modal-content" component="chat/message/window">
 			<div class="modal-header d-flex gap-4 justify-content-between">
-				<div class="fs-6 flex-grow-1 fw-semibold tracking-tight text-truncate text-nowrap" component="chat/room/name" data-icon="{icon}">{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}</div>
+				<div id="chat-room-title-{roomId}" class="fs-6 flex-grow-1 fw-semibold tracking-tight text-truncate text-nowrap" component="chat/room/name" data-icon="{icon}">{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}</div>
 				<div class="d-flex gap-1 align-items-center">
 					<button type="button" class="btn btn-ghost btn-sm d-none d-md-flex align-self-stretch align-items-center" data-action="maximize" title="[[modules:chat.maximize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 						<i class="fa fa-fw fa-expand text-muted"></i>

src/views/modals/crop_picture.tpl

@@ -1,9 +1,9 @@
-<div id="crop-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="crop-picture" aria-hidden="true">
+<div id="crop-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="crop-picture" aria-labelledby="crop-picture">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h3 id="crop-picture">[[user:crop-picture]]</h3>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 			</div>
 			<div class="modal-body">
 				<div id="upload-progress-box" class="progress hide">
@@ -30,7 +30,7 @@
 				</div>
 			</div>
 			<div class="modal-footer">
-				<button class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-hidden="true">Close</button>
+				<button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
 				<button class="btn btn-primary upload-btn {{{ if !allowSkippingCrop }}}hidden{{{ end }}}">[[user:upload-picture]]</button>
 				<button class="btn btn-primary crop-btn">[[user:upload-cropped-picture]]</button>
 			</div>

src/views/modals/flag.tpl

@@ -1,9 +1,9 @@
-<div class="modal" tabindex="-1" role="dialog" aria-labelledby="[[flags:modal-title]]" aria-hidden="true">
+<div class="modal" tabindex="-1" role="dialog" aria-label="[[flags:modal-title]]">
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h5 class="modal-title">[[flags:modal-title]]</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 			</div>
 			<div class="modal-body">
 				<p class="lead">

src/views/modals/upload-file.tpl

@@ -1,9 +1,9 @@
-<div class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-file" aria-hidden="true">
+<div class="modal" tabindex="-1" role="dialog" aria-label="{title}">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h5 class="modal-title">{title}</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 			</div>
 			<div class="modal-body">
 				<form class="mb-3" id="uploadForm" action="" method="post" enctype="multipart/form-data">
@@ -36,7 +36,7 @@
 				<div id="alert-error" class="alert alert-danger hide"></div>
 			</div>
 			<div class="modal-footer">
-				<button class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-hidden="true">[[global:close]]</button>
+				<button class="btn btn-outline-secondary" data-bs-dismiss="modal">[[global:close]]</button>
 				<button id="fileUploadSubmitBtn" class="btn btn-primary">{button}</button>
 			</div>
 		</div>

src/views/modals/upload-picture-from-url.tpl

@@ -1,15 +1,15 @@
-<div id="upload-picture-from-url-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-picture-url" aria-hidden="true">
+<div id="upload-picture-from-url-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-picture-url" aria-label="[[user:upload-picture]]">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h5 class="modal-title" id="upload-picture-url">[[user:upload-picture]]</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="[[global:buttons.close]]"></button>
 			</div>
 			<div class="modal-body">
 				<input id="uploadFromUrl" class="form-control" type="text"/>
 			</div>
 			<div class="modal-footer">
-				<button class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-hidden="true">[[global:close]]</button>
+				<button class="btn btn-outline-secondary" data-bs-dismiss="modal">[[global:close]]</button>
 				<button class="btn btn-primary upload-btn">[[user:upload-picture]]</button>
 			</div>
 		</div>

src/views/partials/reconnect-alert.tpl

@@ -1,4 +1,4 @@
 <div id="reconnect-alert" class="alert alert-dismissible alert-warning fade hide" component="toaster/toast" role="alert">
-	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button>
+	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="[[global:buttons.close]]"></button>
 	<p class="mb-0">[[global:reconnecting-message, {config.siteTitle}]]</p>
 </div>