NavList: Add aria-current to active nav item

.changeset/flat-bulldogs-juggle.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+NavList: Add aria-current to active nav item

app/components/primer/alpha/nav_list.ts

@@ -219,6 +219,7 @@ export class NavListElement extends HTMLElement {
     if (currentlySelectedItem) this.#deselect(currentlySelectedItem)
 
     navItem.classList.add('ActionListItem--navActive')
+    navItem.children[0].setAttribute('aria-current', 'page')
 
     const parentMenu = this.#findParentMenu(navItem)
 
@@ -230,6 +231,7 @@ export class NavListElement extends HTMLElement {
 
   #deselect(navItem: HTMLElement) {
     navItem.classList.remove('ActionListItem--navActive')
+    navItem.children[0].removeAttribute('aria-current')
 
     const parentMenu = this.#findParentMenu(navItem)
 

app/components/primer/alpha/nav_list/item.rb

@@ -80,6 +80,8 @@ def before_render
             )
           end
 
+          @content_arguments[:"aria-current"] = "page" if active?
+
           super
 
           raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?

previews/primer/alpha/nav_list_preview.rb

@@ -6,7 +6,7 @@ module Alpha
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :code_review_limits)) do |list|
+        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :collaborators)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|

test/components/alpha/nav_list_test.rb

@@ -96,7 +96,7 @@ def test_selected_item
         end
 
         refute_selector ".ActionListItem--navActive", text: "Item 1"
-        assert_selector ".ActionListItem--navActive", text: "Item 2"
+        assert_selector ".ActionListItem--navActive [aria-current=page]", text: "Item 2"
       end
 
       def test_item_can_be_selected_by_any_of_its_ids
@@ -108,7 +108,7 @@ def test_item_can_be_selected_by_any_of_its_ids
           end
         end
 
-        assert_selector ".ActionListItem--navActive", text: "Item 1"
+        assert_selector ".ActionListItem--navActive [aria-current=page]", text: "Item 1"
         refute_selector ".ActionListItem--navActive", text: "Item 2"
       end
 
@@ -138,7 +138,7 @@ def test_item_can_be_selected_by_current_page
         end
 
         refute_selector ".ActionListItem--navActive", text: "Item 1"
-        assert_selector ".ActionListItem--navActive", text: "Item 2"
+        assert_selector ".ActionListItem--navActive [aria-current=page]", text: "Item 2"
       end
 
       def test_max_nesting_depth

test/system/alpha/nav_list_test.rb

@@ -120,11 +120,11 @@ def select_item_by(id: nil, href: nil)
     end
 
     def assert_item_id_selected(item_id)
-      assert_selector("li[data-item-id='#{item_id}'].ActionListItem--navActive")
+      assert_selector("li[data-item-id='#{item_id}'].ActionListItem--navActive [aria-current=page]")
     end
 
     def assert_item_href_selected(item_href)
-      assert_selector("li.ActionListItem--navActive a[href='#{item_href}']")
+      assert_selector("li.ActionListItem--navActive a[href='#{item_href}'][aria-current=page]")
     end
   end
 end