Replace jQuery UI tabs with vanilla JS (#3413)

web/css/src/dependencies/jquery-ui.css

@@ -1,56 +0,0 @@
-/*
- * "Tabs" CSS from jQuery UI v1.13.2
- */
-
-.ui-tabs {
-	position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
-	padding: 0.2em;
-}
-.ui-tabs .ui-tabs-nav {
-	margin: 0;
-	padding: 0.2em 0.2em 0;
-}
-.ui-tabs .ui-tabs-nav li {
-	list-style: none;
-	float: left;
-	position: relative;
-	top: 0;
-	margin: 1px 0.2em 0 0;
-	border-bottom-width: 0;
-	padding: 0;
-	white-space: nowrap;
-}
-.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
-	float: left;
-	padding: 0.5em 1em;
-	text-decoration: none;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active {
-	margin-bottom: -1px;
-	padding-bottom: 1px;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
-.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
-.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
-	cursor: text;
-}
-.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
-	cursor: pointer;
-}
-.ui-tabs .ui-tabs-panel {
-	display: block;
-	border-width: 0;
-	padding: 1em 1.4em;
-	background: none;
-}
-
-/* Layout helpers */
-.ui-helper-clearfix:before,
-.ui-helper-clearfix:after {
-	content: "";
-	display: table;
-	border-collapse: collapse;
-}
-.ui-helper-clearfix:after {
-	clear: both;
-}

web/css/src/themes/dark.css

@@ -805,25 +805,25 @@ strong {
 	border-bottom: 1px solid #353535;
 }
 
-.cron-helper-panel {
+/* Tabs component
+   ========================================================================== */
+
+.tabs {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
 	border-color: #606060;
 	background-color: #454545;
+}
 
-	& .ui-tabs-tab a {
-		color: #cacaca;
-
-		&:hover {
-			color: #ff3478;
-		}
+.tabs-item {
+	color: #cacaca;
 
-		&:active {
-			color: #3b9de8;
-		}
+	&:hover,
+	&[aria-selected="true"] {
+		color: #ff3478;
 	}
 
-	& .ui-tabs-tab[aria-expanded="true"] a {
-		color: #ff3478;
+	&:active {
+		color: #3b9de8;
 	}
 }
 

web/css/src/themes/default.css

@@ -3,7 +3,6 @@
 @import url("@fortawesome/fontawesome-free/css/brands");
 @import url("@fortawesome/fontawesome-free/css/solid");
 @import url("../dependencies/animate");
-@import url("../dependencies/jquery-ui");
 @import url("../media_queries");
 @import url("../fonts");
 @import url("../base");
@@ -2354,32 +2353,50 @@
 	color: #c0c0c0;
 }
 
-.cron-helper-panel {
+/* Tabs component
+   ========================================================================== */
+
+.tabs {
 	border: 1px solid #cfcfcf;
 	border-radius: var(--border-radius-base);
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-	margin-top: 20px;
+	padding: 10px;
+}
 
-	& .ui-tabs-tab a {
-		color: #777;
-		font-weight: 600;
-		line-height: 30px;
-		padding: 0 12px;
-		text-transform: uppercase;
+.tabs-items {
+	display: flex;
+	flex-wrap: wrap;
+}
 
-		&:hover {
-			color: #c36;
-		}
+.tabs-item {
+	border: 0;
+	background-color: transparent;
+	text-transform: uppercase;
+	font-weight: 600;
+	color: #777;
+	padding: 10px;
 
-		&:active {
-			color: #3b9de8;
-		}
+	&:hover,
+	&[aria-selected="true"] {
+		color: #c36;
 	}
 
-	& .ui-tabs-tab[aria-expanded="true"] a {
-		color: #c36;
+	&:active {
+		color: #3b9de8;
 	}
 
+	@media (--viewport-medium) {
+		margin-right: 10px;
+	}
+}
+
+.tabs-panel {
+	padding: 10px;
+}
+
+.cron-tabs {
+	margin-top: 20px;
+
 	@media (--viewport-medium) {
 		margin-top: 25px;
 

web/css/src/themes/vestia.css

@@ -411,22 +411,24 @@ strong {
 	}
 }
 
-.cron-helper-panel {
+/* Tabs component
+   ========================================================================== */
+
+.tabs {
 	border-radius: 0;
 	box-shadow: none;
+}
 
-	& .ui-tabs-tab a {
-		&:hover {
-			color: #f79b44;
-		}
+.tabs-item {
+	color: #777;
 
-		&:active {
-			color: #e95e00;
-		}
+	&:hover,
+	&[aria-selected="true"] {
+		color: #ff6701;
 	}
 
-	& .ui-tabs-tab[aria-expanded="true"] a {
-		color: #ff6701;
+	&:active {
+		color: #e95e00;
 	}
 }
 

web/js/pages/add_cron.js

@@ -1,6 +1,29 @@
 document.addEventListener('DOMContentLoaded', () => {
-	// TODO: Replace jQuery UI tabs with something else
-	$('.js-cron-tabs').tabs();
+	const tabs = document.querySelector('.js-tabs');
+	if (tabs) {
+		const tabItems = tabs.querySelectorAll('.tabs-item');
+		const panels = tabs.querySelectorAll('.tabs-panel');
+		tabItems.forEach((tab) => {
+			tab.addEventListener('click', (event) => {
+				// Reset state
+				panels.forEach((panel) => (panel.hidden = true));
+				tabItems.forEach((tab) => {
+					tab.setAttribute('aria-selected', false);
+					tab.setAttribute('tabindex', -1);
+				});
+
+				// Show the selected panel
+				const tabId = event.target.getAttribute('id');
+				const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
+				panel.hidden = false;
+
+				// Mark the selected tab as active
+				event.target.setAttribute('aria-selected', true);
+				event.target.setAttribute('tabindex', 0);
+				event.target.focus();
+			});
+		});
+	}
 
 	const generateCronButtons = document.querySelectorAll('.js-generate-cron');
 	generateCronButtons.forEach((button) => {

web/js/pages/edit_cron.js

@@ -1,6 +1,29 @@
 document.addEventListener('DOMContentLoaded', () => {
-	// TODO: Replace jQuery UI tabs with something else
-	$('.js-cron-tabs').tabs();
+	const tabs = document.querySelector('.js-tabs');
+	if (tabs) {
+		const tabItems = tabs.querySelectorAll('.tabs-item');
+		const panels = tabs.querySelectorAll('.tabs-panel');
+		tabItems.forEach((tab) => {
+			tab.addEventListener('click', (event) => {
+				// Reset state
+				panels.forEach((panel) => (panel.hidden = true));
+				tabItems.forEach((tab) => {
+					tab.setAttribute('aria-selected', false);
+					tab.setAttribute('tabindex', -1);
+				});
+
+				// Show the selected panel
+				const tabId = event.target.getAttribute('id');
+				const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
+				panel.hidden = false;
+
+				// Mark the selected tab as active
+				event.target.setAttribute('aria-selected', true);
+				event.target.setAttribute('tabindex', 0);
+				event.target.focus();
+			});
+		});
+	}
 
 	const generateCronButtons = document.querySelectorAll('.js-generate-cron');
 	generateCronButtons.forEach((button) => {

web/templates/includes/js.php

@@ -1,6 +1,5 @@
 <script defer src="/js/main.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/jquery-3.6.4.min.js?<?= JS_LATEST_UPDATE ?>"></script>
-<script defer src="/js/vendor/jquery-ui.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/chart.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/shortcuts.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/events.js?<?= JS_LATEST_UPDATE ?>"></script>

web/templates/pages/add_cron.php

@@ -52,15 +52,15 @@
 					</div>
 				</div>
 				<div>
-					<div class="cron-helper-panel js-cron-tabs">
-						<ul>
-							<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>
-							<li><a href="#tabs-2"><?= _("Hourly") ?></a></li>
-							<li><a href="#tabs-3"><?= _("Daily") ?></a></li>
-							<li><a href="#tabs-4"><?= _("Weekly") ?></a></li>
-							<li><a href="#tabs-5"><?= _("Monthly") ?></a></li>
-						</ul>
-						<div id="tabs-1">
+					<div class="tabs cron-tabs js-tabs">
+						<div class="tabs-items" role="tablist">
+							<button type="button" class="tabs-item" id="tab-one" role="tab" tabindex="0" aria-selected="true"><?= _("Minutes") ?></button>
+							<button type="button" class="tabs-item" id="tab-two" role="tab" tabindex="-1"><?= _("Hourly") ?></button>
+							<button type="button" class="tabs-item" id="tab-three" role="tab" tabindex="-1"><?= _("Daily") ?></button>
+							<button type="button" class="tabs-item" id="tab-four" role="tab" tabindex="-1"><?= _("Weekly") ?></button>
+							<button type="button" class="tabs-item" id="tab-five" role="tab" tabindex="-1"><?= _("Monthly") ?></button>
+						</div>
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-one" tabindex="0">
 							<fieldset>
 								<input type="hidden" name="h_hour" value="*" form="">
 								<input type="hidden" name="h_day" value="*" form="">
@@ -84,8 +84,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-2">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-two" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_day" value="*" form="">
 								<input type="hidden" name="h_month" value="*" form="">
@@ -115,8 +114,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-3">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-three" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_month" value="*" form="">
 								<input type="hidden" name="h_wday" value="*" form="">
@@ -185,8 +183,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-4">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-four" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_month" value="*" form="">
 								<input type="hidden" name="h_day" value="*" form="">
@@ -258,8 +255,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-5">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-five" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_wday" value="*" form="">
 								<div class="u-mt10 u-mb10">

web/templates/pages/edit_cron.php

@@ -52,15 +52,15 @@
 					</div>
 				</div>
 				<div>
-					<div class="cron-helper-panel js-cron-tabs">
-						<ul>
-							<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>
-							<li><a href="#tabs-2"><?= _("Hourly") ?></a></li>
-							<li><a href="#tabs-3"><?= _("Daily") ?></a></li>
-							<li><a href="#tabs-4"><?= _("Weekly") ?></a></li>
-							<li><a href="#tabs-5"><?= _("Monthly") ?></a></li>
-						</ul>
-						<div id="tabs-1">
+					<div class="tabs cron-tabs js-tabs">
+						<div class="tabs-items" role="tablist">
+							<button type="button" class="tabs-item" id="tab-one" role="tab" tabindex="0" aria-selected="true"><?= _("Minutes") ?></button>
+							<button type="button" class="tabs-item" id="tab-two" role="tab" tabindex="-1"><?= _("Hourly") ?></button>
+							<button type="button" class="tabs-item" id="tab-three" role="tab" tabindex="-1"><?= _("Daily") ?></button>
+							<button type="button" class="tabs-item" id="tab-four" role="tab" tabindex="-1"><?= _("Weekly") ?></button>
+							<button type="button" class="tabs-item" id="tab-five" role="tab" tabindex="-1"><?= _("Monthly") ?></button>
+						</div>
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-one" tabindex="0">
 							<fieldset>
 								<input type="hidden" name="h_hour" value="*" form="">
 								<input type="hidden" name="h_day" value="*" form="">
@@ -84,8 +84,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-2">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-two" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_day" value="*" form="">
 								<input type="hidden" name="h_month" value="*" form="">
@@ -115,8 +114,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-3">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-three" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_month" value="*" form="">
 								<input type="hidden" name="h_wday" value="*" form="">
@@ -185,8 +183,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-4">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-four" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_month" value="*" form="">
 								<input type="hidden" name="h_day" value="*" form="">
@@ -258,8 +255,7 @@
 								</div>
 							</fieldset>
 						</div>
-
-						<div id="tabs-5">
+						<div class="tabs-panel" role="tabpanel" aria-labelledby="tab-five" tabindex="0" hidden>
 							<fieldset>
 								<input type="hidden" name="h_wday" value="*" form="">
 								<div class="u-mt10 u-mb10">