Skip to content

Commit

Permalink
Changed foomantic dropdowns to the combobox+listbox ARIA design pattern
Browse files Browse the repository at this point in the history 
 - 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
  • Loading branch information
@fsologureng
fsologureng committed Mar 22, 2023
1 parent 46addc1 commit e3434b7
Show file tree
Hide file tree
Showing 12 changed files with 177 additions and 101 deletions.
6 changes: 6 additions & 0 deletions options/locale/locale_en-US.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,13 @@ powered_by = Powered by %s
page = Page
template = Template
language = Language
language_select = Select a language
notifications = Notifications
active_stopwatch = Active Time Tracker
create_new = Create…
create_new_select = Select an item to create…
user_profile_and_more = Profile and Settings…
user_action_select = Select a user action to do…
signed_in_as = Signed in as
enable_javascript = This website works better with JavaScript.
toc = Table of Contents
Expand Down Expand Up @@ -918,6 +921,7 @@ mirror_password_help = Change the username to erase a stored password.
watchers = Watchers
stargazers = Stargazers
forks = Forks
reactions = Reactions
pick_reaction = Pick your reaction
reactions_more = and %d more
unit_disabled = The site administrator has disabled this repository section.
Expand Down Expand Up @@ -1363,6 +1367,7 @@ issues.draft_title = Draft
issues.num_comments = %d comments
issues.commented_at = `commented <a href="#%s">%s</a>`
issues.delete_comment_confirm = Are you sure you want to delete this comment?
issues.context.options_button = Comment Options
issues.context.copy_link = Copy Link
issues.context.quote_reply = Quote Reply
issues.context.reference_issue = Reference in New Issue
Expand Down Expand Up @@ -1545,6 +1550,7 @@ issues.content_history.delete_from_history = Delete from history
issues.content_history.delete_from_history_confirm = Delete from history?
issues.content_history.options = Options
issues.reference_link = Reference: %s
issues.reference_button = Copy reference to clipboard

compare.compare_base = base
compare.compare_head = compare
Expand Down
4 changes: 2 additions & 2 deletions templates/base/footer_content.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
{{if .ShowFooterBranding}}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/go-gitea/gitea">{{svg "octicon-mark-github"}}<span class="sr-only">GitHub</span></a>
{{end}}
<div class="ui language bottom floating slide up dropdown link item">
<div class="ui language bottom floating slide up dropdown link item" aria-label="{{.locale.Tr "language_select"}}">
{{svg "octicon-globe"}}
<span>{{.locale.LangName}}</span>
<span class="text" aria-label="{{.locale.Tr "language"}}">{{.locale.LangName}}</span>
<div class="menu language-menu">
{{range .AllLangs}}
<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq $.locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>
Expand Down
9 changes: 4 additions & 5 deletions templates/base/head_navbar.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu">
<div class="menu" aria-label="{{.locale.tr "create_new_select"}}">
<a class="item" href="{{AppSubUrl}}/repo/create">
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
</a>
Expand All @@ -151,13 +151,12 @@
</div><!-- end dropdown menu create new -->

<div class="ui dropdown jump item tooltip gt-mx-0" data-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
<span class="text" aria-label="{{.locale.Tr "signed_in_as"}} «{{.SignedUser.Name}}»">
{{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu" tabindex="-1">
<div class="menu user-menu" aria-label="{{.locale.tr "user_action_select"}}">
<div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/issue/labels/labels_selector_field.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown" aria-label="{{.locale.Tr "repo.issues.new.labels"}}">
<a class="text gt-df gt-ac muted">
<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
Expand All @@ -10,7 +10,7 @@
{{if or .Labels .OrgLabels}}
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}" aria-label="{{.locale.Tr "repo.issues.filter_labels"}}">
</div>
{{end}}
<a class="no-select item" href="#">{{.locale.Tr "repo.issues.new.clear_labels"}}</a>
Expand Down
20 changes: 10 additions & 10 deletions templates/repo/issue/new_form.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{{template "shared/user/avatarlink" Dict "Context" $.Context "user" .SignedUser}}
<div class="ui segment content">
<div class="field">
<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">
<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">
{{if .PageIsComparePull}}
<div class="title_wip_desc" data-wip-prefixes="{{Json .PullRequestWorkInProgressPrefixes}}">{{.locale.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}</div>
{{end}}
Expand Down Expand Up @@ -42,19 +42,19 @@
<div class="ui divider"></div>

<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown" aria-label="{{.locale.Tr "repo.issues.new.milestone"}}">
<span class="text">
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="menu">
<div class="menu" aria-label="{{.locale.Tr "repo.issues.new.add_milestone_title"}}">
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
{{if or .OpenMilestones .ClosedMilestones}}
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}" aria-label="{{.locale.Tr "repo.issues.filter_milestones"}}">
</div>
{{end}}
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
Expand Down Expand Up @@ -106,19 +106,19 @@
<div class="ui divider"></div>

<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown" aria-label="{{.locale.Tr "repo.issues.new.projects"}}">
<span class="text">
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="menu">
<div class="menu" aria-label="{{.locale.Tr "repo.issues.new.add_project_title"}}">
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_project_title"}}</div>
{{if or .OpenProjects .ClosedProjects}}
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}" aria-label="{{.locale.Tr "repo.issues.filter_projects"}}">
</div>
{{end}}
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_projects"}}</div>
Expand Down Expand Up @@ -168,18 +168,18 @@
{{end}}
<div class="ui divider"></div>
<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown" aria-label="{{.locale.Tr "repo.issues.new.assignees"}}">
<span class="text">
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="filter menu" data-id="#assignee_ids">
<div class="filter menu" data-id="#assignee_ids" aria-label="{{.locale.Tr "repo.issues.new.add_assignees_title"}}">
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_assignees_title"}}</div>
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}" aria-label="{{.locale.Tr "repo.issues.filter_assignees"}}">
</div>
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
{{range .Assignees}}
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/view_content/add_reaction.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{{if .ctxData.IsSigned}}
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}" aria-label="{{.ctxData.locale.Tr "repo.reactions"}}">
<a class="add-reaction">
{{svg "octicon-smiley"}}
</a>
<div class="menu">
<div class="menu" aria-label="{{.ctxData.locale.Tr "repo.pick_reaction"}}">
<div class="header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
<div class="divider"></div>
{{range $value := AllowedReactions}}
<a class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</a>
<a class="item reaction tooltip" data-content="{{$value}}" aria-label="{{$value}}">{{ReactionToEmoji $value}}</a>
{{end}}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/context_menu.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{if .ctxData.IsSigned}}
<div class="item action ui dropdown jump pointing top right context-dropdown">
<div class="item action ui dropdown jump pointing top right context-dropdown" aria-label="{{.ctxData.locale.Tr "repo.issues.context.options_button"}}">
<a class="context-menu">
{{svg "octicon-kebab-horizontal"}}
</a>
Expand Down
30 changes: 15 additions & 15 deletions templates/repo/issue/view_content/sidebar.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{{if .Issue.IsPull}}

<input id="reviewer_id" name="reviewer_id" type="hidden" value="{{.reviewer_id}}">
<div class="ui {{if or (not .Reviewers) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown">
<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"}}">
<a class="text gt-df gt-ac muted">
<strong>{{.locale.Tr "repo.issues.review.reviewers"}}</strong>
{{if and .CanChooseReviewer (not .Repository.IsArchived)}}
Expand All @@ -17,7 +17,7 @@
{{if .Reviewers}}
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_reviewers"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_reviewers"}}" aria-label="{{.locale.Tr "repo.issues.filter_reviewers"}}">
</div>
{{end}}
{{if .Reviewers}}
Expand Down Expand Up @@ -110,7 +110,7 @@

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

<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown" aria-label="{{.locale.Tr "repo.issues.new.milestone"}}">
<a class="text gt-df gt-ac muted">
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
Expand All @@ -122,7 +122,7 @@
{{if or .OpenMilestones .ClosedMilestones}}
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}" aria-label="{{.locale.Tr "repo.issues.filter_milestones"}}">
</div>
{{end}}
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
Expand Down Expand Up @@ -173,7 +173,7 @@
{{if .IsProjectsEnabled}}
<div class="ui divider"></div>

<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown" aria-label="{{.locale.Tr "repo.issues.new.projects"}}">
<a class="text gt-df gt-ac muted">
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
Expand All @@ -185,7 +185,7 @@
{{if or .OpenProjects .ClosedProjects}}
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}" aria-label="{{.locale.Tr "repo.issues.filter_projects"}}">
</div>
{{end}}
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_projects"}}</div>
Expand Down Expand Up @@ -231,7 +231,7 @@
<div class="ui divider"></div>

<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
<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"}}">
<a class="text gt-df gt-ac muted">
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
Expand All @@ -242,7 +242,7 @@
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_assignees_title"}}</div>
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}" aria-label="{{.locale.Tr "repo.issues.filter_assignees"}}">
</div>
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
{{range .Assignees}}
Expand Down Expand Up @@ -407,7 +407,7 @@
<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">
{{$.CsrfTokenHtml}}
<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">
<button class="ui green icon button">
<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}}">
{{if ne .Issue.DeadlineUnix 0}}
{{svg "octicon-pencil"}}
{{else}}
Expand Down Expand Up @@ -479,9 +479,9 @@
</div>
<div class="item-right gt-df gt-ac">
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
<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="">
<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="">
{{svg "octicon-trash" 16}}
</a>
</button>
{{end}}
</div>
</div>
Expand All @@ -494,13 +494,13 @@
<form method="POST" action="{{.Issue.Link}}/dependency/add" id="addDependencyForm">
{{$.CsrfTokenHtml}}
<div class="ui fluid action input">
<div class="ui search selection dropdown" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}">
<div class="ui search selection dropdown" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}" aria-label="{{.locale.Tr "repo.issues.dependency.add"}}">
<input name="newDependency" type="hidden">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<input type="text" class="search">
<input type="text" class="search" aria-label="{{.locale.Tr "repo.issues.dependency.add"}}">
<div class="default text">{{.locale.Tr "repo.issues.dependency.add"}}</div>
</div>
<button class="ui green icon button">
<button class="ui green icon button" aria-label="{{$.locale.Tr "repo.issues.dependency.add"}}">
{{svg "octicon-plus"}}
</button>
</div>
Expand Down Expand Up @@ -548,7 +548,7 @@
{{$issueReferenceLink := printf "%s#%d" .Issue.Repo.FullName .Issue.Index}}
<div class="row gt-ac tooltip" data-content="{{$issueReferenceLink}}">
<span class="text column truncate">{{.locale.Tr "repo.issues.reference_link" $issueReferenceLink}}</span>
<button class="ui two wide button column gt-p-3" data-clipboard-text="{{$issueReferenceLink}}">{{svg "octicon-copy" 14}}</button>
<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>
</div>
</div>

Expand Down
Loading

0 comments on commit e3434b7

Please sign in to comment.