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

options/locale/locale_en-US.ini

@@ -2861,13 +2861,11 @@ teams.leave.detail = Are you sure you want to leave team "%s"?
 teams.can_create_org_repo = Create repositories
 teams.can_create_org_repo_helper = Members can create new repositories in organization. Creator will get administrator access to the new repository.
 teams.none_access = No access
-teams.none_access_helper = Members cannot view or do any other action on this unit. It has no effect for public repositories.
-teams.general_access = General access
+teams.none_access_helper =  The "no access" option only has effect on private repositories.
+teams.general_access = Custom access
 teams.general_access_helper = Members permissions will be decided by below permission table.
 teams.read_access = Read
-teams.read_access_helper = Members can view and clone team repositories.
 teams.write_access = Write
-teams.write_access_helper = Members can read and push to team repositories.
 teams.admin_access = Administrator access
 teams.admin_access_helper = Members can pull and push to team repositories and add collaborators to them.
 teams.no_desc = This team has no description

templates/org/team/new.tmpl

@@ -56,58 +56,65 @@
 									{{ctx.Locale.Tr "org.teams.general_access"}}
 									<span class="help">{{ctx.Locale.Tr "org.teams.general_access_helper"}}</span>
 								</label>
-							</fieldset>
-
-							<div class="team-units required field {{if eq .Team.AccessMode 3}}tw-hidden{{end}}">
-								<label>{{ctx.Locale.Tr "org.team_unit_desc"}}</label>
-								<table class="ui celled table">
-									<thead>
-										<tr>
-											<th>{{ctx.Locale.Tr "units.unit"}}</th>
-											<th class="center aligned">{{ctx.Locale.Tr "org.teams.none_access"}}
-											<span class="tw-align-middle" data-tooltip-content="{{ctx.Locale.Tr "org.teams.none_access_helper"}}">{{svg "octicon-question" 16 "tw-ml-1"}}</span></th>
-											<th class="center aligned">{{ctx.Locale.Tr "org.teams.read_access"}}
-											<span class="tw-align-middle" data-tooltip-content="{{ctx.Locale.Tr "org.teams.read_access_helper"}}">{{svg "octicon-question" 16 "tw-ml-1"}}</span></th>
-											<th class="center aligned">{{ctx.Locale.Tr "org.teams.write_access"}}
-											<span class="tw-align-middle" data-tooltip-content="{{ctx.Locale.Tr "org.teams.write_access_helper"}}">{{svg "octicon-question" 16 "tw-ml-1"}}</span></th>
-										</tr>
-									</thead>
-									<tbody>
-										{{range $t, $unit := $.Units}}
-											{{if ge $unit.MaxPerm 2}}
-												<tr>
-													<td>
-														<label {{if $unit.Type.UnitGlobalDisabled}} data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
-															{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
-															<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
-														</label>
-													</td>
-													<td class="center aligned">
-														<input type="radio" name="unit_{{$unit.Type.Value}}" value="0"{{if or ($unit.Type.UnitGlobalDisabled) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 0)}} checked{{end}} title="{{ctx.Locale.Tr "org.teams.none_access"}}">
-													</td>
-													<td class="center aligned">
-														<input type="radio" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{ctx.Locale.Tr "org.teams.read_access"}}">
-													</td>
-													<td class="center aligned">
-														<input type="radio" name="unit_{{$unit.Type.Value}}" value="2"{{if (ge ($.Team.UnitAccessMode $.Context $unit.Type) 2)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{ctx.Locale.Tr "org.teams.write_access"}}">
-													</td>
-												</tr>
+								<fieldset class="hide-unless-checked">
+									<legend>{{ctx.Locale.Tr "org.team_unit_desc"}}
+										<span class="help">{{ctx.Locale.Tr "org.teams.none_access_helper"}}</span>
+									</legend>
+									<table class="ui table optionmatrix">
+										<thead>
+											<tr>
+												<th>{{ctx.Locale.Tr "units.unit"}}</th>
+												<th id="access_none">{{ctx.Locale.Tr "org.teams.none_access"}}</th>
+												<th id="access_read">{{ctx.Locale.Tr "org.teams.read_access"}}</th>
+												<th id="access_write">{{ctx.Locale.Tr "org.teams.write_access"}}</th>
+											</tr>
+										</thead>
+										<tbody>
+											{{range $t, $unit := $.Units}}
+												{{if ge $unit.MaxPerm 2}}
+													<tr>
+														<td>
+															<label {{if $unit.Type.UnitGlobalDisabled}} data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
+																{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
+																<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
+															</label>
+														</td>
+														<td>
+															<label>
+																<input aria-labelledby="access_none" type="radio" name="unit_{{$unit.Type.Value}}" value="0"{{if or ($unit.Type.UnitGlobalDisabled) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 0)}} checked{{end}}>
+																<span class="only-mobile">{{ctx.Locale.Tr "org.teams.none_access"}}</span>
+															</label>
+														</td>
+														<td>
+															<label>
+																<input aria-labelledby="access_read" type="radio" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>
+																<span class="only-mobile">{{ctx.Locale.Tr "org.teams.read_access"}}</span>
+															</label>
+														</td>
+														<td>
+															<label>
+																<input aria-labelledby="access_write" type="radio" name="unit_{{$unit.Type.Value}}" value="2"{{if (ge ($.Team.UnitAccessMode $.Context $unit.Type) 2)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>
+																<span class="only-mobile">{{ctx.Locale.Tr "org.teams.write_access"}}</span>
+															</label>
+														</td>
+													</tr>
+												{{end}}
 											{{end}}
+										</tbody>
+									</table>
+									<fieldset>
+									{{range $t, $unit := $.Units}}
+										{{if lt $unit.MaxPerm 2}}
+											<label {{if $unit.Type.UnitGlobalDisabled}}data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
+												<input type="checkbox" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>
+													{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
+												<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
+											</label>
 										{{end}}
-									</tbody>
-								</table>
-								<fieldset>
-								{{range $t, $unit := $.Units}}
-									{{if lt $unit.MaxPerm 2}}
-										<label {{if $unit.Type.UnitGlobalDisabled}}data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
-											<input type="checkbox" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>
-												{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
-											<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
-										</label>
 									{{end}}
-								{{end}}
+									</fieldset>
 								</fieldset>
-							</div>
+							</fieldset>
 						{{end}}
 
 						<div class="field">

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 -->

tests/e2e/org-settings.test.e2e.js

@@ -14,12 +14,11 @@ test('org team settings', async ({browser}, workerInfo) => {
   await expect(response?.status()).toBe(200);
 
   await page.locator('input[name="permission"][value="admin"]').click();
-  await expect(page.locator('.team-units')).toBeHidden();
-
-  // we are validating the form here, because the now hidden part has accessibility issues anyway
-  // this should be moved up or down once they are fixed.
-  await validate_form({page});
+  await expect(page.locator('.hide-unless-checked')).toBeHidden();
 
   await page.locator('input[name="permission"][value="read"]').click();
-  await expect(page.locator('.team-units')).toBeVisible();
+  await expect(page.locator('.hide-unless-checked')).toBeVisible();
+
+  // we are validating the form here to include the part that could be hidden
+  await validate_form({page});
 });

tests/e2e/repo-settings.test.e2e.js

@@ -14,16 +14,15 @@ test('repo webhook settings', async ({browser}, workerInfo) => {
   await expect(response?.status()).toBe(200);
 
   await page.locator('input[name="events"][value="choose_events"]').click();
-  await expect(page.locator('.events.fields')).toBeVisible();
+  await expect(page.locator('.hide-unless-checked')).toBeVisible();
+
+  // check accessibility including the custom events (now visible) part
+  await validate_form({page}, 'fieldset');
 
   await page.locator('input[name="events"][value="push_only"]').click();
-  await expect(page.locator('.events.fields')).toBeHidden();
+  await expect(page.locator('.hide-unless-checked')).toBeHidden();
   await page.locator('input[name="events"][value="send_everything"]').click();
-  await expect(page.locator('.events.fields')).toBeHidden();
-
-  // restrict to improved semantic HTML, the rest of the page fails the accessibility check
-  // only execute when the ugly part is hidden - would benefit from refactoring, too
-  await validate_form({page}, 'fieldset');
+  await expect(page.locator('.hide-unless-checked')).toBeHidden();
 });
 
 test('repo branch protection settings', async ({browser}, workerInfo) => {

tests/e2e/shared/forms.js

@@ -3,7 +3,11 @@ import AxeBuilder from '@axe-core/playwright';
 
 export async function validate_form({page}, scope) {
   scope ??= 'form';
-  const accessibilityScanResults = await new AxeBuilder({page}).include(scope).analyze();
+  const accessibilityScanResults = await new AxeBuilder({page})
+    .include(scope)
+    // exclude automated tooltips from accessibility scan, remove when fixed
+    .exclude('span[data-tooltip-content')
+    .analyze();
   expect(accessibilityScanResults.violations).toEqual([]);
 
   // assert CSS properties that needed to be overriden for forms (ensure they remain active)

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();