From 1f633ca5078175e71757e604df0210548f42ada6 Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 07:24:29 -0500
Subject: [PATCH 1/7] Update navbar localization keys for consistency in layout
 components

---
 app/components/layout/sidebar_component.html.erb |  8 ++++----
 app/components/layout_component.html.erb         |  4 ++--
 config/locales/en.yml                            | 12 ++++--------
 config/locales/fr.yml                            | 14 +++++---------
 4 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/app/components/layout/sidebar_component.html.erb b/app/components/layout/sidebar_component.html.erb
index 71664919ca..1c130bd747 100644
--- a/app/components/layout/sidebar_component.html.erb
+++ b/app/components/layout/sidebar_component.html.erb
@@ -36,13 +36,13 @@
           <button
             type="button"
             data-action="click->layout#collapse"
-            title="<%= t(:'general.navbar.collapse.title') %>"
+            title="<%= t(:'general.navbar.collapse.label') %>"
             class="
               navbar-button cursor-pointer p-2 rounded-lg transition-colors hover:bg-slate-100
               dark:hover:bg-slate-700 text-slate-500 dark:text-slate-400 hover:text-slate-700
               dark:hover:text-slate-200
             "
-            aria-label="<%= t(:'general.navbar.collapse.aria_label') %>"
+            aria-label="<%= t(:'general.navbar.collapse.label') %>"
           >
             <%= pathogen_icon :sidebar %>
           </button>
@@ -51,7 +51,7 @@
               navbar-button cursor-pointer p-2 rounded-lg transition-colors hover:bg-slate-100
               dark:hover:bg-slate-700 text-slate-500 dark:text-slate-400 hover:text-slate-700
               dark:hover:text-slate-200
-            " }, title: t(:'general.navbar.new_dropdown.title'), aria: { label: t(:'general.navbar.new_dropdown.aria_label') }) do |dropdown| %>
+            " }, title: t(:'general.navbar.new_dropdown.label'), aria: { label: t(:'general.navbar.new_dropdown.label') }) do |dropdown| %>
             <%= dropdown.with_item(
               label: t(:"general.navbar.new_dropdown.project"),
               url: new_project_path,
@@ -66,7 +66,7 @@
               navbar-button cursor-pointer p-2 rounded-lg transition-colors hover:bg-slate-100
               dark:hover:bg-slate-700 text-slate-500 dark:text-slate-400 hover:text-slate-700
               dark:hover:text-slate-200
-            "}, title: t(:'general.navbar.account_dropdown.title'), aria: { label: t(:'general.navbar.account_dropdown.aria_label') }) do |dropdown| %>
+            "}, title: t(:'general.navbar.account_dropdown.label'), aria: { label: t(:'general.navbar.account_dropdown.label') }) do |dropdown| %>
             <%= dropdown.with_item(
               label: t(:"general.navbar.account_dropdown.profile"),
               url: profile_path,
diff --git a/app/components/layout_component.html.erb b/app/components/layout_component.html.erb
index 4c97e2a595..a01c459425 100644
--- a/app/components/layout_component.html.erb
+++ b/app/components/layout_component.html.erb
@@ -42,8 +42,8 @@
         <button
           data-action="click->layout#expand:capture"
           class="text-slate-500 navbar-button cursor-pointer"
-          title="<%= t(:'general.navbar.expand.title') %>"
-          aria-label="<%= t(:'general.navbar.expand.aria_label') %>"
+          title="<%= t(:'general.navbar.expand.label') %>"
+          aria-label="<%= t(:'general.navbar.expand.label') %>"
         >
           <%= pathogen_icon :sidebar %>
         </button>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 11505b31a6..eacc92bb24 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -668,21 +668,17 @@ en:
     name: IRIDA Next
     navbar:
       account_dropdown:
-        aria_label: Account menu
+        label: Account menu
         profile: Edit profile
         sign_out: Sign out
-        title: Account
       collapse:
-        aria_label: Collapse navigation menu
-        title: Collapse
+        label: Collapse navigation menu
       expand:
-        aria_label: Expand navigation menu
-        title: Expand
+        label: Expand navigation menu
       new_dropdown:
-        aria_label: Create menu
         group: Create new group
+        label: Create menu
         project: Create new project
-        title: Create
     opens_in_new_tab: Opens in new tab
     screen_reader:
       close: Close
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index c88a355ec7..6781472f4e 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -665,26 +665,22 @@ fr:
       title: Votre travail
       workflows: Exécutions de flux de travail
     form:
-      error_notification: 'Veuillez examiner les problèmes ci-dessous :'
+      error_notification: 'Veuillez examiner les problèmes ci-dessous:'
     help: Aide
     name: IRIDA Next
     navbar:
       account_dropdown:
-        aria_label: Menu déroulant du compte
+        label: Menu déroulant du compte
         profile: Modifier le profil
         sign_out: Se déconnecter
-        title: Compte
       collapse:
-        aria_label: Réduire le menu de navigation
-        title: Réduire
+        label: Réduire le menu de navigation
       expand:
-        aria_label: Développer le menu de navigation
-        title: Agrandir
+        label: Développer le menu de navigation
       new_dropdown:
-        aria_label: Nouvel élément de menu
         group: Créer un nouveau groupe
+        label: Nouvel élément de menu
         project: Créer un nouveau projet
-        title: Créer
     opens_in_new_tab: S’ouvre dans un nouvel onglet
     screen_reader:
       close: Fermer

From 960817ccfd8e5d16b40b3d36306df1f7870c2c77 Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 07:39:00 -0500
Subject: [PATCH 2/7] Refactor layout components to use semantic HTML elements

- Change `<div>` to `<header>` in `layout_component.html.erb` for better structure.
- Update `<aside>` to `<nav>` in `sidebar_component.html.erb` to reflect navigation semantics.
- Replace `<div>` with `<header>` in `header_component.html.erb` for improved accessibility.
- Remove unused localization key `navigation` from `en.yml` and `fr.yml` for consistency.
---
 .../layout/sidebar/header_component.html.erb  |  8 +++----
 .../layout/sidebar_component.html.erb         | 21 +++++++++++--------
 app/components/layout_component.html.erb      |  4 ++--
 config/locales/en.yml                         |  1 -
 config/locales/fr.yml                         |  1 -
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/app/components/layout/sidebar/header_component.html.erb b/app/components/layout/sidebar/header_component.html.erb
index 54dd499c1c..42404ebf56 100644
--- a/app/components/layout/sidebar/header_component.html.erb
+++ b/app/components/layout/sidebar/header_component.html.erb
@@ -1,5 +1,5 @@
-<div class="px-4 mb-2" data-test-selector="sidebar-header-root">
-  <div class="pt-2 text-base font-semibold text-slate-900 dark:text-white">
+<header class="px-4 mb-2" data-test-selector="sidebar-header-root">
+  <h2 class="pt-2 text-base font-semibold text-slate-900 dark:text-white">
     <%= label %>
-  </div>
-</div>
+  </h2>
+</header>
diff --git a/app/components/layout/sidebar_component.html.erb b/app/components/layout/sidebar_component.html.erb
index 1c130bd747..57189127a2 100644
--- a/app/components/layout/sidebar_component.html.erb
+++ b/app/components/layout/sidebar_component.html.erb
@@ -1,4 +1,4 @@
-<aside
+<nav
   id="sidebar"
   class="
     flex flex-col text-sm border-r sidebar border-slate-200/50 bg-white/80
@@ -9,7 +9,7 @@
   aria-label="<%= t(:'general.default_sidebar.aria_label') %>"
 >
   <div class="flex flex-col h-full sm:overflow-y-hidden max-sm:overflow-y-auto">
-    <div class="bg-slate-200/80 dark:bg-slate-700/80">
+    <header class="bg-slate-200/80 dark:bg-slate-700/80">
       <div
         class="
           flex flex-wrap content-stretch items-center @min-[279px]/sidebar:justify-between
@@ -146,7 +146,7 @@
           </ul>
         </div>
       </div>
-    </div>
+    </header>
     <div class="flex-1 flex flex-col sm:overflow-hidden pt-4 grow">
       <%# Render the header slot if it's provided %>
       <turbo-frame id="sidebar-header" class="shrink-0">
@@ -154,19 +154,22 @@
       </turbo-frame>
 
       <%# Main navigation area %>
-      <nav
+      <div
         class="pt-1 space-y-1 sm:overflow-y-auto flex-1"
-        aria-label="<%= t(:'general.default_sidebar.navigation') %>"
       >
         <%# Iterate over sections and render them %>
         <% sections.each do |section| %>
           <%= section %>
         <% end %>
         <%# Iterate over items and render them %>
-        <% items.each do |item| %>
-          <%= item %>
+        <% if items.present? %>
+          <ul class="space-y-1">
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          </ul>
         <% end %>
-      </nav>
+      </div>
     </div>
     <div class="p-2 border-t border-slate-200 dark:border-slate-800">
       <a
@@ -185,7 +188,7 @@
       </a>
     </div>
   </div>
-</aside>
+</nav>
 <div
   class="
     fixed xl:invisible xl:hidden sidebar-overlay h-screen w-screen backdrop-blur-xs
diff --git a/app/components/layout_component.html.erb b/app/components/layout_component.html.erb
index a01c459425..e56a89f321 100644
--- a/app/components/layout_component.html.erb
+++ b/app/components/layout_component.html.erb
@@ -28,7 +28,7 @@
     "
     data-layout-target="content"
   >
-    <div
+    <header
       class="
         flex sm:px-4 max-sm:px-2 z-20 h-16 -outline-offset-1 border-b border-slate-200
         dark:border-slate-950 bg-white dark:bg-slate-800 xl:absolute xl:top-0 w-full
@@ -54,7 +54,7 @@
         </turbo-frame>
       </div>
       <%= language_selection %>
-    </div>
+    </header>
     <main
       id="main-content"
       tabindex="0"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index eacc92bb24..cfcfd9ebc0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -658,7 +658,6 @@ en:
       data_exports: Data Exports
       goto: Go to
       groups: Groups
-      navigation: Main Navigation
       projects: Projects
       title: Your work
       workflows: Workflow Executions
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 6781472f4e..b7dfe75de1 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -660,7 +660,6 @@ fr:
       data_exports: Exportations de données
       goto: Allez à
       groups: Groupes
-      navigation: Main navigation
       projects: Projets
       title: Votre travail
       workflows: Exécutions de flux de travail

From fb77a7553eaa727e35daf30d6fbef1780f19cad5 Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 07:47:29 -0500
Subject: [PATCH 3/7] Refactor flash message container for improved readability

- Adjust the formatting of the `flashes` div in `layout_component.html.erb` for better code clarity and maintainability.
---
 app/components/layout_component.html.erb | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/layout_component.html.erb b/app/components/layout_component.html.erb
index e56a89f321..62cb79fdc1 100644
--- a/app/components/layout_component.html.erb
+++ b/app/components/layout_component.html.erb
@@ -66,7 +66,10 @@
       <div class="<%= @layout %>"><%= body %></div>
     </main>
     <%= render ConfirmationComponent.new %>
-    <div id="flashes" class="fixed flex flex-col top-5 right-6 z-50">
+    <div
+      id="flashes"
+      class="fixed flex flex-col top-5 right-6 z-50"
+    >
       <% flash.each do |key, value| %>
         <%= viral_flash(type: key, data: value) %>
       <% end %>

From 9dd97ca052c3e169afc8544669551cb97c45256b Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 08:57:16 -0500
Subject: [PATCH 4/7] Update navbar button localization keys in system tests

---
 test/system/groups_test.rb   | 2 +-
 test/system/projects_test.rb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/system/groups_test.rb b/test/system/groups_test.rb
index 8e9cd29ec0..818612e0f2 100644
--- a/test/system/groups_test.rb
+++ b/test/system/groups_test.rb
@@ -21,7 +21,7 @@ def setup
   test 'can create a group' do
     visit groups_url
 
-    click_button I18n.t('general.navbar.new_dropdown.aria_label')
+    click_button I18n.t('general.navbar.new_dropdown.label')
     click_link I18n.t('general.navbar.new_dropdown.group')
 
     within %(div[data-controller="slugify"][data-controller-connected="true"]) do
diff --git a/test/system/projects_test.rb b/test/system/projects_test.rb
index 9698f71ff6..76cc205355 100644
--- a/test/system/projects_test.rb
+++ b/test/system/projects_test.rb
@@ -30,7 +30,7 @@ def setup
   test 'should have Project URL filled with user namespace, when creating a new project using the nav bar' do
     visit dashboard_projects_url
 
-    click_button I18n.t('general.navbar.new_dropdown.aria_label')
+    click_button I18n.t('general.navbar.new_dropdown.label')
     click_link I18n.t('general.navbar.new_dropdown.project')
 
     within %(div[data-controller="slugify"][data-controller-connected="true"]) do

From 1aafaa196e2946e228051583ba7ec4cc4be3839f Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 09:38:26 -0500
Subject: [PATCH 5/7] Update sidebar selector from 'aside#sidebar' to
 'nav#sidebar' in system tests

---
 test/system/groups_test.rb   | 2 +-
 test/system/projects_test.rb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/system/groups_test.rb b/test/system/groups_test.rb
index 818612e0f2..18cbd1d4bb 100644
--- a/test/system/groups_test.rb
+++ b/test/system/groups_test.rb
@@ -186,7 +186,7 @@ def setup
       assert_field I18n.t('activerecord.attributes.group.description'), with: group_description
     end
 
-    within 'aside#sidebar' do
+    within 'nav#sidebar' do
       assert_text group_name
     end
 
diff --git a/test/system/projects_test.rb b/test/system/projects_test.rb
index 76cc205355..e2d8922e1b 100644
--- a/test/system/projects_test.rb
+++ b/test/system/projects_test.rb
@@ -157,7 +157,7 @@ def setup
     assert_field I18n.t(:'activerecord.attributes.namespaces/project_namespace.name'), with: project_name
     assert_field I18n.t(:'activerecord.attributes.namespaces/project_namespace.description'), with: project_description
 
-    within 'aside#sidebar' do
+    within 'nav#sidebar' do
       assert_text project_name
     end
 

From 0229909779a33434208bd4c10510ca6204c139f5 Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 10:19:07 -0500
Subject: [PATCH 6/7] Refactor sidebar component tests to use 'nav' instead of
 'aside' and improve accessibility checks

---
 .../layout/sidebar_component_test.rb          | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/test/components/layout/sidebar_component_test.rb b/test/components/layout/sidebar_component_test.rb
index 9da9d9862b..f898c57e5a 100644
--- a/test/components/layout/sidebar_component_test.rb
+++ b/test/components/layout/sidebar_component_test.rb
@@ -4,29 +4,22 @@
 
 module Layout
   class SidebarComponentTest < ViewComponent::TestCase
-    test 'renders with default classes' do
+    test 'renders navigation container with overlay' do
       render_inline(Layout::SidebarComponent.new) do |sidebar|
         sidebar.with_header(label: 'Header')
       end
 
-      assert_selector('aside')
+      assert_selector('nav#sidebar[aria-label="Main sidebar"]')
+      assert_selector('button[title="Collapse navigation menu"]')
+      assert_selector('.sidebar-overlay', visible: :all)
     end
 
-    test 'accepts custom classes' do
-      render_inline(Layout::SidebarComponent.new) do |sidebar|
-        sidebar.with_header(label: 'Header')
-      end
-
-      # The component should render with the default structure
-      assert_selector('aside')
-    end
-
-    test 'renders with header' do
+    test 'renders header slot content' do
       render_inline(Layout::SidebarComponent.new) do |sidebar|
         sidebar.with_header(label: 'Custom Header')
       end
 
-      assert_text('Custom Header')
+      assert_selector('[data-test-selector="sidebar-header-root"]', text: 'Custom Header')
     end
 
     test 'renders with sections' do
@@ -62,8 +55,7 @@ class SidebarComponentTest < ViewComponent::TestCase
         sidebar.with_header(label: 'Header')
       end
 
-      # Verify the sidebar renders without pipeline-specific content
-      assert_selector('aside')
+      assert_selector('nav#sidebar')
     end
 
     test 'renders collapsed by default when specified' do
@@ -72,7 +64,7 @@ class SidebarComponentTest < ViewComponent::TestCase
       end
 
       # The collapsed state is handled by JavaScript, so we just check the component renders
-      assert_selector('aside')
+      assert_selector('nav#sidebar')
     end
 
     test 'renders with icons' do
@@ -105,7 +97,7 @@ class SidebarComponentTest < ViewComponent::TestCase
         end
       end
 
-      assert_selector('aside[aria-label]')
+      assert_selector('nav#sidebar[aria-label="Main sidebar"]')
       assert_selector('a[href="/projects"]', text: 'Projects')
     end
 
@@ -123,5 +115,13 @@ class SidebarComponentTest < ViewComponent::TestCase
       # The menu items might be hidden by default, so we just check the button is rendered
       assert_selector('button', text: 'Configuration')
     end
+
+    test 'renders help link with accessible label' do
+      render_inline(Layout::SidebarComponent.new) do |sidebar|
+        sidebar.with_header(label: 'Header')
+      end
+
+      assert_selector('a[aria-label="Help - Opens in new tab"]', text: 'Help')
+    end
   end
 end

From cf5dbbde5369a51ce9e873eb9cc680e66ecc5c8b Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Thu, 16 Oct 2025 10:42:25 -0500
Subject: [PATCH 7/7] Update sidebar tests to assert 'nav#sidebar' instead of
 'aside' for improved semantic accuracy

---
 test/components/layout_component_test.rb | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/test/components/layout_component_test.rb b/test/components/layout_component_test.rb
index 3d2649f6a7..119b0c67da 100644
--- a/test/components/layout_component_test.rb
+++ b/test/components/layout_component_test.rb
@@ -28,10 +28,9 @@ class LayoutComponentTest < ViewComponent::TestCase
                   href: '#main-content'
 
       # Verify sidebar structure
-      assert_selector 'aside' do
+      assert_selector 'nav#sidebar' do
         # Check for the presence of navigation items rather than specific text
         # This is more resilient to changes in the exact text content
-        assert_selector 'nav'
 
         # Check for the presence of navigation items
         assert_selector 'a[href="/-/projects"]',
@@ -61,7 +60,7 @@ class LayoutComponentTest < ViewComponent::TestCase
       layout.with_body { 'Content' }
     end
 
-    # The layout controller might be on the aside or a parent element
+    # The layout controller might be on the nav or a parent element
     assert_selector '[data-controller~="layout"]'
   end
 
@@ -75,7 +74,7 @@ class LayoutComponentTest < ViewComponent::TestCase
       layout.with_body { 'Content' }
     end
 
-    assert_selector 'aside'
+    assert_selector 'nav#sidebar'
   end
 
   test 'renders with custom sidebar classes' do
@@ -92,7 +91,7 @@ class LayoutComponentTest < ViewComponent::TestCase
     end
 
     # Verify the sidebar renders with content
-    assert_selector 'aside'
+    assert_selector 'nav#sidebar'
   end
 
   test 'renders with multiple sections in sidebar' do