Skip to content

Commit 81fe5d6

Browse files
delvhwxiaoguangsilverwindtechknowlogicklunny
authored
Convert <div class="button"> to <button class="button"> (#23337)
This improves a lot of accessibility shortcomings. Every possible instance of `<div class="button">` matching the command `ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'` has been converted when possible. divs with the `dropdown` class and their children were omitted as 1. more analysis must be conducted whether the dropdowns still work as intended when they are a `button` instead of a `div`. 2. most dropdowns have `div`s as children. The HTML standard disallows `div`s inside `button`s. 3. When a dropdown child that's part of the displayed text content is converted to a `button`, the dropdown can be focused twice Further changes include that all "gitea-managed" buttons with JS code received an `e.preventDefault()` so that they don't accidentally submit an underlying form, which would execute instead of cancel the action. Lastly, some minor issues were fixed as well during the refactoring. ## Future improvements As mentioned in #23337 (comment), `<a>`s without `href` attribute are not focusable. They should later on be converted to `<button>`s. --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: silverwind <[email protected]> Co-authored-by: techknowlogick <[email protected]> Co-authored-by: Lunny Xiao <[email protected]>
1 parent 605fd15 commit 81fe5d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+173
-283
lines changed

‎public/img/svg/fontawesome-save.svg

+1
Loading

‎templates/admin/auth/edit.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@
433433

434434
<div class="field">
435435
<button class="ui green button">{{.locale.Tr "admin.auths.update"}}</button>
436-
<div class="ui red button delete-button" data-url="{{$.Link}}/delete" data-id="{{.Source.ID}}">{{.locale.Tr "admin.auths.delete"}}</div>
436+
<button class="ui red button delete-button" data-url="{{$.Link}}/delete" data-id="{{.Source.ID}}">{{.locale.Tr "admin.auths.delete"}}</button>
437437
</div>
438438
</form>
439439
</div>

‎templates/admin/emails/list.tmpl

+3-5
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
{{.locale.Tr "admin.emails.change_email_header"}}
7979
</div>
8080
<div class="content center">
81-
<p>{{.locale.Tr "admin.emails.change_email_text"}}</p>
81+
<p class="center">{{.locale.Tr "admin.emails.change_email_text"}}</p>
8282

8383
<form class="ui form" id="email-action-form" action="{{AppSubUrl}}/admin/emails/activate" method="post">
8484
{{$.CsrfTokenHtml}}
@@ -93,11 +93,9 @@
9393
<input type="hidden" id="form-primary" name="primary" value="" required>
9494
<input type="hidden" id="form-activate" name="activate" value="" required>
9595

96-
<div class="center actions">
97-
<div class="ui basic cancel inverted button">{{$.locale.Tr "settings.cancel"}}</div>
98-
<button class="ui basic inverted yellow button">{{$.locale.Tr "modal.yes"}}</button>
96+
<div class="center">
97+
{{template "base/delete_modal_actions" .}}
9998
</div>
100-
10199
</form>
102100
</div>
103101
</div>

‎templates/admin/notice.tmpl

+8-10
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<tr>
2424
<td class="collapsing">
2525
<div class="ui fitted checkbox" data-id="{{.ID}}">
26-
<input type="checkbox"> <label></label>
26+
<input type="checkbox">
2727
</div>
2828
</td>
2929
<td>{{.ID}}</td>
@@ -39,13 +39,11 @@
3939
<tr>
4040
<th></th>
4141
<th colspan="5">
42-
<div class="ui right">
43-
<form method="post" action="{{AppSubUrl}}/admin/notices/empty">
44-
{{.CsrfTokenHtml}}
45-
<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
46-
</form>
47-
</div>
48-
<div class="ui floating upward dropdown small button">
42+
<form class="ui right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
43+
{{.CsrfTokenHtml}}
44+
<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
45+
</form>
46+
<div class="ui floating upward dropdown small button">{{/* TODO: Make this dropdown accessible */}}
4947
<span class="text">{{.locale.Tr "admin.notices.operations"}}</span>
5048
<div class="menu">
5149
<div class="item select action" data-action="select-all">
@@ -59,9 +57,9 @@
5957
</div>
6058
</div>
6159
</div>
62-
<div class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="{{.Link}}?page={{.Page.Paginater.Current}}">
60+
<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="{{.Link}}?page={{.Page.Paginater.Current}}">
6361
{{.locale.Tr "admin.notices.delete_selected"}}
64-
</div>
62+
</button>
6563
</th>
6664
</tr>
6765
</tfoot>

‎templates/admin/repo/unadopted.tmpl

+2-20
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,7 @@
4343
<input type="hidden" name="action" value="adopt">
4444
<input type="hidden" name="q" value="{{$.Keyword}}">
4545
<input type="hidden" name="page" value="{{$.CurrentPage}}">
46-
<div class="actions">
47-
<div class="ui red basic inverted cancel button">
48-
{{svg "octicon-trash" 16 "gt-mr-2"}}
49-
{{$.locale.Tr "modal.no"}}
50-
</div>
51-
<button class="ui green basic inverted ok button">
52-
{{svg "octicon-check" 16 "gt-mr-2"}}
53-
{{$.locale.Tr "modal.yes"}}
54-
</button>
55-
</div>
46+
{{template "base/delete_modal_actions" .}}
5647
</form>
5748
</div>
5849
<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
@@ -70,16 +61,7 @@
7061
<input type="hidden" name="action" value="delete">
7162
<input type="hidden" name="q" value="{{$.Keyword}}">
7263
<input type="hidden" name="page" value="{{$.CurrentPage}}">
73-
<div class="actions">
74-
<div class="ui red basic inverted cancel button">
75-
{{svg "octicon-trash" 16 "gt-mr-2"}}
76-
{{$.locale.Tr "modal.no"}}
77-
</div>
78-
<button class="ui green basic inverted ok button">
79-
{{svg "octicon-check" 16 "gt-mr-2"}}
80-
{{$.locale.Tr "modal.yes"}}
81-
</button>
82-
</div>
64+
{{template "base/delete_modal_actions" .}}
8365
</form>
8466
</div>
8567
</div>

‎templates/admin/user/edit.tmpl

+3-12
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@
151151

152152
<div class="field">
153153
<button class="ui green button">{{.locale.Tr "admin.users.update_profile"}}</button>
154-
<div class="ui red button show-modal" data-modal="#delete-user-modal">{{.locale.Tr "admin.users.delete_account"}}</div>
154+
<button class="ui red button show-modal" data-modal="#delete-user-modal">{{.locale.Tr "admin.users.delete_account"}}</button>
155155
</div>
156156
</form>
157157
</div>
@@ -189,7 +189,7 @@
189189

190190
<div class="field">
191191
<button class="ui green button">{{$.locale.Tr "settings.update_avatar"}}</button>
192-
<a class="ui red button delete-post" data-request-url="{{.Link}}/avatar/delete" data-done-url="{{.Link}}">{{$.locale.Tr "settings.delete_current_avatar"}}</a>
192+
<a class="ui red button delete-post" data-request-url="{{.Link}}/avatar/delete" data-done-url="{{.Link}}">{{$.locale.Tr "settings.delete_current_avatar"}}</a>{{/* TODO: Convert links without href to buttons for a11y */}}
193193
</div>
194194
</form>
195195
</div>
@@ -213,16 +213,7 @@
213213
</div>
214214
<p class="help">{{.locale.Tr "admin.users.purge_help"}}</p>
215215
</div>
216-
<div class="actions">
217-
<div class="ui red basic inverted cancel button">
218-
{{svg "octicon-x"}}
219-
{{.locale.Tr "modal.no"}}
220-
</div>
221-
<button class="ui green basic inverted ok button">
222-
{{svg "octicon-check"}}
223-
{{.locale.Tr "modal.yes"}}
224-
</button>
225-
</div>
216+
{{template "base/delete_modal_actions" .}}
226217
</form>
227218
</div>
228219
{{template "base/footer" .}}

‎templates/base/delete_modal_actions.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="actions">
2-
<div class="ui red basic inverted cancel button">
2+
<button class="ui red basic inverted cancel button">
33
{{svg "octicon-x"}}
44
{{.locale.Tr "modal.no"}}
5-
</div>
6-
<div class="ui green basic inverted ok button">
5+
</button>
6+
<button class="ui green basic inverted ok button">
77
{{svg "octicon-check"}}
88
{{.locale.Tr "modal.yes"}}
9-
</div>
9+
</button>
1010
</div>

‎templates/org/settings/delete.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
<label for="org_name">{{.locale.Tr "org.org_name_holder"}}</label>
2020
<input id="org_name" name="org_name" value="" autocomplete="off" autofocus required>
2121
</div>
22-
<div class="ui red button delete-button" data-type="form" data-form="#delete-form">
22+
<button class="ui red button delete-button" data-type="form" data-form="#delete-form">
2323
{{.locale.Tr "org.settings.confirm_delete_account"}}
24-
</div>
24+
</button>
2525
</form>
2626
</div>
2727
</div>

‎templates/org/settings/labels.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</div>
1212
<div class="right floated three wide column">
1313
<div class="ui right">
14-
<div class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</div>
14+
<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
1515
</div>
1616
</div>
1717
</div>

‎templates/package/settings.tmpl

+1-4
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,7 @@
5757
<form class="ui form" action="{{.Link}}" method="post">
5858
{{.CsrfTokenHtml}}
5959
<input type="hidden" name="action" value="delete">
60-
<div class="text right actions">
61-
<div class="ui cancel button">{{.locale.Tr "cancel"}}</div>
62-
<button class="ui red button">{{.locale.Tr "ok"}}</button>
63-
</div>
60+
{{template "base/delete_modal_actions" .}}
6461
</form>
6562
</div>
6663
</div>

‎templates/projects/list.tmpl

+1-10
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,6 @@
8484
<div class="content">
8585
<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p>
8686
</div>
87-
<div class="actions">
88-
<div class="ui red basic inverted cancel button">
89-
<i class="remove icon"></i>
90-
{{.locale.Tr "modal.no"}}
91-
</div>
92-
<div class="ui green basic inverted ok button">
93-
<i class="checkmark icon"></i>
94-
{{.locale.Tr "modal.yes"}}
95-
</div>
96-
</div>
87+
{{template "base/delete_modal_actions" .}}
9788
</div>
9889
{{end}}

‎templates/projects/view.tmpl

+6-15
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</div>
3030

3131
<div class="text right actions">
32-
<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
32+
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
3333
<button data-url="{{$.Link}}" class="ui primary button" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
3434
</div>
3535
</form>
@@ -127,7 +127,7 @@
127127
</div>
128128

129129
<div class="text right actions">
130-
<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
130+
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
131131
<button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
132132
</div>
133133
</form>
@@ -144,7 +144,7 @@
144144
</label>
145145
</div>
146146
<div class="text right actions">
147-
<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
147+
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
148148
<button class="ui primary button set-default-project-board" data-url="{{$.Link}}/{{.ID}}/default">{{$.locale.Tr "repo.projects.column.set_default"}}</button>
149149
</div>
150150
</div>
@@ -158,8 +158,8 @@
158158
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
159159
</label>
160160
</div>
161-
<div class="text right actions">
162-
<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
161+
<div class="text right actions">{{/* TODO: convert to base/delete_modal_actions.tmpl */}}
162+
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
163163
<button class="ui red button delete-project-board" data-url="{{$.Link}}/{{.ID}}">{{$.locale.Tr "repo.projects.column.delete"}}</button>
164164
</div>
165165
</div>
@@ -265,15 +265,6 @@
265265
<div class="content">
266266
<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p>
267267
</div>
268-
<div class="actions">
269-
<div class="ui red basic inverted cancel button">
270-
<i class="remove icon"></i>
271-
{{.locale.Tr "modal.no"}}
272-
</div>
273-
<div class="ui green basic inverted ok button">
274-
<i class="checkmark icon"></i>
275-
{{.locale.Tr "modal.yes"}}
276-
</div>
277-
</div>
268+
{{template "base/delete_modal_actions" .}}
278269
</div>
279270
{{end}}

‎templates/repo/branch/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@
176176
</div>
177177

178178
<div class="text right actions">
179-
<div class="ui cancel button">{{.locale.Tr "settings.cancel"}}</div>
179+
<button class="ui cancel button">{{.locale.Tr "settings.cancel"}}</button>
180180
<button class="ui green button">{{.locale.Tr "repo.branch.confirm_create_branch"}}</button>
181181
</div>
182182
</form>

‎templates/repo/cite/cite_modal.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
</div>
1616
</div>
1717
<div class="actions">
18-
<div class="ui black deny button">
18+
<button class="ui black cancel button">
1919
{{.locale.Tr "cancel"}}
20-
</div>
20+
</button>
2121
</div>
2222
</div>

‎templates/repo/commit_page.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
</div>
9797

9898
<div class="text right actions">
99-
<div class="ui cancel button">{{.locale.Tr "settings.cancel"}}</div>
99+
<button class="ui cancel button">{{.locale.Tr "settings.cancel"}}</button>
100100
<button class="ui green button">{{.locale.Tr "repo.branch.confirm_create_branch"}}</button>
101101
</div>
102102
</form>
@@ -121,7 +121,7 @@
121121
</div>
122122

123123
<div class="text right actions">
124-
<div class="ui cancel button">{{.locale.Tr "settings.cancel"}}</div>
124+
<button class="ui cancel button">{{.locale.Tr "settings.cancel"}}</button>
125125
<button class="ui green button">{{.locale.Tr "repo.tag.confirm_create_tag"}}</button>
126126
</div>
127127
</form>

‎templates/repo/diff/box.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,8 @@
107107
<div class="diff-file-header-actions gt-df gt-ac">
108108
{{if $showFileViewToggle}}
109109
<div class="ui compact icon buttons">
110-
<span class="ui tiny basic button tooltip file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_source"}}" data-position="bottom center">{{svg "octicon-code"}}</span>
111-
<span class="ui tiny basic button tooltip file-view-toggle active" data-toggle-selector="#diff-rendered-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_rendered"}}" data-position="bottom center">{{svg "octicon-file"}}</span>
110+
<button class="ui tiny basic button tooltip file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_source"}}" data-position="bottom center">{{svg "octicon-code"}}</button>
111+
<button class="ui tiny basic button tooltip file-view-toggle active" data-toggle-selector="#diff-rendered-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_rendered"}}" data-position="bottom center">{{svg "octicon-file"}}</button>
112112
</div>
113113
{{end}}
114114
{{if $file.IsProtected}}
@@ -200,8 +200,8 @@
200200
{{$.locale.Tr "loading"}}
201201
</div>
202202
<div class="text right edit buttons">
203-
<div class="ui basic primary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</div>
204-
<div class="ui green save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</div>
203+
<button class="ui basic primary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button>
204+
<button class="ui green save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</button>
205205
</div>
206206
</div>
207207
</div>

‎templates/repo/editor/edit.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,14 @@
6565
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
6666
</div>
6767
<div class="actions">
68-
<div class="ui red basic cancel inverted button">
68+
<button class="ui red basic cancel inverted button">
6969
<i class="remove icon"></i>
7070
{{.locale.Tr "repo.editor.cancel"}}
71-
</div>
72-
<div class="ui green basic ok inverted button">
71+
</button>
72+
<button class="ui green basic ok inverted button">
7373
<i class="save icon"></i>
7474
{{.locale.Tr "repo.editor.commit_changes"}}
75-
</div>
75+
</button>
7676
</div>
7777
</div>
7878

‎templates/repo/editor/patch.tmpl

+6-6
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@
4545
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
4646
</div>
4747
<div class="actions">
48-
<div class="ui red basic cancel inverted button">
49-
<i class="remove icon"></i>
48+
<button class="ui red basic inverted cancel button">
49+
{{svg "octicon-x"}}
5050
{{.locale.Tr "repo.editor.cancel"}}
51-
</div>
52-
<div class="ui green basic ok inverted button">
53-
<i class="save icon"></i>
51+
</button>
52+
<button class="ui green basic inverted ok button">
53+
{{svg "fontawesome-save"}}
5454
{{.locale.Tr "repo.editor.commit_changes"}}
55-
</div>
55+
</button>
5656
</div>
5757
</div>
5858
</div>

‎templates/repo/issue/labels.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{template "repo/issue/navbar" .}}
77
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
88
<div class="ui right">
9-
<div class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</div>
9+
<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
1010
</div>
1111
{{end}}
1212
</div>

0 commit comments

Comments
 (0)