Merge pull request #1601 from bimbolabuari/2746-add-skip-to-content

Fix 2746: Add a 'skip to content' link
ushahidi · Nov 27, 2020 · 290617c · 290617c
2 parents c363932 + a440ce0
commit 290617c
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 3 deletions.
diff --git a/app/index.html b/app/index.html
@@ -19,6 +19,7 @@
     </head>
     <!-- TODO: set layouts per view directive -->
     <body ng-class="{ 'rtl-namespace' : rtlEnabled, 'ltr-namespace' : !rtlEnabled, 'modal-visible': modalVisible, 'demo-visible' : demoBarVisible }" class="{{ globalLayout }} ltr-namespace" canvas>
+        <a href="#main-content" class="skip-to-content">Skip to content</a>
         <div id="bootstrap-loading">
             <!-- loading the document -->
             <div class="loading">

diff --git a/app/main/posts/views/card.html b/app/main/posts/views/card.html
@@ -3,7 +3,7 @@
     <div class="listing-item-select">
         <input ng-show="canSelect" type="checkbox" checklist-value="post.id" checklist-model="selectedPosts" ng-click="stopClickPropagation($event)">
     </div>
-    <div class="postcard-body" ng-click="clickAction($event)">
+    <div class="postcard-body" tabindex="0" role="button" ng-keypress="clickAction($event)" ng-click="clickAction($event)">
       <header class="postcard-header">
 
         <post-metadata post="post" hide-date-this-week="true"></post-metadata>

diff --git a/app/main/posts/views/post-card.directive.js b/app/main/posts/views/post-card.directive.js
@@ -47,6 +47,9 @@ function PostCardDirective(FormEndpoint, PostLockService, $rootScope) {
                     // But ignore the action
                     return;
                 }
+                if (evt && evt.key && (evt.key !== ' ' && evt.key !== 'Enter' && evt.key !== 'Spacebar')) {
+                  return;
+                }
 
                 $scope.externalClickAction($scope.post);
             }

diff --git a/app/main/posts/views/post-view-data.html b/app/main/posts/views/post-view-data.html
@@ -63,7 +63,7 @@ <h1 class="mode-context-title"><a href="/" ng-bind="nav.site.name"></a></h1>
             </button>
 
         </listing-toolbar>
-        <div class="listing timeline init">
+        <div class="listing timeline init" id="main-content">
 
         <div class="bulk-action" ng-if="posts.length > 0 || !isLoading()">
             <div class="bulk-action-primary" translate="post.posts_total" translate-values="{'posts': posts.length, 'total_nb': totalItems }"></div>

diff --git a/sass/vendor.scss b/sass/vendor.scss
@@ -23,4 +23,4 @@
 @import "overrides/charts";
 @import "overrides/doorbell";
 @import "overrides/intercom";
-@import "overrides/tui-markdown";
+@import "overrides/tui-markdown";
-Original file line number
+Diff line change
@@ Expand Up @@
                         // But ignore the action
                         return;
                     }
+                    if (evt && evt.key && (evt.key !== ' ' && evt.key !== 'Enter' && evt.key !== 'Spacebar')) {
+                      return;
+                    }
                     $scope.externalClickAction($scope.post);
                 }
@@ Expand Down @@