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

Lines changed: 1 addition & 0 deletions
Loading

‎templates/admin/auth/edit.tmpl

Lines changed: 1 addition & 1 deletion
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

Lines changed: 3 additions & 5 deletions
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

Lines changed: 8 additions & 10 deletions
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

Lines changed: 2 additions & 20 deletions
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

Lines changed: 3 additions & 12 deletions
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

Lines changed: 4 additions & 4 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 4 deletions
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>

0 commit comments

Comments
 (0)