diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index a40682fa..0903eec5 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -669,6 +669,7 @@ modules = [ # Vendor modules "ngRoute", "ngAnimate", + "ngAria", "pascalprecht.translate", "infinite-scroll", "tgRepeat" diff --git a/app/modules/components/project-menu/project-menu.jade b/app/modules/components/project-menu/project-menu.jade index a98077f1..420bf468 100644 --- a/app/modules/components/project-menu/project-menu.jade +++ b/app/modules/components/project-menu/project-menu.jade @@ -2,46 +2,92 @@ nav.menu(ng-if="vm.project") div(class="menu-container") ul(class="main-nav") li(id="nav-search") - a(href="", ng-class="{active: vm.active == 'search'}", title="{{'PROJECT.SECTION.SEARCH' | translate}}", tabindex="1", ng-click="vm.search()") - span(class="icon icon-search") + a( + href="" + ng-click="vm.search()" + ng-class="{active: vm.active == 'search'}" + aria-label="{{'PROJECT.SECTION.SEARCH' | translate}}" + tabindex="1" + ) + span.icon.icon-search span.helper(translate="PROJECT.SECTION.SEARCH") li(id="nav-timeline") - a(ng-class="{active: vm.active == 'project-timeline'}", title="{{'PROJECT.SECTION.TIMELINE' | translate}}", tg-nav="project:project=vm.project.get('slug')", tabindex="2") + a( + tg-nav="project:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'project-timeline'}" + aria-label="{{'PROJECT.SECTION.TIMELINE' | translate}}" + tabindex="2" + ) include ../../../svg/timeline.svg span.helper(translate="PROJECT.SECTION.TIMELINE") li(id="nav-backlog", ng-if="vm.menu.get('backlog')") - a(ng-class="{active: vm.active == 'backlog'}", title="{{'PROJECT.SECTION.BACKLOG' | translate}}", tg-nav="project-backlog:project=vm.project.get('slug')", tabindex="2") - span(class="icon icon-backlog") + a( + tg-nav="project-backlog:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'backlog'}" + aria-label="{{'PROJECT.SECTION.BACKLOG' | translate}}" + tabindex="2" + ) + span.icon.icon-backlog span.helper(translate="PROJECT.SECTION.BACKLOG") li(id="nav-kanban", ng-if="vm.menu.get('kanban')") - a(ng-class="{active: vm.active == 'kanban'}", title="{{'PROJECT.SECTION.KANBAN' | translate}}", tg-nav="project-kanban:project=vm.project.get('slug')", tabindex="3") - span(class="icon icon-kanban") + a( + tg-nav="project-kanban:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'kanban'}" + aria-label="{{'PROJECT.SECTION.KANBAN' | translate}}" + tabindex="3" + ) + span.icon.icon-kanban span.helper(translate="PROJECT.SECTION.KANBAN") li(id="nav-issues", ng-if="vm.menu.get('issues')") - a(ng-class="{active: vm.active == 'issues'}", title="{{'PROJECT.SECTION.ISSUES' | translate}}", tg-nav="project-issues:project=vm.project.get('slug')", tabindex="4") - span(class="icon icon-issues") + a( + tg-nav="project-issues:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'issues'}" + aria-label="{{'PROJECT.SECTION.ISSUES' | translate}}" + tabindex="4" + ) + span.icon.icon-issues span.helper(translate="PROJECT.SECTION.ISSUES") li(id="nav-wiki", ng-if="vm.menu.get('wiki')") - a(ng-class="{active: vm.active == 'wiki'}", title="{{'PROJECT.SECTION.WIKI' | translate}}", tg-nav="project-wiki:project=vm.project.get('slug')", tabindex="5") - span(class="icon icon-wiki") + a( + tg-nav="project-wiki:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'wiki'}" + aria-label="{{'PROJECT.SECTION.WIKI' | translate}}" + tabindex="5" + ) + span.icon.icon-wiki span.helper(translate="PROJECT.SECTION.WIKI") li(id="nav-team") - a(ng-class="{active: vm.active == 'team'}", title="{{'PROJECT.SECTION.TEAM' | translate}}", tg-nav="project-team:project=vm.project.get('slug')", tabindex="6") + a( + tg-nav="project-team:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'team'}" + aria-label="{{'PROJECT.SECTION.TEAM' | translate}}" + tabindex="6" + ) span(class="icon icon-team") span.helper(translate="PROJECT.SECTION.TEAM") li(id="nav-video", ng-if="vm.project.get('videoconferenceUrl')") - a(ng-href="{{vm.project.get('videoconferenceUrl')}}", target="_blank", title="{{'PROJECT.SECTION.MEETUP' | translate}}", tabindex="7") - span(class="icon icon-video") + a( + ng-href="{{vm.project.get('videoconferenceUrl')}}" + target="_blank" + aria-label="{{'PROJECT.SECTION.MEETUP' | translate}}" + tabindex="7" + ) + span.icon.icon-video span.helper(translate="PROJECT.SECTION.MEETUP") li(id="nav-admin", ng-if="vm.project.get('i_am_owner')") - a(ng-class="{active: vm.active == 'admin'}", tg-nav="project-admin-home:project=vm.project.get('slug')", title="{{'PROJECT.SECTION.ADMIN' | translate}}", tabindex="8") - span(class="icon icon-settings") + a( + tg-nav="project-admin-home:project=vm.project.get('slug')" + ng-class="{active: vm.active == 'admin'}" + aria-label="{{'PROJECT.SECTION.ADMIN' | translate}}" + tabindex="8" + ) + span.icon.icon-settings span.helper(translate="PROJECT.SECTION.ADMIN") diff --git a/bower.json b/bower.json index be586d1e..d6034594 100644 --- a/bower.json +++ b/bower.json @@ -53,6 +53,7 @@ "angular": "1.4.0", "angular-route": "1.4.0", "angular-animate": "1.4.0", + "angular-aria": "1.4.0", "angular-sanitize": "1.4.0", "angular-mocks": "1.4.0", "checksley": "~0.6.0", diff --git a/gulpfile.js b/gulpfile.js index 41c62d57..321bf478 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -143,6 +143,7 @@ paths.libs = [ paths.vendor + "angular-route/angular-route.js", paths.vendor + "angular-sanitize/angular-sanitize.js", paths.vendor + "angular-animate/angular-animate.js", + paths.vendor + "angular-aria/angular-aria.js", paths.vendor + "angular-translate/angular-translate.js", paths.vendor + "angular-translate-loader-static-files/angular-translate-loader-static-files.js", paths.vendor + "angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat.js",