feat: Accessibility for layout and repo explore bar

application/app/javascript/controllers/focus_on_event_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static values = {
+        event: String,
+        elementId: String
+    }
+
+    connect() {
+        if (this.eventValue) {
+            this.element.addEventListener(this.eventValue, this.focusInput)
+        }
+    }
+
+    disconnect() {
+        if (this.eventValue) {
+            this.element.removeEventListener(this.eventValue, this.focusInput)
+        }
+    }
+
+    focusInput = () => {
+        if (!this.elementIdValue) return
+        const target = document.getElementById(this.elementIdValue)
+        if (target) target.focus()
+    }
+}

application/app/views/layouts/_flash_messages.html.erb

@@ -2,7 +2,7 @@
   <% flash.each do |type, message| %>
     <div class="alert-dismissible fade show <%= alert_class(type) %>" role="alert">
       <%= message.html_safe %>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="<%= t('.button_close_label') %>"></button>
     </div>
   <% end %>
 </div>

application/app/views/layouts/_modal.html.erb

@@ -1,17 +1,17 @@
 <%
   modal_classes = local_assigns.fetch(:class, 'modal-xl')
 %>
-<div id="global-modal" class="modal fade" tabindex="-1" aria-hidden="true" data-controller="modal">
+<div id="global-modal" class="modal fade" tabindex="-1" aria-hidden="true" data-controller="modal" aria-modal="true" role="dialog">
   <div class="modal-dialog <%= modal_classes %>">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title mb-0" data-modal-target="title">Loading...</h5>
+        <h5 class="modal-title mb-0" data-modal-target="title"><%= t('.header_loading_text') %></h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<%= t('.button_close_label') %>"></button>
       </div>
 
       <div class="modal-body p-4 position-relative">
         <div class="modal-overlay d-none" data-modal-target="spinner">
-          <div class="spinner-border text-primary" role="status"></div>
+          <div class="spinner-border text-primary" role="status" aria-live="polite"></div>
         </div>
 
         <div data-modal-target="content"></div>

application/app/views/layouts/_modal_delete_confirmation.html.erb

@@ -3,6 +3,7 @@
      tabindex="-1"
      role="dialog"
      aria-modal="true"
+     aria-live="assertive"
      aria-labelledby="modal-confirm-title"
      aria-describedby="modal-confirm-description"
      data-controller="modal">
@@ -16,7 +17,7 @@
             <i class="bi bi-question-circle-fill text-primary me-1" aria-hidden="true"></i>
             <span data-modal-target="title"><%= t('.header_title') %></span>
           </h5>
-          <small class="text-muted" data-modal-target="subtitle" style="margin-top: -3px;">This action cannot be undone.</small>
+          <small class="text-muted" data-modal-target="subtitle" style="margin-top: -3px;"><%= t('.subtitle_default_text') %></small>
         </div>
         <button type="button"
                 class="btn-close"

application/app/views/layouts/_project_bar.html.erb

@@ -4,15 +4,16 @@
        target="_blank"
        class="btn btn-sm btn-outline-secondary"
        title="<%= t('.link_open_downloads_title') %>">
-      <i class="bi bi-folder-fill"></i>
+      <i class="bi bi-folder-fill" aria-hidden="true"></i>
+      <span class="visually-hidden"><%= t('.link_open_downloads_title') %></span>
     </a>
 
-    <%= render partial: '/shared/file_row_date', locals: { date: project.creation_date, title: t('.creation_date_title')} if project.creation_date %>
+    <%= render partial: '/shared/file_row_date', locals: { date: project.creation_date, title: t('.field_creation_date_title')} if project.creation_date %>
 
     <!-- PROJECT METADATA -->
     <div data-project-name-target="display" class="d-flex flex-column">
       <%= link_to project_path(id: project.id), class: "position-relative project-name-link text-reset text-decoration-none rounded-end ps-1 pe-3" do %>
-        <h5 class="mb-0"><%= project.name %></h5>
+        <h2 class="mb-0 h5"><%= project.name %></h2>
         <small class="text-muted"><%= project.download_dir %></small>
       <% end %>
     </div>
@@ -23,10 +24,12 @@
        target="_blank"
        class="btn btn-sm btn-outline-primary ms-3"
        title="<%= t('.link_open_metadata_title') %>">
-      <i class="bi bi-card-list"></i>
+      <i class="bi bi-card-list" aria-hidden="true"></i>
+      <span class="visually-hidden"><%= t('.link_open_metadata_title') %></span>
     </a>
     <button class="btn btn-sm btn-outline-primary cursor-default" title="<%= t('.button_active_project_title') %>">
-      <i class="bi bi-check-circle-fill"></i>
+      <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
+      <span class="visually-hidden"><%= t('.button_active_project_title') %></span>
     </button>
   </div>
 </div>

application/app/views/layouts/_repo_resolver_bar.html.erb

@@ -1,5 +1,8 @@
 
-<div id="repo-resolver-bar" class="collapse bg-light" style="transition: none;">
+<div id="repo-resolver-bar" class="collapse bg-light" style="transition: none;"
+     data-controller="focus-on-event"
+     data-focus-on-event-event-value="shown.bs.collapse"
+     data-focus-on-event-element-id-value="input_repo_url">
   <div class="d-flex align-items-center justify-content-between py-3 px-5 border-bottom">
 
     <!-- Repo Logos (left aligned) -->
@@ -17,6 +20,7 @@
 
       <input type="text"
              name="repo_url"
+             id="input_repo_url"
              placeholder="<%= t('.input_repo_url_placeholder') %>"
              aria-label="<%= t('.input_repo_url_label') %>"
              class="form-control"
@@ -25,7 +29,7 @@
       <button class="btn btn-sm btn-primary px-3" type="submit"
               data-submit-button-target="button"
               data-action="click->submit-button#click">
-        <span data-submit-button-target="spinner"
+        <span data-submit-button-target="spinner" aria-live="polite"
               class="spinner-border spinner-border-sm me-1 d-none"
               role="status" aria-hidden="true"></span>
         <span data-submit-button-target="label"><%= t('.button_submit_text') %></span>

application/app/views/layouts/nav/_navigation.html.erb

@@ -7,25 +7,25 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0" role="menubar">
         <li class="nav-item" role="menuitem">
-          <%= nav_link_to t(".projects"), projects_path, class: 'nav-link' %>
+          <%= nav_link_to t(".link_projects_text"), projects_path, class: 'nav-link' %>
         </li>
         <li class="nav-item" role="menuitem">
-          <%= nav_link_to t(".downloads"), download_status_path, class: 'nav-link' %>
+          <%= nav_link_to t(".link_downloads_text"), download_status_path, class: 'nav-link' %>
         </li>
         <li class="nav-item" role="menuitem">
-          <%= nav_link_to t(".uploads"), upload_status_path, class: 'nav-link' %>
+          <%= nav_link_to t(".link_uploads_text"), upload_status_path, class: 'nav-link' %>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            <%= t(".repositories") %>
+            <%= t(".link_repositories_text") %>
           </a>
           <ul class="dropdown-menu">
             <li role="menuitem">
               <a class="dropdown-item d-flex align-items-center gap-2" href="<%= view_dataverse_landing_path %>">
                 <span class="icon-wrapper bg-white rounded d-inline-flex align-items-center justify-content-center p-1">
                   <%= connector_icon(ConnectorType::DATAVERSE) %>
                 </span>
-                <%= t('layouts.nav.navigation.link_dataverse_text') %>
+                <%= t('.link_dataverse_text') %>
               </a>
             </li>
 
@@ -35,7 +35,7 @@
                   <span class="icon-wrapper bg-white rounded d-inline-flex align-items-center justify-content-center p-1">
                     <%= connector_icon(ConnectorType::ZENODO) %>
                   </span>
-                  <%= t('layouts.nav.navigation.link_zenodo_text') %>
+                  <%= t('.link_zenodo_text') %>
                 </a>
               </li>
             <% end %>
@@ -50,22 +50,23 @@
              role="button"
              aria-expanded="false"
              aria-controls="repo-resolver-bar">
-            <%= image_tag('icon.png', alt: t('.icon_alt_text'), class: 'icon-class me-1') %> <%= t(".explore") %>
+            <%= image_tag('icon.png', alt: t('.icon_explore_alt'), class: 'icon-class me-1') %> <%= t(".link_explore_text") %>
           </a>
         </li>
         <li class="nav-item" role="menuitem">
           <%= nav_link_to ood_dashboard_url, class: 'nav-link d-flex align-items-center' do %>
-            <%= image_tag('ood_icon.svg', alt: t('.ood_icon_alt_text'), class: 'icon-class me-1') %> Open OnDemand
+            <%= image_tag('ood_icon.svg', alt: t('.icon_ood_alt'), class: 'icon-class me-1') %> Open OnDemand
           <% end %>
         </li>
         <li class="nav-item" role="menuitem">
-          <%= nav_link_to t(".restart"), restart_url, class: 'nav-link d-flex align-items-center' %>
+          <%= nav_link_to t(".link_restart_text"), restart_url, class: 'nav-link d-flex align-items-center' %>
         </li>
       </ul>
     </div>
 
     <div id="process-status"
          data-controller="lazy-loader"
+         aria-live="polite"
          data-lazy-loader-url-value="<%= detached_process_status_path %>"
          data-lazy-loader-stop-on-inactive-value="true"
          data-lazy-loader-interval-value="<%= ::Configuration.detached_process_status_interval %>">

application/config/locales/views/en.yml

@@ -213,31 +213,35 @@ en:
       logo:
         logo_alt_text: "OnDemand Loop Logo"
       navigation:
-        projects: "Projects"
-        downloads: "Downloads"
-        uploads: "Uploads"
-        repositories: "Repositories"
-        explore: "Explore"
-        icon_alt_text: "Loop Application Icon"
-        ood_icon_alt_text: "Open OnDemand Icon"
+        icon_explore_alt: "Loop Application Icon"
+        icon_ood_alt: "Open OnDemand Icon"
         link_dataverse_text: "Dataverse"
+        link_downloads_text: "Downloads"
+        link_explore_text: "Explore"
+        link_projects_text: "Projects"
+        link_repositories_text: "Repositories"
+        link_restart_text: "Restart"
+        link_uploads_text: "Uploads"
         link_zenodo_text: "Zenodo"
-      restart: "Restart"
+    flash_messages:
+      button_close_label: "Close"
     footer:
       version_text: "OnDemand Loop"
     modal:
       button_close_label: "Close"
+      header_loading_text: "Loading..."
     modal_delete_confirmation:
       header_title: "Delete"
       content_text: "Are you sure you want to delete this element? This action cannot be undone."
       button_close_label: "Close"
       button_confirm_text: "Delete"
       button_cancel_text: "Cancel"
+      subtitle_default_text: "This action cannot be undone."
     project_bar:
+      button_active_project_title: "Active Project"
+      field_creation_date_title: "Creation date"
       link_open_downloads_title: "Open Project folder"
-      creation_date_title: "Creation date"
       link_open_metadata_title: "Open Project metadata"
-      button_active_project_title: "Active Project"
     repo_resolver_bar:
       input_repo_url_placeholder: "Paste Repository URL"
       input_repo_url_label: "Repository URL"