lato_cms 3.4.0 → 3.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 063d286f745ed3fb368105241f2b9cc7f753e153620c63bb9020fea5946a7fad
-  data.tar.gz: 8e29ca9e75f3a2e1644facb4e534c21f0fe821c7ddcd72d2bb9bc4a0eb4a8921
+  metadata.gz: ec7709eaa0439b111b7df2111f38417b25d01a1e338ba32d865d955c5a3d0749
+  data.tar.gz: 903e3934c379b277635d4d5aff32dddb584c234f2a1a1bb0a78205482c83ca05
 SHA512:
-  metadata.gz: a94293a1a09313278619701879933a56c2312ac39984a529e5c1b057f3d1bbb3ba0e24e62b23bd4cdd71366c0c25ef305d98c95da57b416b5033fe120773ae7d
-  data.tar.gz: 822724a30d867951066e212a052535899e0f88b9b073667c0b0b8def5f996c86bfccd9c10f28ee6005b1f6747fbd68f713b3bdcc36d2950e4e6ce81563e7f1cb
+  metadata.gz: 48170ff3a508c042bd2ce973a6b47880fa6f4b236a1815a0bf790620a4f4c38ad0565837431078780f95eb8b5825aa7de8b0ff93a97c5b5647123e59f6a8c3bb
+  data.tar.gz: 8095af1aba57f48994f077dec5d109b259d4e33ea3e8b5f73ae9ee585d440a53d79f4bcc4544d81b93ecadea77401b1a48a70b3537cb80b82f641ddbe7bc4a25

data/README.md

@@ -10,27 +10,36 @@ Add required dependencies to your application's Gemfile:
 ```ruby
 # Use lato as application panel
 gem "lato"
+# Lato CMS scopes pages and media by Spaces group
+gem "lato_spaces"
 gem "lato_cms"
 ```
 
-Install gem and run required tasks:
+Install gems and run required tasks:
 
 ```bash
 $ bundle
+$ rails lato_spaces:install:application
+$ rails lato_spaces:install:migrations
 $ rails lato_cms:install:application
 $ rails lato_cms:install:migrations
 $ rails db:migrate
 ```
 
-Mount lato users routes on the **config/routes.rb** file:
+`lato_cms:install:application` writes example templates and components into `config.templates_path`.
+
+Mount the engines in **config/routes.rb**:
 
 ```ruby
 Rails.application.routes.draw do
-  mount LatoCms::Engine => "/lato-users"
+  mount LatoSpaces::Engine => "/lato-spaces"
+  mount LatoCms::Engine => "/lato-cms"
   # ....
 end
 ```
 
+Every CMS controller requires a selected Lato Spaces group (`authenticate_group`): pages and media belong to the selected group, so create a group and select it before using the CMS.
+
 Import Lato Scss on **app/assets/stylesheets/application.scss** file:
 ```scss
 @import 'lato_cms/application';
@@ -38,18 +47,135 @@ Import Lato Scss on **app/assets/stylesheets/application.scss** file:
 // ....
 ```
 
-Import Lato Users Js on **app/javascript/application.js** file:
+Import Lato CMS JavaScript in **app/javascript/application.js**:
 ```js
 import "lato_cms/application";
 
 // ....
 ```
 
+## Roles
+
+Access is controlled by the `lato_cms_admin_role` column of `Lato::User`. Roles come from `config.admin_roles` (default `{ none: 0, operator: 1, admin: 2 }`).
+
+- **operator** (1): access the CMS, edit page fields, enable or disable components, clone components (including "Clone & translate" when an LLM is configured), upload media and edit its metadata, "Regenerate with AI", export the sitemap.
+- **admin** (2): everything above, plus create and update page settings (title, permalink, frontend URL, template), delete pages, manage translation links, replace media files, delete media.
+
+```ruby
+Lato::User.find_by(email: "admin@example.com").update!(lato_cms_admin_role: 2)
+```
+
+Expensive operations (sitemap export, clone component, regenerate media text) are limited to 10 requests per user per minute, counted in `Rails.cache` (`LatoCms::ApplicationController::EXPENSIVE_ACTIONS_RATE_LIMIT`). A memory store limits per process; a null store disables the limit.
+
+Deleting a media item is refused while it is used. An admin can pass `force=true` to the delete endpoint to delete it anyway, which removes it from every field.
+
+## Configuration
+
+```ruby
+LatoCms.configure do |config|
+  config.locales = [:en, :it]
+  config.templates_path = "config/lato_cms"
+  config.media_url_mode = :proxy
+  config.media_max_file_size = 50.megabytes
+end
+```
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `locales` | `[:en]` | Locales available for pages and media alt text/title. |
+| `templates_path` | `"config/lato_cms"` | Templates live in `<path>/templates/*.yml`, components in `<path>/components/*.yml`. |
+| `admin_roles` | `{ none: 0, operator: 1, admin: 2 }` | Role map for `lato_cms_admin_role`. |
+| `media_url_mode` | `:redirect` | `:redirect` or `:proxy` (see Media URLs). |
+| `media_allowed_content_types` | `LatoCms::Config::DEFAULT_MEDIA_ALLOWED_CONTENT_TYPES` | Allowed upload content types; a trailing `*` matches subtypes; `nil` allows everything. Checked server-side on the content type Active Storage identifies. The default covers `image/* video/* audio/*`, PDF, plain text, CSV, zip and office/OpenDocument types. HTML is excluded on purpose. |
+| `media_max_file_size` | `100.megabytes` | Maximum upload size; `nil` means no limit. |
+| `llm_api_url`, `llm_model`, `llm_api_key` | `nil` | OpenAI-compatible endpoint. All three are required to enable LLM features. |
+| `llm_generate_alt_text`, `llm_generate_title` | `true` | Which media attributes the LLM generates. |
+| `llm_alt_text_prompt`, `llm_title_prompt` | `nil` | Custom prompts; placeholders `{languages}` and `{urls}`. |
+| `llm_max_image_size` | `20.megabytes` | Larger images are not sent to the LLM, because the file is read in memory and base64-encoded. |
+
+A `llm_api_url` using plain `http` on a non-local host logs a warning, because the API key travels in clear.
+
+Uploaded SVG and HTML files are served as attachments thanks to the Active Storage defaults (`content_types_to_serve_as_binary`). Do not change those defaults.
+
+## Templates, components and field types
+
+Templates (`<templates_path>/templates/*.yml`) list the components of a page; components (`<templates_path>/components/*.yml`) define fields.
+
+Template components accept `component_id`, `name`, `required: true` (cannot be disabled) and `repeater: true` (alias `repeatable`) with `settings.min` / `settings.max` item counts.
+
+Field types: `string`, `textarea`, `text`, `number`, `date`, `datetime`, `boolean`, `select`, `multiselect`, `color`, `json`, `file`, `image`, `video`, `gallery`, `custom`.
+
+| Type | Supported `settings` | `parsed_value` |
+| --- | --- | --- |
+| `string` | `placeholder`, `maxlength`, `minlength`, `pattern` | String |
+| `textarea` | `rows`, `placeholder`, `maxlength` | String |
+| `text` | none | Sanitized HTML string |
+| `number` | `min`, `max`, `step`, `placeholder` | Integer or Float |
+| `date`, `datetime` | `min`, `max` | `Date`, `DateTime` |
+| `boolean` | none | `true` / `false` |
+| `select`, `multiselect` | `options`: strings or `{ value:, label: }` | String, Array |
+| `color` | none | String (`#rgb` or `#rrggbb`) |
+| `json` | `rows`, `placeholder` | Parsed object |
+| `file` | `multiple` | Media attachments |
+| `image`, `gallery` | `sizes`: named variants with `width`, `height`, `resize` (`limit`, `fit`, `fill`) | Media attachments |
+| `video` | none | Media attachment with poster |
+| `custom` | any, read by your partial; requires `render` | String |
+
+Server-side validation: `required` is enforced for scalar fields (blank values are refused), select/multiselect values must be among the options, numbers must be numeric, colors must be `#rgb` or `#rrggbb`, dates and datetimes must parse. An untouched color field is saved empty, and non-required colors can be cleared. Field types are resolved from the template and component YAML on the server (the component id sent by the client is ignored); saving a template component or field that is not in the page template is refused with a 422. Changing the template of a page hides the fields saved under the old one.
+
+Rich text (`text`) HTML is sanitized on save and on output with an allowlist (`LatoCms::PageField::RICH_TEXT_TAGS` and `RICH_TEXT_ATTRIBUTES`; `style` is reduced to `text-align`).
+
+```yaml
+# config/lato_cms/components/hero.yml
+id: hero
+name: Hero
+fields:
+  title:
+    name: Title
+    type: string
+    required: true
+  cover:
+    name: Cover
+    type: image
+    settings:
+      sizes:
+        thumb: { width: 150, height: 150, resize: fill }
+```
+
+### Generators
+
+```bash
+rails "lato_cms:generate:template[blog_post]"
+rails "lato_cms:generate:component[hero,title:string,cover:image,gallery:gallery]"
+rails "lato_cms:generate:custom_field[icon_note]"
+```
+
+The component generator aborts on an unsupported type. It accepts every built-in type, but not `custom`, which needs a `render` path. The custom field generator creates `app/views/lato_cms/custom_fields/_icon_note.html.erb`; use it with `type: custom` and `render: lato_cms/custom_fields/icon_note`. Custom partials receive `field_id`, `field_config`, `page_field`, `input_name_prefix`, `dom_id_prefix` and `persisted_field_id`, and must build input names and ids with `lato_cms_field_input_name` and `lato_cms_field_dom_id` so they work inside repeaters. See the user documentation in the dummy app for a full example.
+
+## LLM features
+
+With an LLM configured, Lato CMS generates image alt text and titles (after upload and with "Regenerate with AI") and offers "Clone & translate" for component text fields (`string`, `textarea`, `text`).
+
+Instructions are sent as the system message and editor content as delimited data (`<data>...</data>`) in the user message. Generated media texts are capped at 500 characters, and translated `text` fields go through the rich text sanitizer. An LLM can still be steered by the content it reads (for example text inside an image), so review generated alt text, titles and translations, and enable LLM features only with trusted editors.
+
 ## Content security
 
 Rich text fields preserve common formatting, links, and images. HTML is sanitized on save and when rendered or returned through `parsed_value` and JSON, including existing content and AI translations. Scripts, event handlers, unsafe URL protocols, and unsupported elements or attributes are removed. Applications should consume `parsed_value` rather than render the raw database `value` as HTML.
 
-The read-only JSON API under `/api/pages` is public and requires no login. Its `group_id` parameter selects content; it is not an authorization token. Pages, translations, fields, and attachment URLs returned by this API must be suitable for public access. Applications with private content must restrict access to these endpoints in the host application or reverse proxy.
+## Public API
+
+```
+GET /lato-cms/api/pages?group_id=ID&locale=xx      # list, without fields
+GET /lato-cms/api/pages/:id_or_permalink?group_id=ID   # with fields
+```
+
+A missing `group_id` returns 400, an unknown page 404. A page contains `id`, `title`, `permalink`, `locale`, `template_id`, `template_name`, `frontend_url` (only http/https values, otherwise `null`), `translations` (`locale => { id, permalink, frontend_url }`), `created_at`, `updated_at` and, on show, `fields`. `fields` is keyed by template component id with `{ component_id, name, fields }`; only enabled components are included. For a regular component `fields` is a hash of `field_id => { id, field_id, field_type, field_name, required, value, attachments }`; for a repeater it is an array of `{ id, fields }`. Attachments expose `media_id`, `name`, `alt_text`, `title`, `filename`, `content_type`, `byte_size`, `url`; images and galleries add `sizes`, videos add `poster_url`.
+
+**Exposure warning.** The API is public and unauthenticated, keyed by sequential group ids, and has no draft or published state. Every page and media URL of every group is readable by anyone who can reach the endpoint, and signed blob URLs in redirect mode do not expire. Protect it at the host level (do not expose the route publicly, add a reverse proxy rule, or use Rack middleware and rate limiting) until per-group tokens and a publish state exist.
+
+## Sitemap export
+
+Pages index, actions menu, "Export sitemap (CSV)" runs a `Lato::Operation` that produces a CSV with the columns `locale,title,permalink,frontend_url` for all pages of the current group. Cells starting with `=`, `+`, `-`, `@`, tab or CR are prefixed with an apostrophe to prevent formula injection.
 
 ## Media URLs
 
@@ -89,14 +215,16 @@ the default for a video would otherwise turn opening its address into a download
 Clone repository, install dependencies, run migrations and start:
 
 ```shell
-$ git clone https://github.com/Lato-GAM/lato_cms
+$ git clone https://github.com/Lato-org/lato_cms
 $ cd lato_cms
 $ bundle
-$ rails db:migrate
-$ rails db:seed
-$ foreman start -f Procfile.dev
+$ bin/rails db:migrate
+$ bin/rails db:seed
+$ bin/rails server
 ```
 
+`bin/rails` runs the dummy app in `test/dummy`.
+
 ## Publish
 
 ```shell

data/app/assets/javascripts/lato_cms/controllers/lato_cms_advanced_editor_controller.js

@@ -1,28 +1,80 @@
 import { Controller } from "@hotwired/stimulus"
 
+const COMPONENT_FORM = 'form[data-controller~="lato-cms-component-form"]'
+
 export default class extends Controller {
   static targets = ["editorCol", "reopenBtn"]
-  static values = { listPath: String }
+  static values = { listPath: String, unsavedMessage: String }
 
   isSidebarOpen = true
 
   // ─── Advanced full-screen editor is the only view ────────────────────────────
   // The full-screen layout is rendered server-side (--active class + body CSS) so
-  // it survives re-renders (e.g. component clone) with no flash. JS only wires up
-  // Escape-to-back and the sidebar toggle.
+  // it survives re-renders (e.g. component clone) with no flash. JS wires up
+  // Escape-to-back, the unsaved-changes guard and the sidebar toggle.
 
   connect() {
-    // Escape returns to the pages list instead of exiting to a base view.
-    this._escHandler = (e) => { if (e.key === 'Escape') this.back() }
+    // Each component is its own form: the ones edited since their last save.
+    this.dirtyForms = new Set()
+
+    this._escHandler = (e) => this.onKeydown(e)
+    this._changeHandler = (e) => this.markDirty(e)
+    this._savedHandler = (e) => this.dirtyForms.delete(e.target.closest(COMPONENT_FORM))
+    this._beforeUnloadHandler = (e) => {
+      if (!this.hasUnsavedChanges()) return
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    this._beforeVisitHandler = (e) => {
+      if (this.hasUnsavedChanges() && !window.confirm(this.unsavedMessageValue)) e.preventDefault()
+    }
+
     document.addEventListener('keydown', this._escHandler)
+    this.element.addEventListener('input', this._changeHandler)
+    this.element.addEventListener('change', this._changeHandler)
+    this.element.addEventListener('lato-cms:fields-save-success', this._savedHandler)
+    window.addEventListener('beforeunload', this._beforeUnloadHandler)
+    document.addEventListener('turbo:before-visit', this._beforeVisitHandler)
   }
 
   disconnect() {
     document.removeEventListener('keydown', this._escHandler)
+    this.element.removeEventListener('input', this._changeHandler)
+    this.element.removeEventListener('change', this._changeHandler)
+    this.element.removeEventListener('lato-cms:fields-save-success', this._savedHandler)
+    window.removeEventListener('beforeunload', this._beforeUnloadHandler)
+    document.removeEventListener('turbo:before-visit', this._beforeVisitHandler)
+  }
+
+  markDirty(event) {
+    const form = event.target.closest?.(COMPONENT_FORM)
+    if (form) this.dirtyForms.add(form)
+  }
+
+  hasUnsavedChanges() {
+    return this.dirtyForms.size > 0
+  }
+
+  // Escape goes back to the list only when nothing else owns the key: an
+  // open modal, dropdown or tooltip closes itself on Escape, and Escape while
+  // typing must not navigate away.
+  onKeydown(e) {
+    if (e.key !== 'Escape' || e.defaultPrevented) return
+    if (document.querySelector('.modal.show, .dropdown-menu.show')) return
+
+    const active = document.activeElement
+    if (active && (active.isContentEditable || active.matches('input, textarea, select'))) return
+
+    this.back()
   }
 
   back() {
-    if (this.hasListPathValue) window.location.href = this.listPathValue
+    if (!this.hasListPathValue) return
+    if (this.hasUnsavedChanges() && !window.confirm(this.unsavedMessageValue)) return
+
+    // Already confirmed: skip the beforeunload prompt.
+    this.dirtyForms.clear()
+    window.location.href = this.listPathValue
   }
 
   // ─── Toggle sidebar within advanced mode ─────────────────────────────────────

data/app/assets/javascripts/lato_cms/controllers/lato_cms_color_field_controller.js

@@ -1,9 +1,19 @@
 import { Controller } from "@hotwired/stimulus"
 
+// The hidden `value` target is what the form submits; the native color input
+// is only the picker, since it can never be empty.
 export default class extends Controller {
-  static targets = ["input", "hex"]
+  static targets = ["input", "value", "hex"]
+  static values = { emptyLabel: String }
 
   update() {
+    this.valueTarget.value = this.inputTarget.value
     this.hexTarget.textContent = this.inputTarget.value.toUpperCase()
   }
+
+  clear() {
+    this.valueTarget.value = ""
+    this.hexTarget.textContent = this.emptyLabelValue
+    this.element.dispatchEvent(new Event("change", { bubbles: true }))
+  }
 }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_component_form_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["submitBtn", "status"]
+  static values = { savingLabel: String, savedLabel: String, failedLabel: String, errorLabel: String }
 
   connect() {
     this.element.addEventListener("submit", this.handleSubmit.bind(this))
@@ -15,7 +16,9 @@ export default class extends Controller {
     const originalHTML = submitBtn.innerHTML
 
     submitBtn.disabled = true
-    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving...'
+    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>'
+    submitBtn.append(document.createTextNode(this.savingLabelValue))
+    this.clearFieldErrors()
 
     try {
       const formData = new FormData(form)
@@ -31,24 +34,63 @@ export default class extends Controller {
       const data = await response.json()
 
       if (response.ok) {
-        this.showStatus('Fields saved successfully', 'success')
+        this.showStatus(data.message || this.savedLabelValue, 'success')
         form.dispatchEvent(new CustomEvent('lato-cms:fields-save-success', {
           bubbles: true,
           detail: { success: true, data }
         }))
         this.refreshPreview()
       } else {
-        const errorMsg = data.errors?.map(e => `${e.field_id}: ${e.errors.join(', ')}`).join('; ') || 'Failed to save fields'
+        const errors = data.errors || []
+        const errorMsg = errors.map(e => `${e.field_name || e.field_id}: ${e.errors.join(', ')}`).join('; ') || data.error || this.failedLabelValue
         this.showStatus(errorMsg, 'danger')
+        this.showFieldErrors(errors)
       }
     } catch (error) {
-      this.showStatus('An error occurred while saving', 'danger')
+      this.showStatus(this.errorLabelValue, 'danger')
     } finally {
       submitBtn.disabled = false
       submitBtn.innerHTML = originalHTML
     }
   }
 
+  // Marks each failing field (its wrapper carries the persisted field id)
+  // invalid, links the message to its inputs via aria-describedby and moves
+  // focus to the first one, so the error is not only a line at the bottom.
+  showFieldErrors(errors) {
+    const wrappers = Array.from(this.element.querySelectorAll('[data-lato-cms-persisted-field-id]'))
+    let firstInput = null
+
+    errors.forEach((error, index) => {
+      const wrapper = wrappers.find(element => element.dataset.latoCmsPersistedFieldId === error.field_id)
+      if (!wrapper) return
+
+      const feedback = document.createElement('div')
+      feedback.id = `lato-cms-field-error-${Date.now()}-${index}`
+      feedback.className = 'invalid-feedback d-block lato-cms-field-error'
+      feedback.textContent = error.errors.join(', ')
+      wrapper.append(feedback)
+
+      wrapper.querySelectorAll('input:not([type="hidden"]), select, textarea, [contenteditable="true"]').forEach(input => {
+        input.classList.add('is-invalid')
+        input.setAttribute('aria-invalid', 'true')
+        input.setAttribute('aria-describedby', feedback.id)
+        firstInput ||= input
+      })
+    })
+
+    firstInput?.focus()
+  }
+
+  clearFieldErrors() {
+    this.element.querySelectorAll('.lato-cms-field-error').forEach(element => element.remove())
+    this.element.querySelectorAll('[aria-invalid="true"]').forEach(input => {
+      input.classList.remove('is-invalid')
+      input.removeAttribute('aria-invalid')
+      input.removeAttribute('aria-describedby')
+    })
+  }
+
   refreshPreview() {
     const iframe = document.querySelector('[data-lato-cms-page-preview-target="iframe"]')
     if (iframe && iframe.src) {
@@ -89,10 +131,11 @@ export default class extends Controller {
 
     this.statusTarget.innerHTML = `
       <span class="d-inline-flex align-items-center gap-1 small ${color} lato-cms-component-form__status">
-        <i class="bi ${icon}"></i>
+        <i class="bi ${icon}" aria-hidden="true"></i>
       </span>`
     this.statusTarget.firstElementChild.append(document.createTextNode(message))
 
+    // Only success fades out: an error stays until the next save.
     if (isSuccess) {
       this._statusTimeout = setTimeout(() => {
         const msg = this.statusTarget.querySelector('.lato-cms-component-form__status')

data/app/assets/javascripts/lato_cms/controllers/lato_cms_component_toggle_controller.js

@@ -10,6 +10,12 @@ export default class extends Controller {
     errorLabel: String
   }
 
+  // Checkbox change -> submit, handled by toggle below (no inline onchange,
+  // so the page works under a strict CSP).
+  submit (event) {
+    event.target.form?.requestSubmit()
+  }
+
   async toggle (event) {
     event.preventDefault()
 

data/app/assets/javascripts/lato_cms/controllers/lato_cms_json_field_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["input", "status"]
+  static values = { validLabel: String, invalidLabel: String }
 
   connect() {
     this.validate()
@@ -17,10 +18,10 @@ export default class extends Controller {
 
     try {
       JSON.parse(value)
-      this.statusTarget.textContent = "Valid JSON"
+      this.statusTarget.textContent = this.validLabelValue
       this.statusTarget.className = "form-text text-success"
     } catch (e) {
-      this.statusTarget.textContent = "Invalid JSON: " + e.message
+      this.statusTarget.textContent = this.invalidLabelValue.replace("%{error}", e.message)
       this.statusTarget.className = "form-text text-danger"
     }
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_media_field_controller.js

@@ -8,7 +8,16 @@ import { Controller } from '@hotwired/stimulus'
 // event correlated by this field's own turbo-frame id.
 export default class extends Controller {
   static targets = ['grid', 'addTile', 'validationAnchor']
-  static values = { kind: String, multiple: Boolean, frameId: String, hiddenName: String, fieldId: String }
+  static values = {
+    kind: String,
+    multiple: Boolean,
+    frameId: String,
+    hiddenName: String,
+    fieldId: String,
+    removeLabel: String,
+    moveBeforeLabel: String,
+    moveAfterLabel: String
+  }
 
   connect () {
     this.onMediaSelected = this.onMediaSelected.bind(this)
@@ -65,11 +74,19 @@ export default class extends Controller {
     event.detail.items.forEach(item => this.appendItem(item))
 
     this.syncEmptyAndValidation()
+    this.notifyChange()
   }
 
   remove (event) {
     event.currentTarget.closest('.lato-cms-media-field__item')?.remove()
     this.syncEmptyAndValidation()
+    this.notifyChange()
+  }
+
+  // The selection lives in hidden inputs, which fire no input event: tell the
+  // editor's unsaved-changes guard explicitly.
+  notifyChange () {
+    this.element.dispatchEvent(new Event('change', { bubbles: true }))
   }
 
   afterSave (event) {
@@ -114,11 +131,20 @@ export default class extends Controller {
         <span class="lato-cms-media-field__name"></span>
       </div>
       <button type="button" class="lato-cms-media-field__remove" data-action="lato-cms-media-field#remove">
-        <i class="bi bi-x-lg"></i>
+        <i class="bi bi-x-lg" aria-hidden="true"></i>
       </button>
       <input type="hidden">`
     wrapper.prepend(this.previewElement(item))
     wrapper.querySelector('.lato-cms-media-field__name').textContent = item.name
+    const removeButton = wrapper.querySelector('.lato-cms-media-field__remove')
+    removeButton.title = this.removeLabelValue
+    removeButton.setAttribute('aria-label', `${this.removeLabelValue} ${item.name}`)
+    if (this.multipleValue) {
+      removeButton.after(
+        this.moveButton('before', this.moveBeforeLabelValue, item.name),
+        this.moveButton('after', this.moveAfterLabelValue, item.name)
+      )
+    }
     const input = wrapper.querySelector('input')
     input.name = this.hiddenNameValue
     input.value = item.id
@@ -144,6 +170,7 @@ export default class extends Controller {
       const image = document.createElement('img')
       image.src = item.thumbnailUrl || item.url
       image.className = 'lato-cms-media-field__thumb'
+      image.alt = item.name || ''
       return image
     }
     const icon = document.createElement('div')
@@ -152,6 +179,17 @@ export default class extends Controller {
     return icon
   }
 
+  moveButton (direction, label, name) {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.className = `lato-cms-media-field__move lato-cms-media-field__move--${direction}`
+    button.title = label
+    button.setAttribute('aria-label', `${label} ${name}`)
+    button.dataset.action = `lato-cms-media-reorder#move${direction === 'before' ? 'Before' : 'After'}`
+    button.innerHTML = `<i class="bi bi-arrow-${direction === 'before' ? 'left' : 'right'}" aria-hidden="true"></i>`
+    return button
+  }
+
   itemTiles () {
     return Array.from(this.gridTarget.querySelectorAll('.lato-cms-media-field__item'))
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_media_picker_controller.js

@@ -23,13 +23,14 @@ export default class extends Controller {
       return
     }
 
-    if (this.pending.has(item.id)) {
-      this.pending.delete(item.id)
-      event.currentTarget.classList.remove('lato-cms-media-picker__item--selected')
-    } else {
+    const selected = !this.pending.has(item.id)
+    if (selected) {
       this.pending.set(item.id, item)
-      event.currentTarget.classList.add('lato-cms-media-picker__item--selected')
+    } else {
+      this.pending.delete(item.id)
     }
+    event.currentTarget.classList.toggle('lato-cms-media-picker__item--selected', selected)
+    event.currentTarget.setAttribute('aria-pressed', selected.toString())
 
     this.updateSelectionUi()
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_media_reorder_controller.js

@@ -34,4 +34,29 @@ export default class extends Controller {
   onGridDrop (event) {
     event.preventDefault()
   }
+
+  // Keyboard equivalents of a drag: swap with the previous/next tile and keep
+  // focus on the pressed button so it can be pressed again.
+  moveBefore (event) {
+    const item = event.currentTarget.closest('.lato-cms-media-field__item')
+    const previous = item?.previousElementSibling
+    if (!previous?.classList.contains('lato-cms-media-field__item')) return
+
+    this.gridTarget.insertBefore(item, previous)
+    this.afterMove(event.currentTarget)
+  }
+
+  moveAfter (event) {
+    const item = event.currentTarget.closest('.lato-cms-media-field__item')
+    const next = item?.nextElementSibling
+    if (!next?.classList.contains('lato-cms-media-field__item')) return
+
+    this.gridTarget.insertBefore(next, item)
+    this.afterMove(event.currentTarget)
+  }
+
+  afterMove (button) {
+    button.focus()
+    this.element.dispatchEvent(new Event('change', { bubbles: true }))
+  }
 }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_page_preview_controller.js

@@ -72,6 +72,7 @@ export default class extends Controller {
 
     this.deviceBtnTargets.forEach(btn => {
       btn.classList.toggle('active', btn.dataset.device === device)
+      btn.setAttribute('aria-pressed', (btn.dataset.device === device).toString())
     })
 
     if (this.hasCustomWidthTarget) this.customWidthTarget.value = ''
@@ -83,7 +84,10 @@ export default class extends Controller {
 
     const width = parseInt(this.customWidthTarget.value, 10)
 
-    this.deviceBtnTargets.forEach(btn => btn.classList.remove('active'))
+    this.deviceBtnTargets.forEach(btn => {
+      btn.classList.remove('active')
+      btn.setAttribute('aria-pressed', 'false')
+    })
     this.viewportTarget.classList.remove(
       'lato-cms-page-preview__viewport--tablet',
       'lato-cms-page-preview__viewport--mobile'
@@ -98,6 +102,7 @@ export default class extends Controller {
       this.iframeTarget.style.maxWidth = ''
       this.deviceBtnTargets.forEach(btn => {
         btn.classList.toggle('active', btn.dataset.device === 'desktop')
+        btn.setAttribute('aria-pressed', (btn.dataset.device === 'desktop').toString())
       })
     }
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_repeater_controller.js

@@ -59,6 +59,7 @@ export default class extends Controller {
     // The new item is rendered expanded: enforce single-open accordion behavior.
     this.collapseOthers(this.itemTargets[this.itemTargets.length - 1])
     this.refresh()
+    this.notifyChange()
   }
 
   remove (event) {
@@ -70,6 +71,13 @@ export default class extends Controller {
 
     item.remove()
     this.refresh()
+    this.notifyChange()
+  }
+
+  // Lets the editor's unsaved-changes guard see structural edits, which fire
+  // no input event of their own.
+  notifyChange () {
+    this.element.dispatchEvent(new Event('change', { bubbles: true }))
   }
 
   refresh () {

data/app/assets/javascripts/lato_cms/controllers/lato_cms_text_field_controller.js

@@ -88,6 +88,7 @@ export default class extends Controller {
       this.sourceTarget.classList.remove("d-none")
       this.sourceTarget.style.height = this.editorTarget.offsetHeight + "px"
       this.sourceBtnTarget.classList.replace("btn-outline-secondary", "btn-secondary")
+      this.sourceBtnTarget.setAttribute("aria-pressed", "true")
     } else {
       // Apply edited source back to the editor
       this.editorTarget.innerHTML = this.sanitize(this.sourceTarget.value)
@@ -95,6 +96,7 @@ export default class extends Controller {
       this.sourceTarget.classList.add("d-none")
       this.editorTarget.classList.remove("d-none")
       this.sourceBtnTarget.classList.replace("btn-secondary", "btn-outline-secondary")
+      this.sourceBtnTarget.setAttribute("aria-pressed", "false")
     }
   }