From 81fe5d61851c0e586af7d32c29171ceff9a571bb Mon Sep 17 00:00:00 2001
From: delvh <leon@kske.dev>
Date: Tue, 14 Mar 2023 04:34:09 +0100
Subject: Convert `<div class="button">` to `<button class="button">` (#23337)

This improves a lot of accessibility shortcomings.
Every possible instance of `<div class="button">` matching the command
`ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'`
has been converted when possible.
divs with the `dropdown` class and their children were omitted as
1. more analysis must be conducted whether the dropdowns still work as
intended when they are a `button` instead of a `div`.
2. most dropdowns have `div`s as children. The HTML standard disallows
`div`s inside `button`s.
3. When a dropdown child that's part of the displayed text content is
converted to a `button`, the dropdown can be focused twice

Further changes include that all "gitea-managed" buttons with JS code
received an `e.preventDefault()` so that they don't accidentally submit
an underlying form, which would execute instead of cancel the action.
Lastly, some minor issues were fixed as well during the refactoring.

## Future improvements

As mentioned in
https://github.com/go-gitea/gitea/pull/23337#discussion_r1127277391,
`<a>`s without `href` attribute are not focusable.
They should later on be converted to `<button>`s.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 web_src/js/features/admin/common.js  |  3 ++-
 web_src/js/features/common-global.js | 28 +++++++++++++++++++---------
 web_src/js/features/common-issue.js  |  1 +
 web_src/js/features/repo-issue.js    |  3 ++-
 web_src/js/features/repo-legacy.js   |  3 ++-
 web_src/svg/fontawesome-save.svg     |  1 +
 6 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 web_src/svg/fontawesome-save.svg

(limited to 'web_src')

diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
index d023e0bc36..be5aa876a5 100644
--- a/web_src/js/features/admin/common.js
+++ b/web_src/js/features/admin/common.js
@@ -198,7 +198,8 @@ export function initAdminCommon() {
           break;
       }
     });
-    $('#delete-selection').on('click', function () {
+    $('#delete-selection').on('click', function (e) {
+      e.preventDefault();
       const $this = $(this);
       $this.addClass('loading disabled');
       const ids = [];
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 4fa6942467..0f36ce2bf8 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -202,7 +202,8 @@ export function initGlobalDropzone() {
 }
 
 export function initGlobalLinkActions() {
-  function showDeletePopup() {
+  function showDeletePopup(e) {
+    e.preventDefault();
     const $this = $(this);
     const dataArray = $this.data();
     let filter = '';
@@ -243,10 +244,10 @@ export function initGlobalLinkActions() {
         });
       }
     }).modal('show');
-    return false;
   }
 
-  function showAddAllPopup() {
+  function showAddAllPopup(e) {
+    e.preventDefault();
     const $this = $(this);
     let filter = '';
     if ($this.attr('id')) {
@@ -272,7 +273,6 @@ export function initGlobalLinkActions() {
         });
       }
     }).modal('show');
-    return false;
   }
 
   function linkAction(e) {
@@ -318,13 +318,21 @@ export function initGlobalLinkActions() {
 }
 
 export function initGlobalButtons() {
-  $('.show-panel.button').on('click', function () {
+  // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
+  // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
+  // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
+  $(document).on('click', 'form .ui.cancel.button', (e) => {
+    e.preventDefault();
+  });
+
+  $('.show-panel.button').on('click', function (e) {
+    e.preventDefault();
     showElem($(this).data('panel'));
   });
 
-  $('.hide-panel.button').on('click', function (event) {
+  $('.hide-panel.button').on('click', function (e) {
     // a `.hide-panel.button` can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
-    event.preventDefault();
+    e.preventDefault();
     let sel = $(this).attr('data-panel');
     if (sel) {
       hideElem($(sel));
@@ -339,7 +347,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-')) {
@@ -360,7 +369,8 @@ export function initGlobalButtons() {
     }
   });
 
-  $('.delete-post.button').on('click', function () {
+  $('.delete-post.button').on('click', function (e) {
+    e.preventDefault();
     const $this = $(this);
     $.post($this.attr('data-request-url'), {
       _csrf: csrfToken
diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js
index 0965caef15..ebc851d676 100644
--- a/web_src/js/features/common-issue.js
+++ b/web_src/js/features/common-issue.js
@@ -34,6 +34,7 @@ export function initCommonIssue() {
   });
 
   $('.issue-action').on('click', async function (e) {
+    e.preventDefault();
     let action = this.getAttribute('data-action');
     let elementId = this.getAttribute('data-element-id');
     const url = this.getAttribute('data-url');
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 41c9dd118f..a8a27c2572 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -230,7 +230,8 @@ export function initRepoIssueStatusButton() {
     const value = easyMDE?.value() || $(this).val();
     $statusButton.text($statusButton.data(value.length === 0 ? 'status' : 'status-and-comment'));
   });
-  $statusButton.on('click', () => {
+  $statusButton.on('click', (e) => {
+    e.preventDefault();
     $('#status').val($statusButton.data('status-val'));
     $('#comment-form').trigger('submit');
   });
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 70542ad883..5346a0d274 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -412,7 +412,8 @@ async function onEditContent(event) {
       $saveButton.trigger('click');
     });
 
-    $editContentZone.find('.cancel.button').on('click', () => {
+    $editContentZone.find('.cancel.button').on('click', (e) => {
+      e.preventDefault();
       showElem($renderContent);
       hideElem($editContentZone);
       if (dz) {
diff --git a/web_src/svg/fontawesome-save.svg b/web_src/svg/fontawesome-save.svg
new file mode 100644
index 0000000000..763d26abb1
--- /dev/null
+++ b/web_src/svg/fontawesome-save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 448 512"><path d="m434 130-84-84a48 48 0 0 0-33.9-14H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V163.9a48 48 0 0 0-14-34zM224 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128zm96-304.5V212a12 12 0 0 1-12 12H76a12 12 0 0 1-12-12V108a12 12 0 0 1 12-12h228.5a12 12 0 0 1 8.5 3.5l3.5 3.5a12 12 0 0 1 3.5 8.5z"/></svg>
\ No newline at end of file
-- 
cgit v1.2.3