Fix sidebar button titles & Layout Semantics

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>

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
@@ -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,
@@ -146,27 +146,30 @@
           </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">
         <%= header %>
       </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

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
@@ -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>
@@ -54,7 +54,7 @@
         </turbo-frame>
       </div>
       <%= language_selection %>
-    </div>
+    </header>
     <main
       id="main-content"
       tabindex="0"
@@ -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 %>

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
@@ -668,21 +667,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

config/locales/fr.yml

@@ -660,31 +660,26 @@ 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
     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

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

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

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
@@ -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
 

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
@@ -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