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
This commit is contained in:
Otto Richter 2024-08-19 23:35:37 +02:00
parent c20c534b90
commit 83d2b3b7fa
12 changed files with 210 additions and 310 deletions

View file

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

View file

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