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

1 files changed, 102 insertions, 190 deletions

diff --git a/templates/webhook/shared-settings.tmpl b/templates/webhook/shared-settings.tmpl
index 6639327e46..be3a8755d4 100644
--- a/templates/webhook/shared-settings.tmpl
+++ b/templates/webhook/shared-settings.tmpl
@@ -2,247 +2,159 @@
 <div class="field">
 	<fieldset class="event type">
 		<legend>{{ctx.Locale.Tr "repo.settings.event_desc"}}</legend>
-		<label class="non-events">
+		<label>
 			<input name="events" type="radio" value="push_only" {{if or $isNew .Webhook.PushOnly}}checked{{end}}>
 			{{ctx.Locale.Tr "repo.settings.event_push_only"}}
 		</label>
-		<label class="non-events">
+		<label>
 			<input name="events" type="radio" value="send_everything" {{if .Webhook.SendEverything}}checked{{end}}>
 			{{ctx.Locale.Tr "repo.settings.event_send_everything"}}
 		</label>
-		<label class="events">
+		<label>
 			<input name="events" type="radio" value="choose_events" {{if .Webhook.ChooseEvents}}checked{{end}}>
 			{{ctx.Locale.Tr "repo.settings.event_choose"}}
 		</label>
-	</fieldset>
-
-	<div class="events fields ui grid {{if not .Webhook.ChooseEvents}}tw-hidden{{end}}">
-		<!-- Repository Events -->
-		<div class="fourteen wide column">
-			<label>{{ctx.Locale.Tr "repo.settings.event_header_repository"}}</label>
-		</div>
-		<!-- Create -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+		<fieldset class="hide-unless-checked">
+			<!-- Repository Events -->
+			<fieldset class="simple-grid grid-2">
+				<legend>{{ctx.Locale.Tr "repo.settings.event_header_repository"}}</legend>
+				<!-- Create -->
+				<label>
 					<input name="create" type="checkbox" {{if .Webhook.Create}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_create"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_create"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_create_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Delete -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Delete -->
+				<label>
 					<input name="delete" type="checkbox" {{if .Webhook.Delete}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_delete"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_delete"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_delete_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Fork -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Fork -->
+				<label>
 					<input name="fork" type="checkbox" {{if .Webhook.Fork}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_fork"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_fork"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_fork_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Push -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Push -->
+				<label>
 					<input name="push" type="checkbox" {{if .Webhook.Push}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_push"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_push"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_push_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Repository -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Repository -->
+				<label>
 					<input name="repository" type="checkbox" {{if .Webhook.Repository}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_repository"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_repository"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_repository_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Release -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Release -->
+				<label>
 					<input name="release" type="checkbox" {{if .Webhook.Release}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_release"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_release"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_release_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Package -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Package -->
+				<label>
 					<input name="package" type="checkbox" {{if .Webhook.Package}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_package"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_package"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_package_desc"}}</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- Wiki -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Wiki -->
+				<label>
 					<input name="wiki" type="checkbox" {{if .Webhook.Wiki}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_wiki"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_wiki"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_wiki_desc"}}</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- Issue Events -->
-		<div class="fourteen wide column">
-			<label>{{ctx.Locale.Tr "repo.settings.event_header_issue"}}</label>
-		</div>
-		<!-- Issues -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+			</fieldset>
+			<!-- Issue Events -->
+			<fieldset class="simple-grid grid-2">
+				<legend>{{ctx.Locale.Tr "repo.settings.event_header_issue"}}</legend>
+				<!-- Issues -->
+				<label>
 					<input name="issues" type="checkbox" {{if .Webhook.Issues}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_issues"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_issues"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_issues_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Issue Assign -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Issue Assign -->
+				<label>
 					<input name="issue_assign" type="checkbox" {{if .Webhook.IssueAssign}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_issue_assign"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_issue_assign"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_issue_assign_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Issue Label -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Issue Label -->
+				<label>
 					<input name="issue_label" type="checkbox" {{if .Webhook.IssueLabel}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_issue_label"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_issue_label"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_issue_label_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Issue Milestone -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Issue Milestone -->
+				<label>
 					<input name="issue_milestone" type="checkbox" {{if .Webhook.IssueMilestone}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_issue_milestone"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_issue_milestone"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_issue_milestone_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Issue Comment -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Issue Comment -->
+				<label>
 					<input name="issue_comment" type="checkbox" {{if .Webhook.IssueComment}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_issue_comment"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_issue_comment"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_issue_comment_desc"}}</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- Pull Request Events -->
-		<div class="fourteen wide column">
-			<label>{{ctx.Locale.Tr "repo.settings.event_header_pull_request"}}</label>
-		</div>
-		<!-- Pull Request -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+			</fieldset>
+			<!-- Pull Request Events -->
+			<fieldset class="simple-grid grid-2">
+				<legend>{{ctx.Locale.Tr "repo.settings.event_header_pull_request"}}</legend>
+				<!-- Pull Request -->
+				<label>
 					<input name="pull_request" type="checkbox" {{if .Webhook.PullRequest}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Assign -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Assign -->
+				<label>
 					<input name="pull_request_assign" type="checkbox" {{if .Webhook.PullRequestAssign}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_assign"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_assign"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_assign_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Label -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Label -->
+				<label>
 					<input name="pull_request_label" type="checkbox" {{if .Webhook.PullRequestLabel}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_label"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_label"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_label_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Milestone -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Milestone -->
+				<label>
 					<input name="pull_request_milestone" type="checkbox" {{if .Webhook.PullRequestMilestone}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_milestone"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_milestone"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_milestone_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Comment -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Comment -->
+				<label>
 					<input name="pull_request_comment" type="checkbox" {{if .Webhook.PullRequestComment}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_comment"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_comment"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_comment_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Review -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Review -->
+				<label>
 					<input name="pull_request_review" type="checkbox" {{if .Webhook.PullRequestReview}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_review"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_review"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_review_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Sync -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Sync -->
+				<label>
 					<input name="pull_request_sync" type="checkbox" {{if .Webhook.PullRequestSync}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_sync"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_sync"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_sync_desc"}}</span>
-				</div>
-			</div>
-		</div>
-		<!-- Pull Request Review Request -->
-		<div class="seven wide column">
-			<div class="field">
-				<div class="ui checkbox">
+				</label>
+				<!-- Pull Request Review Request -->
+				<label>
 					<input name="pull_request_review_request" type="checkbox" {{if .Webhook.PullRequestReviewRequest}}checked{{end}}>
-					<label>{{ctx.Locale.Tr "repo.settings.event_pull_request_review_request"}}</label>
+					{{ctx.Locale.Tr "repo.settings.event_pull_request_review_request"}}
 					<span class="help">{{ctx.Locale.Tr "repo.settings.event_pull_request_review_request_desc"}}</span>
-				</div>
-			</div>
-		</div>
-	</div>
+				</label>
+			</fieldset>
+		</fieldset>
+	</fieldset>
 </div>
 
 <!-- Branch filter -->