maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bugfix: Remove focus from avatars in notifications for better keyboard navigation (#11650)

Browse source 
* 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
This commit is contained in:
Eevis Panula 2020-12-03 15:11:20 +02:00 • committed by GitHub
parent 0b75faa346
commit d569a253cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/views/notifications/_aggregated_reactions.html.erb
View file

@ -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 %>

4
app/views/notifications/_follow.html.erb
View file

@ -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 %>

4
app/views/notifications/shared/_profile_pic.html.erb
View file

@ -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>