Improve accessibility of navigation bar and footer (#22635)

Added ARIA navigation landmark to navigation bar and aria label for both
nav bar and footer.

Contributed by @forgejo.

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
Felipe Leopoldo Sologuren Gutiérrez 2023-01-28 22:29:10 -03:00 committed by GitHub
parent c0015979a6
commit 2b1e47e2a2
Signed by: GitHub
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 4 deletions

@ -111,6 +111,12 @@ never = Never
rss_feed = RSS Feed
[aria]
navbar = Navigation Bar
footer = Footer
footer.software = About Software
footer.links = Links
[filter]
string.asc = A - Z
string.desc = Z - A

@ -1,6 +1,6 @@
<footer>
<footer role="group" aria-label="{{.locale.Tr "aria.footer"}}">
<div class="ui container">
<div class="ui left">
<div class="ui left" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
<a target="_blank" rel="noopener noreferrer" href="https://gitea.io">{{.locale.Tr "powered_by" "Gitea"}}</a>
{{if (or .ShowFooterVersion .PageIsAdmin)}}
{{.locale.Tr "version"}}:
@ -15,7 +15,7 @@
{{.locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
{{end}}
</div>
<div class="ui right links">
<div class="ui right links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
{{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}}

@ -1,4 +1,4 @@
<div class="ui container" id="navbar">
<div class="ui container" id="navbar" role="navigation" aria-label="{{.locale.Tr "aria.navbar"}}">
{{$notificationUnreadCount := 0}}
{{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}