From 358e19f954d6f57bb28ca1a961c65a90cc558731 Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:47:51 +0000
Subject: [PATCH] Use component wrapper on translation nav component

---
 CHANGELOG.md                                         |  1 +
 .../components/_translation_nav.html.erb             | 12 +++++++-----
 .../components/docs/translation_nav.yml              |  1 +
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d0ac508c8..2f9c19109e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * Use component wrapper on success alert component ([PR #4527](https://github.com/alphagov/govuk_publishing_components/pull/4527))
 * Use component wrapper on summary card component ([PR #4528](https://github.com/alphagov/govuk_publishing_components/pull/4528))
 * Use component wrapper on summary list component ([PR #4529](https://github.com/alphagov/govuk_publishing_components/pull/4529))
+* Use component wrapper on translation nav component ([PR #4530](https://github.com/alphagov/govuk_publishing_components/pull/4530))
 
 ## 47.0.0
 
diff --git a/app/views/govuk_publishing_components/components/_translation_nav.html.erb b/app/views/govuk_publishing_components/components/_translation_nav.html.erb
index e175b1ca7e..a21a1e7b73 100644
--- a/app/views/govuk_publishing_components/components/_translation_nav.html.erb
+++ b/app/views/govuk_publishing_components/components/_translation_nav.html.erb
@@ -4,12 +4,14 @@
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_role("navigation")
+  component_helper.add_class("gem-c-translation-nav govuk-!-display-none-print #{translation_helper.classes} #{brand_helper.brand_class}")
+  component_helper.add_aria_attribute({ label: t("common.translations") })
 %>
 <% if translation_helper.has_translations? %>
-  <nav role="navigation"
-    class="gem-c-translation-nav govuk-!-display-none-print <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
-    aria-label="<%= t("common.translations") %>"
-  >
+  <%= tag.nav(**component_helper.all_attributes) do %>
     <ul class="gem-c-translation-nav__list">
       <% translation_helper.translations.each.with_index do |translation, i| %>
         <li class="gem-c-translation-nav__list-item">
@@ -27,5 +29,5 @@
         </li>
       <% end %>
     </ul>
-  </nav>
+  <% end %>
 <% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/translation_nav.yml b/app/views/govuk_publishing_components/components/docs/translation_nav.yml
index 3c11127823..e67e3c654d 100644
--- a/app/views/govuk_publishing_components/components/docs/translation_nav.yml
+++ b/app/views/govuk_publishing_components/components/docs/translation_nav.yml
@@ -16,6 +16,7 @@ shared_accessibility_criteria:
   - link
 accessibility_excluded_rules:
   - landmark-unique # aria-label attributes will be duplicated in component examples list
+uses_component_wrapper_helper: true
 examples:
   default:
     data: