From 6d86bf975359982914fa95511dac3d1379616623 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Barrag=C3=A1n=20Merino?= Date: Thu, 1 Oct 2015 10:24:21 +0200 Subject: [PATCH] Use aria-label instead title in the left menu --- .../components/project-menu/project-menu.jade | 78 +++++++++++++++---- 1 file changed, 62 insertions(+), 16 deletions(-) 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")