From d569a253cdf6842a37e45c5167630faad65242b6 Mon Sep 17 00:00:00 2001
From: Eevis Panula <eevajonna.panula@gmail.com>
Date: Thu, 3 Dec 2020 15:11:20 +0200
Subject: [PATCH] Bugfix: Remove focus from avatars in notifications for better
 keyboard navigation (#11650)

* Add tabindex=-1 to hide links from keyboard users

* Add aria-hidden to hide the links from accessibility tree

* When multiple followers, remove the first one from tab order as they are in the following text
---
 app/views/notifications/_aggregated_reactions.html.erb | 6 +++---
 app/views/notifications/_follow.html.erb               | 4 ++--
 app/views/notifications/shared/_profile_pic.html.erb   | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/views/notifications/_aggregated_reactions.html.erb b/app/views/notifications/_aggregated_reactions.html.erb
index 419930d9a..2352748cc 100644
--- a/app/views/notifications/_aggregated_reactions.html.erb
+++ b/app/views/notifications/_aggregated_reactions.html.erb
@@ -4,14 +4,14 @@
 
 <div class="relative shrink-0 self-start">
   <% if actors.size == 1 %>
-    <a href="<%= actors.first["path"] %>" class="crayons-avatar crayons-avatar--l m:crayons-avatar--xl">
+    <a href="<%= actors.first["path"] %>" class="crayons-avatar crayons-avatar--l m:crayons-avatar--xl" aria-hidden="true" tabindex="-1">
       <img src="<%= actors.first["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= actors.first["username"] %>'s profile" width="48" height="48">
     </a>
   <% else %>
-    <a href="<%= actors.first["path"] %>" class="crayons-avatar crayons-avatar--l mr-4">
+    <a href="<%= actors.first["path"] %>" class="crayons-avatar crayons-avatar--l mr-4" aria-hidden="true" tabindex="-1">
       <img src="<%= actors.first["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= actors.first["username"] %>'s profile" width="48" height="48">
     </a>
-    <a href="<%= actors.first["path"] %>" class="crayons-avatar crayons-avatar--l absolute -right-1 -bottom-3 border-solid border-2 border-base-inverted">
+    <a href="<%= actors.first["path"] %>" class="crayons-avatar crayons-avatar--l absolute -right-1 -bottom-3 border-solid border-2 border-base-inverted" aria-hidden="true" tabindex="-1">
       <img src="<%= actors.last["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= actors.last["username"] %>'s profile" width="48" height="48">
     </a>
   <% end %>
diff --git a/app/views/notifications/_follow.html.erb b/app/views/notifications/_follow.html.erb
index 145073d5b..ae39174eb 100644
--- a/app/views/notifications/_follow.html.erb
+++ b/app/views/notifications/_follow.html.erb
@@ -2,7 +2,7 @@
   <% if notification.json_data["aggregated_siblings"].length == 1 %>
     <% first_notification = notification.json_data["aggregated_siblings"].first %>
     <% cache "activity-profile-pic-#{first_notification['id']}-#{first_notification['profile_image_90']}" do %>
-      <a href="<%= first_notification["path"] %>" class="crayons-avatar crayons-avatar--l <% if notification.json_data["aggregated_siblings"].length == 1 %>m:crayons-avatar--xl<% end %> shrink-0">
+      <a href="<%= first_notification["path"] %>" class="crayons-avatar crayons-avatar--l <% if notification.json_data["aggregated_siblings"].length == 1 %>m:crayons-avatar--xl<% end %> shrink-0" tabindex="-1" aria-hidden="true">
         <img src="<%= first_notification["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= first_notification["username"] %>'s profile" width="48" height="48">
       </a>
     <% end %>
@@ -18,7 +18,7 @@
     <% json_data_array = notification["json_data"]["aggregated_siblings"] %>
     <div class="flex mb-3">
       <% notification.json_data["aggregated_siblings"][0..10].each do |sibling| %>
-        <a href="<%= sibling["path"] %>" class="crayons-avatar crayons-avatar--l shrink-0 mx-1">
+        <a href="<%= sibling["path"] %>" class="crayons-avatar crayons-avatar--l shrink-0 mx-1" <% if sibling["id"] == json_data_array.first["id"] %> tabindex="-1" aria-hidden="true"<% end %>>
           <img src="<%= sibling["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= sibling["name"] %>'s profile" width="32" height="32">
         </a>
       <% end %>
diff --git a/app/views/notifications/shared/_profile_pic.html.erb b/app/views/notifications/shared/_profile_pic.html.erb
index 544960f77..8771d743b 100644
--- a/app/views/notifications/shared/_profile_pic.html.erb
+++ b/app/views/notifications/shared/_profile_pic.html.erb
@@ -1,10 +1,10 @@
 <div class="relative self-start">
   <% if json_data["organization"] %>
-    <a class="crayons-logo crayons-logo--l m:crayons-logo--xl" href="<%= json_data["organization"]["path"] %>">
+    <a class="crayons-logo crayons-logo--l m:crayons-logo--xl" href="<%= json_data["organization"]["path"] %>" tabindex="-1" aria-hidden="true">
       <img alt="<%= json_data["organization"]["name"] %> logo" class="crayons-logo__image" src="<%= json_data["organization"]["profile_image_90"] %>" width="48" height="48">
     </a>
   <% end %>
-  <a href="<%= json_data["user"]["path"] %>" class="crayons-avatar <% if json_data["organization"] %> crayons-avatar--l absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted <% else %> crayons-avatar--l m:crayons-avatar--xl <% end %>">
+  <a href="<%= json_data["user"]["path"] %>" class="crayons-avatar <% if json_data["organization"] %> crayons-avatar--l absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted <% else %> crayons-avatar--l m:crayons-avatar--xl <% end %>" tabindex="-1" aria-hidden="true">
     <img src="<%= json_data["user"]["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= json_data["user"]["username"] %>'s profile" width="48" height="48">
   </a>
 </div>