d569a253cd
* 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
45 lines
2.5 KiB
Text
45 lines
2.5 KiB
Text
<%# TODO: change to map of IDs %>
|
|
<% actors = siblings.map { |n| n["user"] }.uniq %>
|
|
<% reactable_data = notification.json_data["reaction"]["reactable"] %>
|
|
|
|
<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" 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" 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" 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 %>
|
|
</div>
|
|
|
|
<div class="notification__content pt-2">
|
|
<span class="inline-block py-1">
|
|
<% if actors.size == 1 %>
|
|
<a href="<%= actors.first["path"] %>" class="crayons-link fw-bold"><%= actors.first["name"] %></a>
|
|
<% elsif actors.size == 2 %>
|
|
<a href="<%= actors.first["path"] %>" class="crayons-link fw-bold"><%= actors.first["name"] %></a> and
|
|
<a href="<%= actors.last["path"] %>" class="crayons-link fw-bold"><%= actors.last["name"] %></a>
|
|
<% elsif actors.size > 1 %>
|
|
<a href="<%= actors.first["path"] %>" class="crayons-link fw-bold"><%= actors.first["name"] %></a> and <%= pluralize(actors.size - 1, "other") %>
|
|
<% end %>
|
|
reacted to
|
|
<a href="<%= reactable_data["path"] %>" class="crayons-link fw-bold">
|
|
<%# your article/comment or the actual title of the article/comment %>
|
|
<%= reactable_data["title"].blank? ? "your #{reactable_data['class']['name'].downcase}" : h(reactable_data["title"]) %>
|
|
</a>
|
|
with
|
|
</span>
|
|
|
|
<% reaction_categories = siblings.map { |n| n["category"] } %>
|
|
<% reaction_categories.each do |cat| %>
|
|
<% image_path = reaction_image(cat) %>
|
|
<% if image_path.present? %>
|
|
<%= inline_svg_tag(image_path, aria: true, class: "crayons-icon reaction-image mx-1 my-1 reaction-icon--#{cat}", title: cat.to_s.humanize) %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|