From 9847a95a31feb29ef0ffb6ac72572237b1e0994b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Barrag=C3=A1n=20Merino?= Date: Thu, 1 Oct 2015 10:23:44 +0200 Subject: [PATCH 1/2] Add angular-aria --- app/coffee/app.coffee | 1 + bower.json | 1 + gulpfile.js | 1 + 3 files changed, 3 insertions(+) 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/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", 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 2/2] 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")