Skip to content

Commit e3434b7

Browse files
fsologurengfsologureng
committed
Changed foomantic dropdowns to the combobox+listbox ARIA design pattern
 - Changed scope application of aria.js functions to apply it after all widgets are initialized. - Improve a11y structure of: - Reactions in issue/pr comments view. - Comment options in issue/pr comments view. - Milestone dropdown in repo issue/pr view. - Projects dropdown in repo issue/pr view. - Assignees dropdown in repo issue/pr view. - Reviewers dropdown in repo pr view. - Due date dropdown in repo issue/pr view. - Dependency dropdown in repo issue/pr view. - Reference copy button in repo issue/pr view. - Language selector. - Create... button. - Profile and settings... button. - Add label for some buttons. - Remove `dropdown` class to an svg which generates false positives
1 parent 46addc1 commit e3434b7

File tree

12 files changed

+177
-101
lines changed

12 files changed

+177
-101
lines changed

‎options/locale/locale_en-US.ini

+6
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ powered_by = Powered by %s
1414
page = Page
1515
template = Template
1616
language = Language
17+
language_select = Select a language
1718
notifications = Notifications
1819
active_stopwatch = Active Time Tracker
1920
create_new = Create…
21+
create_new_select = Select an item to create…
2022
user_profile_and_more = Profile and Settings…
23+
user_action_select = Select a user action to do…
2124
signed_in_as = Signed in as
2225
enable_javascript = This website works better with JavaScript.
2326
toc = Table of Contents
@@ -918,6 +921,7 @@ mirror_password_help = Change the username to erase a stored password.
918921
watchers = Watchers
919922
stargazers = Stargazers
920923
forks = Forks
924+
reactions = Reactions
921925
pick_reaction = Pick your reaction
922926
reactions_more = and %d more
923927
unit_disabled = The site administrator has disabled this repository section.
@@ -1363,6 +1367,7 @@ issues.draft_title = Draft
13631367
issues.num_comments = %d comments
13641368
issues.commented_at = `commented <a href="#%s">%s</a>`
13651369
issues.delete_comment_confirm = Are you sure you want to delete this comment?
1370+
issues.context.options_button = Comment Options
13661371
issues.context.copy_link = Copy Link
13671372
issues.context.quote_reply = Quote Reply
13681373
issues.context.reference_issue = Reference in New Issue
@@ -1545,6 +1550,7 @@ issues.content_history.delete_from_history = Delete from history
15451550
issues.content_history.delete_from_history_confirm = Delete from history?
15461551
issues.content_history.options = Options
15471552
issues.reference_link = Reference: %s
1553+
issues.reference_button = Copy reference to clipboard
15481554

15491555
compare.compare_base = base
15501556
compare.compare_head = compare

‎templates/base/footer_content.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
{{if .ShowFooterBranding}}
2020
<a target="_blank" rel="noopener noreferrer" href="https://github.com/go-gitea/gitea">{{svg "octicon-mark-github"}}<span class="sr-only">GitHub</span></a>
2121
{{end}}
22-
<div class="ui language bottom floating slide up dropdown link item">
22+
<div class="ui language bottom floating slide up dropdown link item" aria-label="{{.locale.Tr "language_select"}}">
2323
{{svg "octicon-globe"}}
24-
<span>{{.locale.LangName}}</span>
24+
<span class="text" aria-label="{{.locale.Tr "language"}}">{{.locale.LangName}}</span>
2525
<div class="menu language-menu">
2626
{{range .AllLangs}}
2727
<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq $.locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>

‎templates/base/head_navbar.tmpl

+4-5
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
134134
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
135135
</span>
136-
<div class="menu">
136+
<div class="menu" aria-label="{{.locale.tr "create_new_select"}}">
137137
<a class="item" href="{{AppSubUrl}}/repo/create">
138138
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
139139
</a>
@@ -151,13 +151,12 @@
151151
</div><!-- end dropdown menu create new -->
152152

153153
<div class="ui dropdown jump item tooltip gt-mx-0" data-content="{{.locale.Tr "user_profile_and_more"}}">
154-
<span class="text">
154+
<span class="text" aria-label="{{.locale.Tr "signed_in_as"}} «{{.SignedUser.Name}}»">
155155
{{avatar $.Context .SignedUser 24 "tiny"}}
156-
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
157156
<span class="mobile-only">{{.SignedUser.Name}}</span>
158-
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
157+
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
159158
</span>
160-
<div class="menu user-menu" tabindex="-1">
159+
<div class="menu user-menu" aria-label="{{.locale.tr "user_action_select"}}">
161160
<div class="ui header">
162161
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
163162
</div>

‎templates/repo/issue/labels/labels_selector_field.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
1+
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown" aria-label="{{.locale.Tr "repo.issues.new.labels"}}">
22
<a class="text gt-df gt-ac muted">
33
<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
44
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
@@ -10,7 +10,7 @@
1010
{{if or .Labels .OrgLabels}}
1111
<div class="ui icon search input">
1212
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
13-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
13+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}" aria-label="{{.locale.Tr "repo.issues.filter_labels"}}">
1414
</div>
1515
{{end}}
1616
<a class="no-select item" href="#">{{.locale.Tr "repo.issues.new.clear_labels"}}</a>

‎templates/repo/issue/new_form.tmpl

+10-10
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{{template "shared/user/avatarlink" Dict "Context" $.Context "user" .SignedUser}}
1212
<div class="ui segment content">
1313
<div class="field">
14-
<input name="title" id="issue_title" placeholder="{{.locale.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255" autocomplete="off">
14+
<input name="title" id="issue_title" placeholder="{{.locale.Tr "repo.milestones.title"}}" aria-label="{{.locale.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" autofocus required maxlength="255" autocomplete="off">
1515
{{if .PageIsComparePull}}
1616
<div class="title_wip_desc" data-wip-prefixes="{{Json .PullRequestWorkInProgressPrefixes}}">{{.locale.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}</div>
1717
{{end}}
@@ -42,19 +42,19 @@
4242
<div class="ui divider"></div>
4343

4444
<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
45-
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
45+
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown" aria-label="{{.locale.Tr "repo.issues.new.milestone"}}">
4646
<span class="text">
4747
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
4848
{{if .HasIssuesOrPullsWritePermission}}
4949
{{svg "octicon-gear"}}
5050
{{end}}
5151
</span>
52-
<div class="menu">
52+
<div class="menu" aria-label="{{.locale.Tr "repo.issues.new.add_milestone_title"}}">
5353
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
5454
{{if or .OpenMilestones .ClosedMilestones}}
5555
<div class="ui icon search input">
5656
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
57-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
57+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}" aria-label="{{.locale.Tr "repo.issues.filter_milestones"}}">
5858
</div>
5959
{{end}}
6060
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
@@ -106,19 +106,19 @@
106106
<div class="ui divider"></div>
107107

108108
<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
109-
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
109+
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown" aria-label="{{.locale.Tr "repo.issues.new.projects"}}">
110110
<span class="text">
111111
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
112112
{{if .HasIssuesOrPullsWritePermission}}
113113
{{svg "octicon-gear"}}
114114
{{end}}
115115
</span>
116-
<div class="menu">
116+
<div class="menu" aria-label="{{.locale.Tr "repo.issues.new.add_project_title"}}">
117117
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_project_title"}}</div>
118118
{{if or .OpenProjects .ClosedProjects}}
119119
<div class="ui icon search input">
120120
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
121-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
121+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}" aria-label="{{.locale.Tr "repo.issues.filter_projects"}}">
122122
</div>
123123
{{end}}
124124
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_projects"}}</div>
@@ -168,18 +168,18 @@
168168
{{end}}
169169
<div class="ui divider"></div>
170170
<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
171-
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
171+
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown" aria-label="{{.locale.Tr "repo.issues.new.assignees"}}">
172172
<span class="text">
173173
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
174174
{{if .HasIssuesOrPullsWritePermission}}
175175
{{svg "octicon-gear"}}
176176
{{end}}
177177
</span>
178-
<div class="filter menu" data-id="#assignee_ids">
178+
<div class="filter menu" data-id="#assignee_ids" aria-label="{{.locale.Tr "repo.issues.new.add_assignees_title"}}">
179179
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_assignees_title"}}</div>
180180
<div class="ui icon search input">
181181
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
182-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
182+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}" aria-label="{{.locale.Tr "repo.issues.filter_assignees"}}">
183183
</div>
184184
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
185185
{{range .Assignees}}

‎templates/repo/issue/view_content/add_reaction.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{{if .ctxData.IsSigned}}
2-
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
2+
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}" aria-label="{{.ctxData.locale.Tr "repo.reactions"}}">
33
<a class="add-reaction">
44
{{svg "octicon-smiley"}}
55
</a>
6-
<div class="menu">
6+
<div class="menu" aria-label="{{.ctxData.locale.Tr "repo.pick_reaction"}}">
77
<div class="header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
88
<div class="divider"></div>
99
{{range $value := AllowedReactions}}
10-
<a class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</a>
10+
<a class="item reaction tooltip" data-content="{{$value}}" aria-label="{{$value}}">{{ReactionToEmoji $value}}</a>
1111
{{end}}
1212
</div>
1313
</div>

‎templates/repo/issue/view_content/context_menu.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{if .ctxData.IsSigned}}
2-
<div class="item action ui dropdown jump pointing top right context-dropdown">
2+
<div class="item action ui dropdown jump pointing top right context-dropdown" aria-label="{{.ctxData.locale.Tr "repo.issues.context.options_button"}}">
33
<a class="context-menu">
44
{{svg "octicon-kebab-horizontal"}}
55
</a>

‎templates/repo/issue/view_content/sidebar.tmpl

+15-15
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{if .Issue.IsPull}}
66

77
<input id="reviewer_id" name="reviewer_id" type="hidden" value="{{.reviewer_id}}">
8-
<div class="ui {{if or (not .Reviewers) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown">
8+
<div class="ui {{if or (not .Reviewers) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown" aria-label="{{.locale.Tr "repo.issues.review.reviewers"}}">
99
<a class="text gt-df gt-ac muted">
1010
<strong>{{.locale.Tr "repo.issues.review.reviewers"}}</strong>
1111
{{if and .CanChooseReviewer (not .Repository.IsArchived)}}
@@ -17,7 +17,7 @@
1717
{{if .Reviewers}}
1818
<div class="ui icon search input">
1919
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
20-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_reviewers"}}">
20+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_reviewers"}}" aria-label="{{.locale.Tr "repo.issues.filter_reviewers"}}">
2121
</div>
2222
{{end}}
2323
{{if .Reviewers}}
@@ -110,7 +110,7 @@
110110

111111
<div class="ui divider"></div>
112112

113-
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
113+
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown" aria-label="{{.locale.Tr "repo.issues.new.milestone"}}">
114114
<a class="text gt-df gt-ac muted">
115115
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
116116
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
@@ -122,7 +122,7 @@
122122
{{if or .OpenMilestones .ClosedMilestones}}
123123
<div class="ui icon search input">
124124
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
125-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
125+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}" aria-label="{{.locale.Tr "repo.issues.filter_milestones"}}">
126126
</div>
127127
{{end}}
128128
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
@@ -173,7 +173,7 @@
173173
{{if .IsProjectsEnabled}}
174174
<div class="ui divider"></div>
175175

176-
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
176+
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown" aria-label="{{.locale.Tr "repo.issues.new.projects"}}">
177177
<a class="text gt-df gt-ac muted">
178178
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
179179
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
@@ -185,7 +185,7 @@
185185
{{if or .OpenProjects .ClosedProjects}}
186186
<div class="ui icon search input">
187187
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
188-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
188+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}" aria-label="{{.locale.Tr "repo.issues.filter_projects"}}">
189189
</div>
190190
{{end}}
191191
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_projects"}}</div>
@@ -231,7 +231,7 @@
231231
<div class="ui divider"></div>
232232

233233
<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
234-
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
234+
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown" aria-label="{{.locale.Tr "repo.issues.new.assignees"}}">
235235
<a class="text gt-df gt-ac muted">
236236
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
237237
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
@@ -242,7 +242,7 @@
242242
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_assignees_title"}}</div>
243243
<div class="ui icon search input">
244244
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
245-
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
245+
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}" aria-label="{{.locale.Tr "repo.issues.filter_assignees"}}">
246246
</div>
247247
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
248248
{{range .Assignees}}
@@ -407,7 +407,7 @@
407407
<form class="ui fluid action input issue-due-form" action="{{AppSubUrl}}/{{PathEscape .Repository.Owner.Name}}/{{PathEscape .Repository.Name}}/issues/{{.Issue.Index}}/deadline" method="post" id="update-issue-deadline-form">
408408
{{$.CsrfTokenHtml}}
409409
<input required placeholder="{{.locale.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
410-
<button class="ui green icon button">
410+
<button class="ui green icon button" aria-label="{{if ne .Issue.DeadlineUnix 0}}{{$.locale.Tr "repo.issues.due_date_form_edit"}}{{else}}{{$.locale.Tr "repo.issues.due_date_form_add"}}{{end}}">
411411
{{if ne .Issue.DeadlineUnix 0}}
412412
{{svg "octicon-pencil"}}
413413
{{else}}
@@ -479,9 +479,9 @@
479479
</div>
480480
<div class="item-right gt-df gt-ac">
481481
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
482-
<a class="delete-dependency-button tooltip ci muted" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.locale.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
482+
<button class="delete-dependency-button tooltip ci" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.locale.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
483483
{{svg "octicon-trash" 16}}
484-
</a>
484+
</button>
485485
{{end}}
486486
</div>
487487
</div>
@@ -494,13 +494,13 @@
494494
<form method="POST" action="{{.Issue.Link}}/dependency/add" id="addDependencyForm">
495495
{{$.CsrfTokenHtml}}
496496
<div class="ui fluid action input">
497-
<div class="ui search selection dropdown" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}">
497+
<div class="ui search selection dropdown" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}" aria-label="{{.locale.Tr "repo.issues.dependency.add"}}">
498498
<input name="newDependency" type="hidden">
499499
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
500-
<input type="text" class="search">
500+
<input type="text" class="search" aria-label="{{.locale.Tr "repo.issues.dependency.add"}}">
501501
<div class="default text">{{.locale.Tr "repo.issues.dependency.add"}}</div>
502502
</div>
503-
<button class="ui green icon button">
503+
<button class="ui green icon button" aria-label="{{$.locale.Tr "repo.issues.dependency.add"}}">
504504
{{svg "octicon-plus"}}
505505
</button>
506506
</div>
@@ -548,7 +548,7 @@
548548
{{$issueReferenceLink := printf "%s#%d" .Issue.Repo.FullName .Issue.Index}}
549549
<div class="row gt-ac tooltip" data-content="{{$issueReferenceLink}}">
550550
<span class="text column truncate">{{.locale.Tr "repo.issues.reference_link" $issueReferenceLink}}</span>
551-
<button class="ui two wide button column gt-p-3" data-clipboard-text="{{$issueReferenceLink}}">{{svg "octicon-copy" 14}}</button>
551+
<button class="ui two wide button column gt-p-3" data-clipboard-text="{{$issueReferenceLink}}" title="{{.locale.Tr "repo.issues.reference_button"}}">{{svg "octicon-copy" 14}}</button>
552552
</div>
553553
</div>
554554

0 commit comments

Comments
 (0)