Convert issue list checkboxes to native (#23596)

Use native instead of fomantic checkboxes in issue list. Benefits
include no more JS pop-in on load and perfect a11y.

Before, with JS pop-in:

<img width="92" alt="Screenshot 2023-03-20 at 17 02 02"
src="https://user-images.githubusercontent.com/115237/226398955-99029a1c-1150-449c-821b-e4165e7446a8.png">

After, Firefox on macOS:

<img width="126" alt="Screenshot 2023-03-20 at 17 01 26"
src="https://user-images.githubusercontent.com/115237/226399018-58df2c32-c2b2-4c78-b7df-7b76523abe21.png">

After, Chrome on macOS:

<img width="79" alt="Screenshot 2023-03-20 at 17 01 42"
src="https://user-images.githubusercontent.com/115237/226399074-947e6279-8dc3-42c2-90b5-b106c471b23d.png">

I opted to not do styling yet but I see that the inconsistency between
browsers may already be reason enough on doing it. I think if we style
them, there should be one global style, including markdown ones which
currently have custom styling.

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 38ed3873ba4c87b4b68e5189cb70d557a596f170..c8d186bbfbaafff57b429a0df3bc1d1688f67a9b 100644 (file)
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -29,9 +29,7 @@
                <div id="issue-filters" class="ui stackable grid">
                        <div class="six wide column">
                                {{if $.CanWriteIssuesOrPulls}}
-                                       <div class="ui checkbox issue-checkbox-all gt-vm">
-                                               <input type="checkbox" title="{{.locale.Tr "repo.issues.action_check_all"}}">
-                                       </div>
+                                       <input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-vm gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
                                {{end}}
                                {{template "repo/issue/openclose" .}}
                        </div>

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 24fa236bb48d1bffb5b229ead8a3ca7ef1f48659..35994fc4354b9c2037c526eef57569dff0fcf7eb 100644 (file)
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -2,11 +2,9 @@
        {{$approvalCounts := .ApprovalCounts}}
        {{range .Issues}}
                <li class="item gt-df gt-py-3">
-                       <div class="issue-item-left gt-df">
+                       <div class="issue-item-left gt-df gt-items-start">
                                {{if $.CanWriteIssuesOrPulls}}
-                                       <div class="ui checkbox issue-checkbox">
-                                               <input type="checkbox" data-issue-id={{.ID}} title="{{$.locale.Tr "repo.issues.action_check"}} «{{.Title}}»">
-                                       </div>
+                                       <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mt-2 gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
                                {{end}}
                                <div class="issue-item-icon">
                                        {{if .IsPull}}

diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 34d2895a5f73e45493a63c8b301b713d1dc2b93f..e2d195822fc0fb269f557f382a76b9ad6f80ee0a 100644 (file)
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -24,6 +24,7 @@
 .gt-relative { position: relative !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-cursor-default { cursor: default !important; }
+.gt-items-start { align-items: flex-start !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;

diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index ebb1ca989b87f9bf74c5676c651443538833dce5..26affd98a093de8bf16a7e14ab2fbfe110ce9db3 100644 (file)
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -7,10 +7,6 @@
   color: var(--color-primary) !important;
 }
 
-.issue.list > .item .issue-checkbox {
-  margin-top: 1px;
-}
-
 .issue.list > .item .issue-item-icon svg {
   margin-right: 0.75rem;
   margin-top: 1px;

diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js
index ebc851d6763367d191c3bc63287defefe7f3b0f5..25d41edde348dd1378984df23960880ca06bf085 100644 (file)
--- a/web_src/js/features/common-issue.js
+++ b/web_src/js/features/common-issue.js
@@ -3,9 +3,8 @@ import {updateIssuesMeta} from './repo-issue.js';
 import {toggleElem} from '../utils/dom.js';
 
 export function initCommonIssue() {
-  const $issueSelectAllWrapper = $('.issue-checkbox-all');
-  const $issueSelectAll = $('.issue-checkbox-all input');
-  const $issueCheckboxes = $('.issue-checkbox input');
+  const $issueSelectAll = $('.issue-checkbox-all');
+  const $issueCheckboxes = $('.issue-checkbox');
 
   const syncIssueSelectionState = () => {
     const $checked = $issueCheckboxes.filter(':checked');
@@ -23,7 +22,7 @@ export function initCommonIssue() {
     toggleElem($('#issue-filters'), !anyChecked);
     toggleElem($('#issue-actions'), anyChecked);
     // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
-    $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAllWrapper);
+    $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
   };
 
   $issueCheckboxes.on('change', syncIssueSelectionState);
@@ -38,7 +37,7 @@ export function initCommonIssue() {
     let action = this.getAttribute('data-action');
     let elementId = this.getAttribute('data-element-id');
     const url = this.getAttribute('data-url');
-    const issueIDs = $('.issue-checkbox').children('input:checked').map((_, el) => {
+    const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
       return el.getAttribute('data-issue-id');
     }).get().join(',');
     if (elementId === '0' && url.slice(-9) === '/assignee') {
@@ -54,20 +53,7 @@ export function initCommonIssue() {
       issueIDs,
       elementId
     ).then(() => {
-      // NOTICE: This reset of checkbox state targets Firefox caching behaviour, as the
-      // checkboxes stay checked after reload
-      if (action === 'close' || action === 'open') {
-        // uncheck all checkboxes
-        $('.issue-checkbox input[type="checkbox"]').each((_, e) => { e.checked = false });
-      }
       window.location.reload();
     });
   });
-
-  // NOTICE: This event trigger targets Firefox caching behaviour, as the checkboxes stay
-  // checked after reload trigger checked event, if checkboxes are checked on load
-  $('.issue-checkbox input[type="checkbox"]:checked').first().each((_, e) => {
-    e.checked = false;
-    $(e).trigger('click');
-  });
 }