loading up the forgejo repo on tangled to test page performance
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
+210
-310
+2
-4
options/locale/locale_en-US.ini
+2
-4
options/locale/locale_en-US.ini
···
2861
2861
teams.can_create_org_repo = Create repositories
2862
2862
teams.can_create_org_repo_helper = Members can create new repositories in organization. Creator will get administrator access to the new repository.
2863
2863
teams.none_access = No access
2864
-
teams.none_access_helper = Members cannot view or do any other action on this unit. It has no effect for public repositories.
2865
-
teams.general_access = General access
2864
+
teams.none_access_helper = The "no access" option only has effect on private repositories.
2865
+
teams.general_access = Custom access
2866
2866
teams.general_access_helper = Members permissions will be decided by below permission table.
2867
2867
teams.read_access = Read
2868
-
teams.read_access_helper = Members can view and clone team repositories.
2869
2868
teams.write_access = Write
2870
-
teams.write_access_helper = Members can read and push to team repositories.
2871
2869
teams.admin_access = Administrator access
2872
2870
teams.admin_access_helper = Members can pull and push to team repositories and add collaborators to them.
2873
2871
teams.no_desc = This team has no description
+55
-48
templates/org/team/new.tmpl
+55
-48
templates/org/team/new.tmpl
···
56
56
{{ctx.Locale.Tr "org.teams.general_access"}}
57
57
<span class="help">{{ctx.Locale.Tr "org.teams.general_access_helper"}}</span>
58
58
</label>
59
-
</fieldset>
60
-
61
-
<div class="team-units required field {{if eq .Team.AccessMode 3}}tw-hidden{{end}}">
62
-
<label>{{ctx.Locale.Tr "org.team_unit_desc"}}</label>
63
-
<table class="ui celled table">
64
-
<thead>
65
-
<tr>
66
-
<th>{{ctx.Locale.Tr "units.unit"}}</th>
67
-
<th class="center aligned">{{ctx.Locale.Tr "org.teams.none_access"}}
68
-
<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>
69
-
<th class="center aligned">{{ctx.Locale.Tr "org.teams.read_access"}}
70
-
<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>
71
-
<th class="center aligned">{{ctx.Locale.Tr "org.teams.write_access"}}
72
-
<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>
73
-
</tr>
74
-
</thead>
75
-
<tbody>
76
-
{{range $t, $unit := $.Units}}
77
-
{{if ge $unit.MaxPerm 2}}
78
-
<tr>
79
-
<td>
80
-
<label {{if $unit.Type.UnitGlobalDisabled}} data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
81
-
{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
82
-
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
83
-
</label>
84
-
</td>
85
-
<td class="center aligned">
86
-
<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"}}">
87
-
</td>
88
-
<td class="center aligned">
89
-
<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"}}">
90
-
</td>
91
-
<td class="center aligned">
92
-
<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"}}">
93
-
</td>
94
-
</tr>
59
+
<fieldset class="hide-unless-checked">
60
+
<legend>{{ctx.Locale.Tr "org.team_unit_desc"}}
61
+
<span class="help">{{ctx.Locale.Tr "org.teams.none_access_helper"}}</span>
62
+
</legend>
63
+
<table class="ui table optionmatrix">
64
+
<thead>
65
+
<tr>
66
+
<th>{{ctx.Locale.Tr "units.unit"}}</th>
67
+
<th id="access_none">{{ctx.Locale.Tr "org.teams.none_access"}}</th>
68
+
<th id="access_read">{{ctx.Locale.Tr "org.teams.read_access"}}</th>
69
+
<th id="access_write">{{ctx.Locale.Tr "org.teams.write_access"}}</th>
70
+
</tr>
71
+
</thead>
72
+
<tbody>
73
+
{{range $t, $unit := $.Units}}
74
+
{{if ge $unit.MaxPerm 2}}
75
+
<tr>
76
+
<td>
77
+
<label {{if $unit.Type.UnitGlobalDisabled}} data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
78
+
{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
79
+
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
80
+
</label>
81
+
</td>
82
+
<td>
83
+
<label>
84
+
<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}}>
85
+
<span class="only-mobile">{{ctx.Locale.Tr "org.teams.none_access"}}</span>
86
+
</label>
87
+
</td>
88
+
<td>
89
+
<label>
90
+
<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}}>
91
+
<span class="only-mobile">{{ctx.Locale.Tr "org.teams.read_access"}}</span>
92
+
</label>
93
+
</td>
94
+
<td>
95
+
<label>
96
+
<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}}>
97
+
<span class="only-mobile">{{ctx.Locale.Tr "org.teams.write_access"}}</span>
98
+
</label>
99
+
</td>
100
+
</tr>
101
+
{{end}}
95
102
{{end}}
103
+
</tbody>
104
+
</table>
105
+
<fieldset>
106
+
{{range $t, $unit := $.Units}}
107
+
{{if lt $unit.MaxPerm 2}}
108
+
<label {{if $unit.Type.UnitGlobalDisabled}}data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
109
+
<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}}>
110
+
{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
111
+
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
112
+
</label>
96
113
{{end}}
97
-
</tbody>
98
-
</table>
99
-
<fieldset>
100
-
{{range $t, $unit := $.Units}}
101
-
{{if lt $unit.MaxPerm 2}}
102
-
<label {{if $unit.Type.UnitGlobalDisabled}}data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
103
-
<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}}>
104
-
{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
105
-
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
106
-
</label>
107
114
{{end}}
108
-
{{end}}
115
+
</fieldset>
109
116
</fieldset>
110
-
</div>
117
+
</fieldset>
111
118
{{end}}
112
119
113
120
<div class="field">
+5
-6
tests/e2e/org-settings.test.e2e.js
+5
-6
tests/e2e/org-settings.test.e2e.js
···
14
14
await expect(response?.status()).toBe(200);
15
15
16
16
await page.locator('input[name="permission"][value="admin"]').click();
17
-
await expect(page.locator('.team-units')).toBeHidden();
17
+
await expect(page.locator('.hide-unless-checked')).toBeHidden();
18
18
19
-
// we are validating the form here, because the now hidden part has accessibility issues anyway
20
-
// this should be moved up or down once they are fixed.
19
+
await page.locator('input[name="permission"][value="read"]').click();
20
+
await expect(page.locator('.hide-unless-checked')).toBeVisible();
21
+
22
+
// we are validating the form here to include the part that could be hidden
21
23
await validate_form({page});
22
-
23
-
await page.locator('input[name="permission"][value="read"]').click();
24
-
await expect(page.locator('.team-units')).toBeVisible();
25
24
});
+6
-7
tests/e2e/repo-settings.test.e2e.js
+6
-7
tests/e2e/repo-settings.test.e2e.js
···
14
14
await expect(response?.status()).toBe(200);
15
15
16
16
await page.locator('input[name="events"][value="choose_events"]').click();
17
-
await expect(page.locator('.events.fields')).toBeVisible();
17
+
await expect(page.locator('.hide-unless-checked')).toBeVisible();
18
+
19
+
// check accessibility including the custom events (now visible) part
20
+
await validate_form({page}, 'fieldset');
18
21
19
22
await page.locator('input[name="events"][value="push_only"]').click();
20
-
await expect(page.locator('.events.fields')).toBeHidden();
23
+
await expect(page.locator('.hide-unless-checked')).toBeHidden();
21
24
await page.locator('input[name="events"][value="send_everything"]').click();
22
-
await expect(page.locator('.events.fields')).toBeHidden();
23
-
24
-
// restrict to improved semantic HTML, the rest of the page fails the accessibility check
25
-
// only execute when the ugly part is hidden - would benefit from refactoring, too
26
-
await validate_form({page}, 'fieldset');
25
+
await expect(page.locator('.hide-unless-checked')).toBeHidden();
27
26
});
28
27
29
28
test('repo branch protection settings', async ({browser}, workerInfo) => {
+22
-12
web_src/css/form.css
+22
-12
web_src/css/form.css
···
12
12
display: block;
13
13
}
14
14
15
-
form fieldset label .help {
15
+
fieldset label:has(input[type="text"]),
16
+
fieldset label:has(input[type="number"]) {
17
+
font-weight: var(--font-weight-medium);
18
+
}
19
+
20
+
fieldset .help {
16
21
font-weight: var(--font-weight-normal);
17
22
display: block !important; /* overrides another rule in this file, remove when obsolete */
18
23
}
···
23
28
vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */
24
29
}
25
30
26
-
fieldset label:has(input[type="text"]),
27
-
fieldset label:has(input[type="number"]) {
28
-
font-weight: var(--font-weight-medium);
31
+
@media (min-width: 768px) {
32
+
.optionmatrix input[type="radio"] {
33
+
margin: 0;
34
+
}
35
+
36
+
/* center columns except first */
37
+
.optionmatrix td + td, .optionmatrix th + th {
38
+
min-width: 10em;
39
+
text-align: center !important; /* overrides table.css "inherit" rule */
40
+
}
41
+
}
42
+
43
+
/* if an element with class "hide-unless-checked" follows a label
44
+
* that has no checked input, it will be hidden.*/
45
+
label:not(:has(input:checked)) + .hide-unless-checked {
46
+
display: none;
29
47
}
30
48
31
49
.ui.input textarea,
···
493
511
494
512
.ui.form .field > .selection.dropdown {
495
513
min-width: 14em; /* matches the default min width */
496
-
}
497
-
498
-
.new.webhook form .help {
499
-
margin-left: 25px;
500
-
}
501
-
502
-
.new.webhook .events.fields .column {
503
-
padding-left: 40px;
504
514
}
505
515
506
516
.githook textarea {
+11
web_src/css/modules/grid.css
+11
web_src/css/modules/grid.css
···
1
+
.simple-grid {
2
+
display: grid;
3
+
gap: 1em 2em;
4
+
}
5
+
6
+
@media (min-width: 30em) {
7
+
.simple-grid.grid-2 {
8
+
grid-template-columns: repeat(2, 1fr);
9
+
}
10
+
}
11
+
1
12
/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
2
13
unused rules here after refactoring, please remove them. */
3
14
-10
web_src/css/repo.css
-10
web_src/css/repo.css
···
1805
1805
font-style: italic;
1806
1806
}
1807
1807
1808
-
.repository.settings.webhook .events .column {
1809
-
padding-bottom: 0;
1810
-
}
1811
-
1812
-
.repository.settings.webhook .events .help {
1813
-
font-size: 13px;
1814
-
margin-left: 26px;
1815
-
padding-top: 0;
1816
-
}
1817
-
1818
1808
.repository .ui.attached.isSigned.isWarning {
1819
1809
border-left: 1px solid var(--color-error-border);
1820
1810
border-right: 1px solid var(--color-error-border);
+1
-17
web_src/js/features/comp/WebHookEditor.js
+1
-17
web_src/js/features/comp/WebHookEditor.js
···
1
1
import {POST} from '../../modules/fetch.js';
2
-
import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
2
+
import {toggleElem} from '../../utils/dom.js';
3
3
4
4
export function initCompWebHookEditor() {
5
5
if (!document.querySelectorAll('.new.webhook').length) {
6
6
return;
7
-
}
8
-
9
-
for (const input of document.querySelectorAll('label.events input')) {
10
-
input.addEventListener('change', function () {
11
-
if (this.checked) {
12
-
showElem('.events.fields');
13
-
}
14
-
});
15
-
}
16
-
17
-
for (const input of document.querySelectorAll('label.non-events input')) {
18
-
input.addEventListener('change', function () {
19
-
if (this.checked) {
20
-
hideElem('.events.fields');
21
-
}
22
-
});
23
7
}
24
8
25
9
// some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
-13
web_src/js/features/org-team.js
-13
web_src/js/features/org-team.js
···
1
1
import $ from 'jquery';
2
-
import {hideElem, showElem} from '../utils/dom.js';
3
2
4
3
const {appSubUrl} = window.config;
5
-
6
-
export function initOrgTeamSettings() {
7
-
// Change team access mode
8
-
$('.organization.new.team input[name=permission]').on('change', () => {
9
-
const val = $('input[name=permission]:checked', '.organization.new.team').val();
10
-
if (val === 'admin') {
11
-
hideElem('.organization.new.team .team-units');
12
-
} else {
13
-
showElem('.organization.new.team .team-units');
14
-
}
15
-
});
16
-
}
17
4
18
5
export function initOrgTeamSearchRepoBox() {
19
6
const $searchRepoBox = $('#search-repo-box');
+1
-2
web_src/js/index.js
+1
-2
web_src/js/index.js
···
60
60
initRepoSettingSearchTeamBox,
61
61
} from './features/repo-settings.js';
62
62
import {initRepoDiffView} from './features/repo-diff.js';
63
-
import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.js';
63
+
import {initOrgTeamSearchRepoBox} from './features/org-team.js';
64
64
import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js';
65
65
import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js';
66
66
import {initRepoEditor} from './features/repo-editor.js';
···
138
138
initNotificationsTable();
139
139
140
140
initOrgTeamSearchRepoBox();
141
-
initOrgTeamSettings();
142
141
143
142
initRepoActivityTopAuthorsChart();
144
143
initRepoArchiveLinks();