diff --git a/.changeset/flat-bulldogs-juggle.md b/.changeset/flat-bulldogs-juggle.md new file mode 100644 index 0000000000..51995d57a3 --- /dev/null +++ b/.changeset/flat-bulldogs-juggle.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +NavList: Add aria-current to active nav item diff --git a/app/components/primer/alpha/nav_list.ts b/app/components/primer/alpha/nav_list.ts index 18b08edcf3..e131874909 100644 --- a/app/components/primer/alpha/nav_list.ts +++ b/app/components/primer/alpha/nav_list.ts @@ -220,6 +220,10 @@ export class NavListElement extends HTMLElement { navItem.classList.add('ActionListItem--navActive') + if (navItem.children.length > 0) { + navItem.children[0].setAttribute('aria-current', 'page') + } + const parentMenu = this.#findParentMenu(navItem) if (parentMenu) { @@ -231,6 +235,10 @@ export class NavListElement extends HTMLElement { #deselect(navItem: HTMLElement) { navItem.classList.remove('ActionListItem--navActive') + if (navItem.children.length > 0) { + navItem.children[0].removeAttribute('aria-current') + } + const parentMenu = this.#findParentMenu(navItem) if (parentMenu) { diff --git a/app/components/primer/alpha/nav_list/item.rb b/app/components/primer/alpha/nav_list/item.rb index 7ebc3bcce6..f12750ba7f 100644 --- a/app/components/primer/alpha/nav_list/item.rb +++ b/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? diff --git a/previews/primer/alpha/nav_list_preview.rb b/previews/primer/alpha/nav_list_preview.rb index 853c68e304..b8d68a40a1 100644 --- a/previews/primer/alpha/nav_list_preview.rb +++ b/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| diff --git a/test/components/alpha/nav_list_test.rb b/test/components/alpha/nav_list_test.rb index 4dea416ea6..a845e9c56b 100644 --- a/test/components/alpha/nav_list_test.rb +++ b/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 diff --git a/test/system/alpha/nav_list_test.rb b/test/system/alpha/nav_list_test.rb index 1c4209f39e..3855eed4f7 100644 --- a/test/system/alpha/nav_list_test.rb +++ b/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