Fix action bar issue where keys don't loop around to end (primer#2292)

.changeset/poor-rats-jam.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix ActionBar issue where left and end key don't loop around to end of the action bar items.

app/components/primer/alpha/action_bar_element.ts

@@ -86,11 +86,18 @@ class ActionBarElement extends HTMLElement {
       bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
       focusOutBehavior: 'wrap',
       focusableElementFilter: element => {
-        return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem')
+        return this.#isVisible(element)
       }
     })
   }
 
+  #isVisible(element: HTMLElement): boolean {
+    // Safari doesn't support `checkVisibility` yet.
+    if (typeof element.checkVisibility === 'function') return element.checkVisibility()
+
+    return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)
+  }
+
   #itemGap(): number {
     return parseInt(window.getComputedStyle(this.itemContainer)?.columnGap, 10) || 0
   }

test/system/alpha/action_bar_test.rb

@@ -81,4 +81,14 @@ def test_click_outside_of_menu_sets_tabindex_back
     assert_equal page.evaluate_script("document.activeElement.classList.contains('Button--iconOnly')"), true
     assert_equal page.evaluate_script("!!document.activeElement.closest('action-menu')"), true
   end
+
+  def test_arrow_left_loops_to_last_item
+    visit_preview(:default)
+
+    # Tab to first item and press left arrow
+    page.driver.browser.keyboard.type(:tab, :left)
+
+    # The last item "Attach" should be focused
+    assert page.evaluate_script("document.activeElement.querySelector('svg.octicon-paperclip')")
+  end
 end