Convert <div class="button"> to <button class="button">

templates/admin/user/edit.tmpl

@@ -151,7 +151,7 @@
 
 				<div class="field">
 					<button class="ui green button">{{.locale.Tr "admin.users.update_profile"}}</button>
-					<button type="button" class="ui red button show-modal" data-modal="#delete-user-modal">{{.locale.Tr "admin.users.delete_account"}}</button>
+					<button class="ui red button show-modal" data-modal="#delete-user-modal">{{.locale.Tr "admin.users.delete_account"}}</button>
 				</div>
 			</form>
 		</div>
@@ -189,7 +189,7 @@
 
 				<div class="field">
 					<button class="ui green button">{{$.locale.Tr "settings.update_avatar"}}</button>
-					<a class="ui red button delete-post" data-request-url="{{.Link}}/avatar/delete" data-done-url="{{.Link}}">{{$.locale.Tr "settings.delete_current_avatar"}}</a>{{/* TODO: Why is this link not focusable? */}}
+					<a class="ui red button delete-post" data-request-url="{{.Link}}/avatar/delete" data-done-url="{{.Link}}">{{$.locale.Tr "settings.delete_current_avatar"}}</a>{{/* TODO: Convert links without href to buttons for a11y */}}
 				</div>
 			</form>
 		</div>

templates/repo/activity.tmpl

@@ -5,8 +5,8 @@
 		<h2 class="ui header"><time data-format="date" datetime="{{.DateFrom}}">{{.DateFrom}}</time> - <time data-format="date" datetime="{{.DateUntil}}">{{.DateUntil}}</time>
 			<div class="ui right">
 				<!-- Period -->
-				<div class="ui floating dropdown jump filter">
-					<span class="ui basic compact button text">
+				<div class="ui basic compact button floating dropdown jump filter">
+					<span class="text">
 						{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 					</span>

templates/repo/issue/view_content/update_branch_by_merge.tmpl

@@ -19,8 +19,8 @@
 						<div class="ui dropdown icon button no-text">
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
-								<button class="item active selected" data-do="{{.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</button>
-								<button class="item" data-do="{{.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</button>
+								<a class="item active selected" data-do="{{.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
+								<a class="item" data-do="{{.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>
 							</div>
 						</div>
 					</div>

templates/repo/projects/view.tmpl

@@ -162,7 +162,7 @@
 											{{$.locale.Tr "repo.projects.column.deletion_desc"}}
 										</label>
 									</div>
-									<div class="text right actions">{{/* Convert to base/delete_modal_actions.tmpl? */}}
+									<div class="text right actions">{{/* TODO: Convert to base/delete_modal_actions.tmpl? */}}
 										<button type="button" class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
 										<button class="ui red button delete-project-board" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">{{$.locale.Tr "repo.projects.column.delete"}}</button>
 									</div>

templates/repo/settings/lfs.tmpl

@@ -50,7 +50,7 @@
 					</p>
 					<form class="ui form" action="{{$.Link}}/delete/{{.Oid}}" method="post">
 						{{$.CsrfTokenHtml}}
-						<div class="center actions">{{/* Convert to base/delete_modal_actions */}}
+						<div class="center actions">{{/* TODO: Convert to base/delete_modal_actions */}}
 							<button type="button" class="ui basic cancel inverted button">{{$.locale.Tr "settings.cancel"}}</button>
 							<button class="ui basic inverted yellow button">{{$.locale.Tr "modal.yes"}}</button>
 						</div>

web_src/js/features/aria.js

@@ -96,6 +96,11 @@ function attachOneDropdownAria($dropdown) {
   $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAria(); });
 }
 
+export function initCancelButtons(rootElement=document) {
+  // Only cancel buttons should have the 'cancel' class, and these buttons should not submit an underlying form, so set 'type="button"' for them
+  rootElement.querySelectorAll('.cancel').forEach(cancelButton => cancelButton.setAttribute('type', 'button'));
+}
+
 export function attachDropdownAria($dropdowns) {
   $dropdowns.each((_, e) => attachOneDropdownAria($(e)));
 }

web_src/js/features/common-global.js

@@ -339,7 +339,8 @@ export function initGlobalButtons() {
     alert('Nothing to hide');
   });
 
-  $('.show-modal').on('click', function () {
+  $('.show-modal').on('click', function (e) {
+    e.preventDefault();
     const modalDiv = $($(this).attr('data-modal'));
     for (const attrib of this.attributes) {
       if (!attrib.name.startsWith('data-modal-')) {

web_src/js/index.js

@@ -6,6 +6,7 @@ import {initVueEnv} from './components/VueComponentLoader.js';
 import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
 import {initDashboardRepoList} from './components/DashboardRepoList.js';
 
+import {initCancelButtons} from './features/aria.js';
 import {attachTribute} from './features/tribute.js';
 import {initGlobalCopyToClipboardListener} from './features/clipboard.js';
 import {initContextPopups} from './features/contextpopup.js';
@@ -198,4 +199,5 @@ $(document).ready(() => {
   initUserAuthWebAuthnRegister();
   initUserSettings();
   initViewedCheckboxListenerFor();
+  initCancelButtons();
 });