Implement CSS-only input toggling, refactor related forms

UX/Translation changes:

- new teams: remove redundant tooltips that don't add meaningful information
  - move general information to table fieldset
- new teams: rename "general" to "custom" access for clarity
- new teams: show labels beside options on mobile

Accessibility:

- semantic form elements allow easier navigation (fieldset, mostly)
- improve better labelling of new teams table
- fix accessibility scan issues
- TODO: the parts that "disable" form elements were not yet touched and
  are not really accessible to screenreaders

Technical:

- replace two JavaScript solutions with one CSS standard
- implement a simpler grid (.simple-grid)
- simplify markup
- remove some webhook settings specific CSS

Testing:

- check more form content for accessibility issues
- but exclude tooltips from the scan :(
- reuse existing form tests from previous PR

web_src/css/form.css

@@ -12,7 +12,12 @@ fieldset label {
   display: block;
 }
 
-form fieldset label .help {
+fieldset label:has(input[type="text"]),
+fieldset label:has(input[type="number"]) {
+  font-weight: var(--font-weight-medium);
+}
+
+fieldset .help {
   font-weight: var(--font-weight-normal);
   display: block !important; /* overrides another rule in this file, remove when obsolete */
 }
@@ -23,9 +28,22 @@ fieldset input[type="radio"] {
   vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */
 }
 
-fieldset label:has(input[type="text"]),
-fieldset label:has(input[type="number"]) {
-  font-weight: var(--font-weight-medium);
+@media (min-width: 768px) {
+  .optionmatrix input[type="radio"] {
+    margin: 0;
+  }
+
+  /* center columns except first */
+  .optionmatrix td + td, .optionmatrix th + th {
+    min-width: 10em;
+    text-align: center !important; /* overrides table.css "inherit" rule */
+  }
+}
+
+/* if an element with class "hide-unless-checked" follows a label
+ * that has no checked input, it will be hidden.*/
+label:not(:has(input:checked)) + .hide-unless-checked {
+  display: none;
 }
 
 .ui.input textarea,
@@ -495,14 +513,6 @@ textarea:focus,
   min-width: 14em; /* matches the default min width */
 }
 
-.new.webhook form .help {
-  margin-left: 25px;
-}
-
-.new.webhook .events.fields .column {
-  padding-left: 40px;
-}
-
 .githook textarea {
   font-family: var(--fonts-monospace);
 }

web_src/css/modules/grid.css

@@ -1,3 +1,14 @@
+.simple-grid {
+  display: grid;
+  gap: 1em 2em;
+}
+
+@media (min-width: 30em) {
+  .simple-grid.grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 /* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
    unused rules here after refactoring, please remove them. */
 

web_src/css/repo.css

@@ -1805,16 +1805,6 @@ td .commit-summary {
   font-style: italic;
 }
 
-.repository.settings.webhook .events .column {
-  padding-bottom: 0;
-}
-
-.repository.settings.webhook .events .help {
-  font-size: 13px;
-  margin-left: 26px;
-  padding-top: 0;
-}
-
 .repository .ui.attached.isSigned.isWarning {
   border-left: 1px solid var(--color-error-border);
   border-right: 1px solid var(--color-error-border);

web_src/js/features/comp/WebHookEditor.js

@@ -1,27 +1,11 @@
 import {POST} from '../../modules/fetch.js';
-import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
+import {toggleElem} from '../../utils/dom.js';
 
 export function initCompWebHookEditor() {
   if (!document.querySelectorAll('.new.webhook').length) {
     return;
   }
 
-  for (const input of document.querySelectorAll('label.events input')) {
-    input.addEventListener('change', function () {
-      if (this.checked) {
-        showElem('.events.fields');
-      }
-    });
-  }
-
-  for (const input of document.querySelectorAll('label.non-events input')) {
-    input.addEventListener('change', function () {
-      if (this.checked) {
-        hideElem('.events.fields');
-      }
-    });
-  }
-
   // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
   const httpMethodInput = document.getElementById('http_method');
   if (httpMethodInput) {

web_src/js/features/org-team.js

@@ -1,20 +1,7 @@
 import $ from 'jquery';
-import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl} = window.config;
 
-export function initOrgTeamSettings() {
-  // Change team access mode
-  $('.organization.new.team input[name=permission]').on('change', () => {
-    const val = $('input[name=permission]:checked', '.organization.new.team').val();
-    if (val === 'admin') {
-      hideElem('.organization.new.team .team-units');
-    } else {
-      showElem('.organization.new.team .team-units');
-    }
-  });
-}
-
 export function initOrgTeamSearchRepoBox() {
   const $searchRepoBox = $('#search-repo-box');
   $searchRepoBox.search({

web_src/js/index.js

@@ -60,7 +60,7 @@ import {
   initRepoSettingSearchTeamBox,
 } from './features/repo-settings.js';
 import {initRepoDiffView} from './features/repo-diff.js';
-import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.js';
+import {initOrgTeamSearchRepoBox} from './features/org-team.js';
 import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js';
 import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js';
 import {initRepoEditor} from './features/repo-editor.js';
@@ -138,7 +138,6 @@ onDomReady(() => {
   initNotificationsTable();
 
   initOrgTeamSearchRepoBox();
-  initOrgTeamSettings();
 
   initRepoActivityTopAuthorsChart();
   initRepoArchiveLinks();