mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-22 08:42:32 -05:00
a78e0b7dad
This PR is trying to add accessibility to the menu as mentioned in #23053 so the menu can be accessed using keyboard (A quick demo is added below), with a reference to [PR2612](https://github.com/go-gitea/gitea/pull/22612). The goal is to make the menu accessible merely using keyboard like shown below. And this PR might need confirmation from developers using screen readers.
218 lines
9.2 KiB
Handlebars
218 lines
9.2 KiB
Handlebars
<div class="ui container" id="navbar" role="navigation" aria-label="{{.locale.Tr "aria.navbar"}}">
|
|
{{$notificationUnreadCount := 0}}
|
|
{{if .IsSigned}}
|
|
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
|
|
{{end}}
|
|
<div class="item brand gt-sb">
|
|
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
|
|
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
|
|
</a>
|
|
<div class="gt-df gt-ac">
|
|
{{if .IsSigned}}
|
|
<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only gt-mr-4 gt-mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
|
|
<span class="fitted item">
|
|
{{svg "octicon-bell"}}
|
|
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
|
|
{{$notificationUnreadCount}}
|
|
</span>
|
|
</span>
|
|
</a>
|
|
{{end}}
|
|
<button class="ui icon button mobile-only" id="navbar-expand-toggle">
|
|
{{svg "octicon-three-bars"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{if and .IsSigned .MustChangePassword}}
|
|
{{/* No links */}}
|
|
{{else if .IsSigned}}
|
|
{{if not .UnitIssuesGlobalDisabled}}
|
|
<a class="item {{if .PageIsIssues}}active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
|
|
{{end}}
|
|
{{if not .UnitPullsGlobalDisabled}}
|
|
<a class="item {{if .PageIsPulls}}active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
|
|
{{end}}
|
|
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
|
|
{{if .ShowMilestonesDashboardPage}}<a class="item {{if .PageIsMilestonesDashboard}}active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}}
|
|
{{end}}
|
|
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
|
|
{{else if .IsLandingPageOrganizations}}
|
|
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
|
|
{{else}}
|
|
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
|
|
{{end}}
|
|
|
|
{{template "custom/extra_links" .}}
|
|
|
|
{{/* TODO
|
|
<div class="item">
|
|
<div class="ui icon input">
|
|
<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
|
|
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
|
|
</div>
|
|
</div>
|
|
*/}}
|
|
|
|
|
|
{{if and .IsSigned .MustChangePassword}}
|
|
<div class="right stackable menu">
|
|
<div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
|
|
<span class="text">
|
|
{{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>
|
|
<div class="menu user-menu" tabindex="-1">
|
|
<div class="ui header">
|
|
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
|
|
{{svg "octicon-sign-out"}}
|
|
{{.locale.Tr "sign_out"}}<!-- Sign Out -->
|
|
</a>
|
|
</div><!-- end content avatar menu -->
|
|
</div><!-- end dropdown avatar menu -->
|
|
</div>
|
|
{{else if .IsSigned}}
|
|
<div class="right stackable menu">
|
|
{{if EnableTimetracking}}
|
|
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
|
|
<span class="fitted gt-relative">
|
|
{{svg "octicon-stopwatch"}}
|
|
<span class="header-stopwatch-dot"></span>
|
|
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
|
|
</span>
|
|
</a>
|
|
<div class="active-stopwatch-popup tippy-target">
|
|
<div class="gt-df gt-ac">
|
|
<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
|
|
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
|
|
<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
|
|
<span class="ui primary label stopwatch-time gt-my-0 gt-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
|
|
{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
|
|
</span>
|
|
</a>
|
|
<form class="stopwatch-commit" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
|
|
{{.CsrfTokenHtml}}
|
|
<button
|
|
type="submit"
|
|
class="ui button mini compact basic icon fitted tooltip"
|
|
data-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
|
|
data-position="top right"
|
|
>{{svg "octicon-square-fill"}}</button>
|
|
</form>
|
|
<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
|
|
{{.CsrfTokenHtml}}
|
|
<button
|
|
type="submit"
|
|
class="ui button mini compact basic icon fitted tooltip"
|
|
data-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
|
|
data-position="top right"
|
|
>{{svg "octicon-trash"}}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile gt-mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
|
|
<span class="fitted item">
|
|
{{svg "octicon-bell"}}
|
|
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
|
|
{{$notificationUnreadCount}}
|
|
</span>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="ui dropdown jump item tooltip gt-mx-0" data-content="{{.locale.Tr "create_new"}}">
|
|
<span class="text">
|
|
<span class="fitted">{{svg "octicon-plus"}}</span>
|
|
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
|
|
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
|
|
</span>
|
|
<div class="menu">
|
|
<a class="item" href="{{AppSubUrl}}/repo/create">
|
|
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
|
|
</a>
|
|
{{if not .DisableMigrations}}
|
|
<a class="item" href="{{AppSubUrl}}/repo/migrate">
|
|
<span class="fitted">{{svg "octicon-repo-push"}}</span> {{.locale.Tr "new_migrate"}}
|
|
</a>
|
|
{{end}}
|
|
{{if .SignedUser.CanCreateOrganization}}
|
|
<a class="item" href="{{AppSubUrl}}/org/create">
|
|
<span class="fitted">{{svg "octicon-organization"}}</span> {{.locale.Tr "new_org"}}
|
|
</a>
|
|
{{end}}
|
|
</div><!-- end content create new menu -->
|
|
</div><!-- end dropdown menu create new -->
|
|
|
|
<div class="ui dropdown jump item tooltip gt-mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
|
|
<span class="text">
|
|
{{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>
|
|
<div class="menu user-menu" tabindex="-1">
|
|
<div class="ui header">
|
|
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
<a class="item" href="{{.SignedUser.HomeLink}}">
|
|
{{svg "octicon-person"}}
|
|
{{.locale.Tr "your_profile"}}<!-- Your profile -->
|
|
</a>
|
|
{{if not .DisableStars}}
|
|
<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
|
|
{{svg "octicon-star"}}
|
|
{{.locale.Tr "your_starred"}}
|
|
</a>
|
|
{{end}}
|
|
<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
|
|
{{svg "octicon-bell"}}
|
|
{{.locale.Tr "notification.subscriptions"}}<!-- Subscriptions -->
|
|
</a>
|
|
<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
|
|
{{svg "octicon-tools"}}
|
|
{{.locale.Tr "your_settings"}}<!-- Your settings -->
|
|
</a>
|
|
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">
|
|
{{svg "octicon-question"}}
|
|
{{.locale.Tr "help"}}<!-- Help -->
|
|
</a>
|
|
{{if .IsAdmin}}
|
|
<div class="divider"></div>
|
|
|
|
<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
|
|
{{svg "octicon-server"}}
|
|
{{.locale.Tr "admin_panel"}}<!-- Admin Panel -->
|
|
</a>
|
|
{{end}}
|
|
|
|
<div class="divider"></div>
|
|
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
|
|
{{svg "octicon-sign-out"}}
|
|
{{.locale.Tr "sign_out"}}<!-- Sign Out -->
|
|
</a>
|
|
</div><!-- end content avatar menu -->
|
|
</div><!-- end dropdown avatar menu -->
|
|
</div><!-- end signed user right menu -->
|
|
{{else}}
|
|
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
|
|
<div class="right stackable menu">
|
|
{{if .ShowRegistrationButton}}
|
|
<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
|
|
{{svg "octicon-person"}} {{.locale.Tr "register"}}
|
|
</a>
|
|
{{end}}
|
|
<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
|
|
{{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}}
|
|
</a>
|
|
</div><!-- end anonymous right menu -->
|
|
{{end}}
|
|
</div>
|