Make AvatarStack accessible via keyboard navigation (#3849)

Author: llastflowers

.changeset/tough-students-guess.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Make AvatarStack accessible via keyboard navigation

app/components/primer/beta/avatar.rb

@@ -19,6 +19,10 @@ module Beta
     class Avatar < Primer::Component
       status :beta
 
+      def link?
+        @href.present?
+      end
+
       DEFAULT_SIZE = 20
       SMALL_THRESHOLD = 24
 

app/components/primer/beta/avatar_stack.rb

@@ -79,6 +79,12 @@ def before_render
           "AvatarStack--two" => avatars.size == 2,
           "AvatarStack--three-plus" => avatars.size > 2
         )
+
+        # Make non-linked stacks keyboard-focusable so :focus-within triggers expansion (avoid extra focus stop when avatars are links).
+        unless @tooltipped || @disable_expand
+          has_linked_avatars = avatars.any?(&:link?)
+          @body_arguments[:tabindex] ||= 0 unless has_linked_avatars
+        end
       end
 
       def render?

test/components/beta/avatar_stack_test.rb

@@ -50,7 +50,7 @@ def test_renders_default_body
     end
 
     assert_selector(".AvatarStack") do
-      refute_selector(".toltipped")
+      refute_selector(".tooltipped")
       assert_selector(".AvatarStack-body") do
         assert_selector("img.avatar", count: 1)
       end
@@ -75,7 +75,7 @@ def test_renders_right_aligned
     end
 
     assert_selector(".AvatarStack.AvatarStack--right") do
-      refute_selector(".toltipped")
+      refute_selector(".tooltipped")
       assert_selector(".AvatarStack-body") do
         assert_selector("img.avatar", count: 1)
       end
@@ -138,4 +138,39 @@ def test_renders_avatars_with_individual_tooltips
       end
     end
   end
+
+  def test_adds_tabindex_when_expandable_and_avatars_are_not_links
+    render_inline(Primer::Beta::AvatarStack.new) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
+    end
+
+    assert_selector(".AvatarStack-body[tabindex='0']")
+  end
+
+  def test_does_not_add_tabindex_when_disable_expand_is_true
+    render_inline(Primer::Beta::AvatarStack.new(disable_expand: true)) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
+    end
+
+    refute_selector(".AvatarStack-body[tabindex]")
+  end
+
+  def test_does_not_add_tabindex_when_any_avatar_is_a_link
+    render_inline(Primer::Beta::AvatarStack.new) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar", href: "https://github.com/user1")
+      component.with_avatar(src: "Foo", alt: "Bar")
+    end
+
+    refute_selector(".AvatarStack-body[tabindex]")
+  end
+
+  def test_adds_tabindex_when_tooltipped
+    render_inline(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "Tooltip" })) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
+    end
+
+    assert_selector(".AvatarStack-body[tabindex='0']")
+  end
 end