lato_cms 3.4.0 → 3.5.0

data/app/models/lato_cms/page_field.rb

@@ -22,6 +22,7 @@ module LatoCms
     validates :field_id, presence: true
     validates :field_id, uniqueness: { scope: [:page_id, :template_component_id] }
     validate :media_present_if_required
+    validate :value_matches_field_type
 
     REPEATER_ORDER_FIELD_ID = "__repeater_order".freeze
 
@@ -50,16 +51,32 @@ module LatoCms
       end
     end
 
+    RICH_TEXT_ALIGNMENTS = %w[left center right justify].freeze
+    COLOR_FORMAT = /\A#(\h{3}|\h{6})\z/
+
+    # Same allowlist as the editor's client-side sanitizer: `style` is reduced
+    # to text-align, the only style the toolbar produces, so a value posted
+    # outside the editor cannot keep arbitrary CSS either.
     def self.sanitize_rich_text(value)
-      String.new(ActionController::Base.helpers.sanitize(value, tags: RICH_TEXT_TAGS, attributes: RICH_TEXT_ATTRIBUTES).to_s)
+      html = ActionController::Base.helpers.sanitize(value, tags: RICH_TEXT_TAGS, attributes: RICH_TEXT_ATTRIBUTES).to_s
+      return String.new(html) unless html.include?('style=')
+
+      fragment = Nokogiri::HTML::DocumentFragment.parse(html)
+      fragment.css('[style]').each do |element|
+        alignment = element['style'][/(?:\A|;)\s*text-align\s*:\s*([a-z]+)/i, 1].to_s.downcase
+        RICH_TEXT_ALIGNMENTS.include?(alignment) ? element['style'] = "text-align: #{alignment};" : element.remove_attribute('style')
+      end
+      String.new(fragment.to_html)
     end
 
+    # The field definition comes from the template this field was saved
+    # under, never from the stored component_id: that id used to be taken
+    # from the request, and a forged one turned a `text` field (sanitized)
+    # into a `string` one (not sanitized).
     def field_config
       return nil if repeater_order?
 
-      component = LatoCms::TemplateManager.find_component(component_id)
-      return nil unless component
-      component.dig('fields', base_field_id)
+      LatoCms::TemplateManager.find_template_component_fields(template_id, template_component_id)&.dig(base_field_id)
     end
 
     def repeater_order?
@@ -177,6 +194,49 @@ module LatoCms
       errors.add(:base, I18n.t('lato_cms.field_required_attachment_error')) if page_field_media.reload.empty?
     end
 
+    # Server-side counterpart of the browser checks (`required`, option
+    # lists, number and color inputs): a request built by hand skips those,
+    # and the API hands the stored value to the frontend as-is.
+    def value_matches_field_type
+      return if repeater_order? || ATTACHMENT_FIELD_TYPES.include?(field_type)
+
+      if value_blank_for_type?
+        errors.add(:value, :blank) if field_required?
+        return
+      end
+
+      case field_type
+      when 'number'
+        errors.add(:value, :not_a_number) unless value.to_s.strip.match?(/\A-?\d+(\.\d+)?\z/)
+      when 'color'
+        errors.add(:value, :invalid) unless value.to_s.match?(COLOR_FORMAT)
+      when 'select'
+        errors.add(:value, :inclusion) if option_values.any? && !option_values.include?(value.to_s)
+      when 'multiselect'
+        errors.add(:value, :inclusion) if option_values.any? && (Array(parsed_value).map(&:to_s) - option_values).any?
+      when 'date', 'datetime'
+        errors.add(:value, :invalid) unless valid_date_value?
+      end
+    end
+
+    def value_blank_for_type?
+      return true if value.blank?
+
+      field_type == 'multiselect' && Array(parsed_value).compact_blank.empty?
+    end
+
+    def valid_date_value?
+      field_type == 'date' ? Date.iso8601(value.to_s) : DateTime.parse(value.to_s)
+      true
+    rescue ArgumentError, Date::Error
+      false
+    end
+
+    # `options` may list plain strings or `{ value:, label: }` hashes.
+    def option_values
+      Array(field_settings['options']).map { |option| (option.is_a?(Hash) ? option['value'] : option).to_s }
+    end
+
     def parse_value
       return if value.blank?
 

data/app/models/lato_cms/template_manager.rb

@@ -10,11 +10,11 @@ module LatoCms
       end
 
       def templates
-        load_yaml_files(templates_path)
+        cached_yaml_files(templates_path)
       end
 
       def components
-        load_yaml_files(components_path)
+        cached_yaml_files(components_path)
       end
 
       def find_template(template_id)
@@ -27,6 +27,15 @@ module LatoCms
         components.find { |c| c['id'] == component_id.to_s }
       end
 
+      # The field definitions of a template component, resolved through the
+      # template (template -> template component -> component). This is the
+      # authoritative source for a field's type: the component id stored on a
+      # PageField, or sent by a client, is never trusted to pick it.
+      def find_template_component_fields(template_id, template_component_id)
+        component_id = find_template(template_id)&.dig('components', template_component_id.to_s, 'component_id')
+        find_component(component_id)&.dig('fields')
+      end
+
       def template_options
         templates.map { |t| [t['name'], t['id']] }
       end
@@ -49,12 +58,49 @@ module LatoCms
         end
       end
 
+      def reset_cache!
+        @cache = {}
+      end
+
       private
 
+      # Parsed YAML is kept per process: every field read (type, name,
+      # settings) goes through here, so re-reading the files each time cost
+      # hundreds of parses per request, on a public endpoint too. When code
+      # reloading is on (development) the cache is keyed by the files' mtimes,
+      # so edited templates show up without a restart. Entries are deep-frozen
+      # because they are shared by every caller.
+      def cached_yaml_files(path)
+        @cache ||= {}
+        fingerprint = reloading? ? yaml_fingerprint(path) : nil
+        entry = @cache[path.to_s]
+        return entry[:data] if entry && entry[:fingerprint] == fingerprint
+
+        data = deep_freeze(load_yaml_files(path))
+        @cache[path.to_s] = { fingerprint: fingerprint, data: data }
+        data
+      end
+
+      def reloading?
+        Rails.application.config.respond_to?(:enable_reloading) && Rails.application.config.enable_reloading
+      end
+
+      def yaml_fingerprint(path)
+        Dir.glob(File.join(path, '*.yml')).sort.map { |file| [file, File.mtime(file).to_f] }
+      end
+
+      def deep_freeze(object)
+        case object
+        when Hash then object.each_value { |value| deep_freeze(value) }
+        when Array then object.each { |value| deep_freeze(value) }
+        end
+        object.freeze
+      end
+
       def load_yaml_files(path)
         return [] unless Dir.exist?(path)
 
-        Dir.glob(File.join(path, '*.yml')).filter_map do |file|
+        Dir.glob(File.join(path, '*.yml')).sort.filter_map do |file|
           YAML.load_file(file)
         rescue Psych::SyntaxError => e
           Rails.logger.error("LatoCms: Failed to parse YAML file #{file}: #{e.message}")

data/app/views/lato_cms/media/_form_update.html.erb

@@ -5,15 +5,17 @@
   <%# Two tabs: the metadata form, and the file swap — same media, but editing
       its name is a local change while replacing its file edits every page
       using it, so they don't share a submit button. %>
-  <ul class="nav nav-tabs mb-3">
-    <li class="nav-item">
-      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#<%= tab_id %>_details" type="button">
+  <ul class="nav nav-tabs mb-3" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#<%= tab_id %>_details" type="button"
+              role="tab" id="<%= tab_id %>_details_tab" aria-controls="<%= tab_id %>_details" aria-selected="true">
         <%= t('lato_cms.media_update_tab_details') %>
       </button>
     </li>
     <% if lato_cms_admin? %>
-      <li class="nav-item">
-        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= tab_id %>_replace" type="button">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= tab_id %>_replace" type="button"
+                role="tab" id="<%= tab_id %>_replace_tab" aria-controls="<%= tab_id %>_replace" aria-selected="false">
           <%= t('lato_cms.media_replace_file_title') %>
         </button>
       </li>
@@ -21,7 +23,7 @@
   </ul>
 
   <div class="tab-content">
-    <div class="tab-pane fade show active" id="<%= tab_id %>_details">
+    <div class="tab-pane fade show active" id="<%= tab_id %>_details" role="tabpanel" aria-labelledby="<%= tab_id %>_details_tab">
       <%= form_with model: media, url: lato_cms.media_update_action_path(media), method: :patch, data: { turbo_frame: '_self', controller: 'lato-form lato-cms-reload-on-modal-close' } do |form| %>
         <%= lato_form_notices class: %w[mb-3] %>
         <%= lato_form_errors media, class: %w[mb-3] %>
@@ -64,7 +66,7 @@
     </div>
 
     <% if lato_cms_admin? %>
-      <div class="tab-pane fade" id="<%= tab_id %>_replace">
+      <div class="tab-pane fade" id="<%= tab_id %>_replace" role="tabpanel" aria-labelledby="<%= tab_id %>_replace_tab">
         <%= render 'lato_cms/media/form_replace_file', media: media %>
       </div>
     <% end %>

data/app/views/lato_cms/media/_translations_field.html.erb

@@ -4,12 +4,14 @@
 <% label = t("lato_cms.media_#{attribute}") %>
 
 <div class="mb-3">
-  <label class="form-label"><%= label %></label>
+  <div class="form-label" id="<%= dom_id(media, "#{attribute}_label") %>"><%= label %></div>
 
-  <ul class="nav nav-tabs">
+  <ul class="nav nav-tabs" role="tablist" aria-labelledby="<%= dom_id(media, "#{attribute}_label") %>">
     <% LatoCms.config.locales.each_with_index do |locale, index| %>
-      <li class="nav-item">
+      <li class="nav-item" role="presentation">
         <button class="nav-link <%= 'active' if index.zero? %>" data-bs-toggle="tab"
+          role="tab" id="<%= dom_id(media, "#{attribute}_#{locale}_tab") %>" aria-selected="<%= index.zero? %>"
+          aria-controls="<%= dom_id(media, "#{attribute}_#{locale}_pane") %>"
           data-bs-target="#<%= dom_id(media, "#{attribute}_#{locale}_pane") %>" type="button">
           <%= locale_to_flag(locale) %> <%= locale.to_s.upcase %>
         </button>
@@ -19,8 +21,9 @@
 
   <div class="tab-content border border-top-0 rounded-bottom p-3">
     <% LatoCms.config.locales.each_with_index do |locale, index| %>
-      <div class="tab-pane fade <%= 'show active' if index.zero? %>" id="<%= dom_id(media, "#{attribute}_#{locale}_pane") %>">
-        <%= lato_form_item_input_text form, :"#{attribute}_#{locale}" %>
+      <div class="tab-pane fade <%= 'show active' if index.zero? %>" id="<%= dom_id(media, "#{attribute}_#{locale}_pane") %>"
+           role="tabpanel" aria-labelledby="<%= dom_id(media, "#{attribute}_#{locale}_tab") %>">
+        <%= lato_form_item_input_text form, :"#{attribute}_#{locale}", 'aria-label': "#{label} (#{locale.to_s.upcase})" %>
       </div>
     <% end %>
   </div>

data/app/views/lato_cms/media/_upload_progress.html.erb

@@ -2,7 +2,9 @@
     submit starts, then fed the real bytes-sent percentage. %>
 <div class="d-none my-3" data-lato-cms-upload-target="progress">
   <div class="progress" style="height: 6px;">
-    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;" role="progressbar" data-lato-cms-upload-target="bar"></div>
+    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;" role="progressbar"
+         aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="<%= progress_label_id = "lato-cms-upload-label-#{SecureRandom.hex(4)}" %>"
+         data-lato-cms-upload-target="bar"></div>
   </div>
-  <div class="small text-muted mt-1" data-lato-cms-upload-target="label">0%</div>
+  <div class="small text-muted mt-1" id="<%= progress_label_id %>" role="status" aria-live="polite" data-lato-cms-upload-target="label">0%</div>
 </div>

data/app/views/lato_cms/media/picker_action.html.erb

@@ -5,21 +5,23 @@
        data-lato-cms-media-picker-multiple-value="<%= multiple %>"
        data-lato-cms-media-picker-selected-label-value="<%= t('lato_cms.media_picker_selected_label') %>">
 
-    <ul class="nav nav-tabs mb-3">
-      <li class="nav-item">
-        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#lato-cms-media-picker-browse" type="button">
+    <ul class="nav nav-tabs mb-3" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#lato-cms-media-picker-browse" type="button"
+                role="tab" id="lato-cms-media-picker-browse-tab" aria-controls="lato-cms-media-picker-browse" aria-selected="true">
           <%= t('lato_cms.media_picker_tab_browse') %>
         </button>
       </li>
-      <li class="nav-item">
-        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#lato-cms-media-picker-upload" type="button">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#lato-cms-media-picker-upload" type="button"
+                role="tab" id="lato-cms-media-picker-upload-tab" aria-controls="lato-cms-media-picker-upload" aria-selected="false">
           <%= t('lato_cms.media_picker_tab_upload') %>
         </button>
       </li>
     </ul>
 
     <div class="tab-content">
-      <div class="tab-pane fade show active" id="lato-cms-media-picker-browse">
+      <div class="tab-pane fade show active" id="lato-cms-media-picker-browse" role="tabpanel" aria-labelledby="lato-cms-media-picker-browse-tab">
         <%= form_with url: lato_cms.media_picker_action_path, method: :get, data: { turbo_frame: params[:frame_id] } do %>
           <%= hidden_field_tag :frame_id, params[:frame_id] %>
           <%= hidden_field_tag :multiple, multiple %>
@@ -32,8 +34,9 @@
                   class: "btn btn-sm #{params[:type] == type ? 'btn-primary' : 'btn-outline-secondary'}", data: { turbo_frame: params[:frame_id] } %>
               <% end %>
             </div>
-            <%= text_field_tag :q, params[:q], class: 'form-control form-control-sm', placeholder: t('lato_cms.media_search_placeholder') %>
-            <button type="submit" class="btn btn-sm btn-outline-primary"><i class="bi bi-search"></i></button>
+            <%= search_field_tag :q, params[:q], class: 'form-control form-control-sm', placeholder: t('lato_cms.media_search_placeholder'),
+              'aria-label': t('lato_cms.media_search_label') %>
+            <button type="submit" class="btn btn-sm btn-outline-primary" aria-label="<%= t('lato_cms.media_search_cta') %>"><i class="bi bi-search" aria-hidden="true"></i></button>
           </div>
         <% end %>
 
@@ -45,7 +48,11 @@
         <% else %>
           <div class="lato-cms-media-picker__grid mb-3" data-lato-cms-media-picker-target="grid">
             <% @media.each do |media| %>
-              <div class="lato-cms-media-picker__item"
+              <%# A button: reachable and operable from the keyboard. In
+                  multiple mode aria-pressed carries the selection state. %>
+              <button type="button" class="lato-cms-media-picker__item"
+                   aria-label="<%= t('lato_cms.media_field_select', name: media.name) %> (<%= t("lato_cms.media_type_#{media.media_type}", default: media.media_type) %>)"
+                   <% if multiple %>aria-pressed="false"<% end %>
                    data-media-id="<%= media.id %>"
                    data-media-name="<%= media.name %>"
                    data-media-thumb="<%= media.thumbnail_url %>"
@@ -55,8 +62,8 @@
                    data-action="click->lato-cms-media-picker#select"
                    data-lato-cms-media-picker-target="item">
                 <%= lato_cms_media_thumb(media, size: 100) %>
-                <span class="small text-truncate d-block"><%= media.name %></span>
-              </div>
+                <span class="small text-truncate d-block" aria-hidden="true"><%= media.name %></span>
+              </button>
             <% end %>
           </div>
 
@@ -65,7 +72,7 @@
 
         <% if multiple %>
           <div class="d-flex justify-content-between align-items-center mt-2">
-            <span data-lato-cms-media-picker-target="selectedCount">0 <%= t('lato_cms.media_picker_selected_label') %></span>
+            <span data-lato-cms-media-picker-target="selectedCount" role="status" aria-live="polite">0 <%= t('lato_cms.media_picker_selected_label') %></span>
             <button type="button" class="btn btn-primary" data-action="lato-cms-media-picker#confirm" data-lato-cms-media-picker-target="confirmButton" disabled>
               <%= t('lato_cms.media_picker_confirm') %>
             </button>
@@ -73,8 +80,8 @@
         <% end %>
       </div>
 
-      <div class="tab-pane fade" id="lato-cms-media-picker-upload">
-        <div data-lato-cms-media-picker-target="uploadNotice"></div>
+      <div class="tab-pane fade" id="lato-cms-media-picker-upload" role="tabpanel" aria-labelledby="lato-cms-media-picker-upload-tab">
+        <div data-lato-cms-media-picker-target="uploadNotice" role="status" aria-live="polite"></div>
         <%# Name/alt text are intentionally not collected here: they default
             to the filename on upload and are only ever edited afterwards
             from the Media library's own edit form.

data/app/views/lato_cms/media/show.html.erb

@@ -1,4 +1,5 @@
-<%= lato_page_head @media.name, [
+<%# h(): the name is user content and lato_page_head renders it raw. %>
+<%= lato_page_head h(@media.name), [
   { label: t('lato_cms.media_index_title'), path: lato_cms.media_path },
   { label: @media.name }
 ] %>

data/app/views/lato_cms/pages/_component_accordion.html.erb

@@ -38,13 +38,13 @@
                 <div class="d-flex align-items-center gap-3">
                   <div class="form-check form-switch m-0">
                     <%= hidden_field_tag :enabled, '0' %>
-                    <%= check_box_tag :enabled, '1', enabled_component, class: 'form-check-input', id: "toggle-#{accordion_id}", onchange: 'this.form.requestSubmit()', 'aria-label': t('lato_cms.component_enabled_label'), data: { lato_cms_component_toggle_target: 'checkbox' } %>
+                    <%= check_box_tag :enabled, '1', enabled_component, class: 'form-check-input', id: "toggle-#{accordion_id}", 'aria-label': t('lato_cms.component_enabled_label'), data: { lato_cms_component_toggle_target: 'checkbox', action: 'change->lato-cms-component-toggle#submit' } %>
                   </div>
                   <div class="d-flex align-items-center gap-2 small fw-medium <%= enabled_component ? 'text-success' : 'text-muted' %>" data-lato-cms-component-toggle-target="stateWrapper">
                     <i class="<%= enabled_component ? 'bi bi-eye' : 'bi bi-eye-slash' %>" data-lato-cms-component-toggle-target="stateIcon"></i>
                     <span data-lato-cms-component-toggle-target="stateLabel"><%= enabled_component ? t('lato_cms.component_active_label') : t('lato_cms.component_inactive_label') %></span>
                   </div>
-                  <span data-lato-cms-component-toggle-target="status"></span>
+                  <span data-lato-cms-component-toggle-target="status" role="status" aria-live="polite"></span>
                 </div>
               <% end %>
             <% end %>
@@ -52,8 +52,9 @@
 
           <% if clonable_translations.any? %>
             <div class="dropdown flex-shrink-0" data-controller="lato-tooltip" title="<%= t('lato_cms.component_clone_cta') %>">
-              <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                <i class="bi bi-files"></i>
+              <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="dropdown" aria-expanded="false"
+                      aria-label="<%= t('lato_cms.component_clone_cta') %>">
+                <i class="bi bi-files" aria-hidden="true"></i>
               </button>
               <ul class="dropdown-menu dropdown-menu-end">
                 <% clonable_translations.each do |sibling| %>
@@ -93,9 +94,14 @@
           <div data-lato-cms-component-toggle-target="fieldsContainer" class="<%= enabled_component ? '' : 'd-none' %>">
         <% end %>
           <%= form_with url: lato_cms.pages_save_fields_action_path(page), method: :post, multipart: true,
-              data: { turbo: false, controller: 'lato-cms-component-form' } do |form| %>
+              data: {
+                turbo: false, controller: 'lato-cms-component-form',
+                lato_cms_component_form_saving_label_value: t('lato_cms.fields_saving'),
+                lato_cms_component_form_saved_label_value: t('lato_cms.fields_saved'),
+                lato_cms_component_form_failed_label_value: t('lato_cms.fields_save_failed'),
+                lato_cms_component_form_error_label_value: t('lato_cms.fields_save_error')
+              } do |form| %>
             <%= hidden_field_tag :template_component_id, tc[:template_component_id] %>
-            <%= hidden_field_tag :component_id, tc[:component_id] %>
 
             <% if tc[:repeater] %>
               <%= render 'lato_cms/pages/repeater', tc: tc, component_fields: component_fields %>
@@ -103,7 +109,7 @@
               <% tc[:fields].each do |field_id, field_config| %>
                 <% page_field = component_fields.find { |f| f.field_id == field_id } %>
 
-                <div class="mb-3">
+                <div class="mb-3" data-lato-cms-persisted-field-id="<%= field_id %>">
                   <%# The dom id prefix carries the template component: every
                       component of the page is rendered at once, and two of them
                       can expose the same field id (a template mounting one
@@ -124,7 +130,7 @@
             <% end %>
 
             <div class="d-flex justify-content-end align-items-center gap-3 mt-1">
-              <span data-lato-cms-component-form-target="status"></span>
+              <span data-lato-cms-component-form-target="status" role="status" aria-live="polite"></span>
               <button type="submit" class="btn btn-sm btn-success" data-lato-cms-component-form-target="submitBtn">
                 <i class="bi bi-check-lg me-1"></i><%= t('lato_cms.fields_save_component') %>
               </button>

data/app/views/lato_cms/pages/_form_update.html.erb

@@ -24,6 +24,11 @@
       <% template_options = [[t('lato_cms.form_no_template_option'), '']] + LatoCms::TemplateManager.template_options %>
       <%= lato_form_item_label form, :template_id, t('lato_cms.form_template') %>
       <%= lato_form_item_input_select form, :template_id, template_options %>
+      <% if page.persisted? && page.fields.exists? %>
+        <div class="form-text">
+          <i class="bi bi-info-circle me-1" aria-hidden="true"></i><%= t('lato_cms.form_template_change_warning') %>
+        </div>
+      <% end %>
       <% if page.template_id.present? && !page.template_available? %>
         <div class="form-text text-danger">
           <i class="bi bi-exclamation-triangle me-1"></i>

data/app/views/lato_cms/pages/_repeater_item.html.erb

@@ -7,10 +7,12 @@
     <button type="button" class="lato-cms-repeater-item__toggle btn btn-link p-0 flex-grow-1 text-start text-decoration-none text-body <%= 'collapsed' unless expanded %>"
         data-bs-toggle="collapse" data-bs-target="#<%= collapse_id %>" aria-expanded="<%= expanded %>" aria-controls="<%= collapse_id %>">
       <i class="bi bi-chevron-down me-2 small"></i>
-      <strong class="small"><%= tc[:name] %> #<span data-lato-cms-repeater-target="position"><%= item_index.to_i + 1 %></span></strong>
+      <strong class="small" id="repeater-title-<%= item_id %>"><%= tc[:name] %> #<span data-lato-cms-repeater-target="position"><%= item_index.to_i + 1 %></span></strong>
     </button>
-    <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0" data-action="lato-cms-repeater#remove">
-      <i class="bi bi-trash me-1"></i><%= t('lato_cms.repeater_remove_item') %>
+    <%# Named "Remove <component> #n": the title span keeps the live position. %>
+    <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0" data-action="lato-cms-repeater#remove"
+        id="repeater-remove-<%= item_id %>" aria-labelledby="repeater-remove-<%= item_id %> repeater-title-<%= item_id %>">
+      <i class="bi bi-trash me-1" aria-hidden="true"></i><%= t('lato_cms.repeater_remove_item') %>
     </button>
   </div>
 
@@ -25,7 +27,7 @@
         <% input_name_prefix = "repeater_items[#{item_id}][#{field_id}]" %>
         <% dom_id_prefix = "repeater_items_#{item_id}_#{field_id}" %>
 
-        <div class="mb-3">
+        <div class="mb-3" data-lato-cms-persisted-field-id="<%= item_id %>.<%= field_id %>">
           <%= lato_cms_render_field(
               field_id: field_id,
               field_config: field_config,

data/app/views/lato_cms/pages/_translations.html.erb

@@ -28,7 +28,8 @@
               class: 'd-flex align-items-center gap-2 flex-grow-1 justify-content-end' do %>
               <%= select_tag :translation_page_id,
                 options_from_collection_for_select(candidates, :id, :title),
-                class: 'form-select form-select-sm', style: 'max-width: 260px;' %>
+                class: 'form-select form-select-sm', style: 'max-width: 260px;',
+                id: "translation_page_id_#{locale}", 'aria-label': t('lato_cms.translation_select_label', locale: locale.upcase) %>
               <%= submit_tag t('lato_cms.translation_link_cta'), class: 'btn btn-sm btn-outline-primary' %>
             <% end %>
           <% else %>

data/app/views/lato_cms/pages/fields/_color.html.erb

@@ -1,20 +1,28 @@
 <% label = field_config['name'] || field_id.humanize %>
 <% required = field_config['required'] == true %>
-<% current_value = page_field&.value.presence || '#000000' %>
+<% current_value = page_field&.value.presence %>
 <% input_name = lato_cms_field_input_name(field_id, input_name_prefix: local_assigns[:input_name_prefix]) %>
 <% input_id = lato_cms_field_dom_id(field_id, dom_id_prefix: local_assigns[:dom_id_prefix]) %>
 
 <label class="form-label" for="<%= input_id %>">
   <%= label %><%= ' *' if required %>
 </label>
-<div class="d-flex align-items-center gap-2" data-controller="lato-cms-color-field">
+<%# The submitted value lives in the hidden input: a native color input always
+    holds a color (#000000 when empty), so an untouched field used to be saved
+    as black. It stays empty until a color is picked, and can be cleared. %>
+<div class="d-flex align-items-center gap-2" data-controller="lato-cms-color-field"
+     data-lato-cms-color-field-empty-label-value="<%= t('lato_cms.field_color_empty') %>">
+  <input type="hidden" name="<%= input_name %>" value="<%= current_value %>" data-lato-cms-color-field-target="value">
   <input type="color"
     class="form-control form-control-color"
-    name="<%= input_name %>"
     id="<%= input_id %>"
-    value="<%= current_value %>"
+    value="<%= current_value || '#000000' %>"
     data-lato-cms-color-field-target="input"
     data-action="input->lato-cms-color-field#update"
-    <%= 'required' if required %>>
-  <code class="text-muted small" data-lato-cms-color-field-target="hex"><%= current_value.upcase %></code>
+    <%= 'aria-required="true"'.html_safe if required %>>
+  <code class="text-muted small" data-lato-cms-color-field-target="hex" aria-live="polite"><%= current_value&.upcase || t('lato_cms.field_color_empty') %></code>
+  <% unless required %>
+    <button type="button" class="btn btn-sm btn-link px-0" data-action="lato-cms-color-field#clear"
+            aria-label="<%= t('lato_cms.field_color_clear') %>: <%= label %>"><%= t('lato_cms.field_color_clear') %></button>
+  <% end %>
 </div>

data/app/views/lato_cms/pages/fields/_json.html.erb

@@ -11,7 +11,9 @@
 <label class="form-label" for="<%= input_id %>">
   <%= label %><%= ' *' if required %>
 </label>
-<div data-controller="lato-cms-json-field">
+<div data-controller="lato-cms-json-field"
+     data-lato-cms-json-field-valid-label-value="<%= t('lato_cms.field_json_valid') %>"
+     data-lato-cms-json-field-invalid-label-value="<%= t('lato_cms.field_json_invalid', error: '%{error}') %>">
   <textarea
     class="form-control font-monospace"
     name="<%= input_name %>"
@@ -19,7 +21,8 @@
     rows="<%= settings['rows'] || 6 %>"
     data-lato-cms-json-field-target="input"
     data-action="input->lato-cms-json-field#validate"
+    aria-describedby="<%= input_id %>_status"
     <%= 'required' if required %>
     <% if settings['placeholder'] %>placeholder="<%= settings['placeholder'] %>"<% end %>><%= current_value %></textarea>
-  <div data-lato-cms-json-field-target="status" class="form-text"></div>
+  <div data-lato-cms-json-field-target="status" class="form-text" id="<%= input_id %>_status" role="status" aria-live="polite"></div>
 </div>

data/app/views/lato_cms/pages/fields/_media_field.html.erb

@@ -12,11 +12,17 @@
 <% picker_type = kind == 'file' ? nil : kind %>
 <% wide = !multiple && %w[image video].include?(kind) %>
 
-<label class="form-label">
+<%# Not a <label>: there is no single input to point it at, so the field is
+    a group labelled by this element. %>
+<div class="form-label" id="<%= dom_id %>_label">
   <%= label %><%= ' *' if required %>
-</label>
+</div>
 
-<div data-controller="lato-cms-media-field<%= ' lato-cms-media-reorder' if multiple %>"
+<div role="group" aria-labelledby="<%= dom_id %>_label"
+     data-controller="lato-cms-media-field<%= ' lato-cms-media-reorder' if multiple %>"
+     data-lato-cms-media-field-remove-label-value="<%= t('lato_cms.field_file_remove') %>"
+     data-lato-cms-media-field-move-before-label-value="<%= t('lato_cms.media_move_before') %>"
+     data-lato-cms-media-field-move-after-label-value="<%= t('lato_cms.media_move_after') %>"
      data-lato-cms-media-field-kind-value="<%= kind %>"
      data-lato-cms-media-field-multiple-value="<%= multiple %>"
      data-lato-cms-media-field-frame-id-value="<%= frame_id %>"
@@ -57,7 +63,7 @@
             action: 'click->lato-cms-media-field#openPicker',
             action_title: t('lato_cms.media_picker_title'), action_size: 'lg'
           } do %>
-      <i class="bi bi-images"></i>
+      <i class="bi bi-images" aria-hidden="true"></i>
       <span><%= t('lato_cms.media_choose_from_library') %></span>
     <% end %>
   </div>
@@ -65,7 +71,8 @@
   <%# Real-but-hidden input anchors the browser's native required-validation
       bubble (a display:none required input fails silently as "not
       focusable"). Kept in sync with selection state by the Stimulus controller. %>
-  <input type="text" class="visually-hidden" value="<%= current_media.first&.id %>"
+  <input type="text" class="visually-hidden" value="<%= current_media.first&.id %>" tabindex="-1"
+    aria-labelledby="<%= dom_id %>_label"
     data-lato-cms-media-field-target="validationAnchor"
     <%= 'required' if required && current_media.empty? %>>
 </div>

data/app/views/lato_cms/pages/fields/_media_item.html.erb

@@ -16,7 +16,7 @@
     <video controls preload="<%= media.poster_url ? 'none' : 'metadata' %>" poster="<%= media.poster_url %>"
       class="lato-cms-media-field__player" src="<%= media.url %>"></video>
   <% elsif media.thumbnail_url %>
-    <img src="<%= media.thumbnail_url %>" class="lato-cms-media-field__thumb" alt="<%= media.alt_text %>">
+    <img src="<%= media.thumbnail_url %>" class="lato-cms-media-field__thumb" alt="<%= media.alt_text.presence || media.name %>">
   <% else %>
     <div class="lato-cms-media-field__icon"><i class="bi bi-paperclip"></i></div>
   <% end %>
@@ -25,9 +25,20 @@
     <span class="lato-cms-media-field__name"><%= media.name %></span>
   </div>
 
-  <button type="button" class="lato-cms-media-field__remove" title="<%= t('lato_cms.field_file_remove') %>" aria-label="<%= t('lato_cms.field_file_remove') %>" data-action="lato-cms-media-field#remove">
-    <i class="bi bi-x-lg"></i>
+  <button type="button" class="lato-cms-media-field__remove" title="<%= t('lato_cms.field_file_remove') %>" aria-label="<%= t('lato_cms.field_file_remove') %> <%= media.name %>" data-action="lato-cms-media-field#remove">
+    <i class="bi bi-x-lg" aria-hidden="true"></i>
   </button>
+  <% if multiple %>
+    <%# Keyboard alternative to drag & drop reordering. %>
+    <button type="button" class="lato-cms-media-field__move lato-cms-media-field__move--before" title="<%= t('lato_cms.media_move_before') %>"
+      aria-label="<%= t('lato_cms.media_move_before') %> <%= media.name %>" data-action="lato-cms-media-reorder#moveBefore">
+      <i class="bi bi-arrow-left" aria-hidden="true"></i>
+    </button>
+    <button type="button" class="lato-cms-media-field__move lato-cms-media-field__move--after" title="<%= t('lato_cms.media_move_after') %>"
+      aria-label="<%= t('lato_cms.media_move_after') %> <%= media.name %>" data-action="lato-cms-media-reorder#moveAfter">
+      <i class="bi bi-arrow-right" aria-hidden="true"></i>
+    </button>
+  <% end %>
 
   <input type="hidden" name="<%= hidden_name %>" value="<%= media.id %>" data-lato-cms-media-field-target="hiddenInput">
 </div>