RubyGems - i18n_proofreading - Versions diffs - 0.9.2 → 0.9.4 - Mend

i18n_proofreading 0.9.2 → 0.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +28 -0
data/app/controllers/i18n_proofreading/widgets_controller.rb +26 -0
data/config/routes.rb +4 -0
data/lib/i18n_proofreading/version.rb +1 -1
data/lib/i18n_proofreading/widget.js +52 -1
data/lib/i18n_proofreading/widget.rb +19 -6
metadata +2 -1

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 442bbc0db3a43634199ae4ad02e0b4c93bfe4b0278f5c4bf4236793acfd9006d
-  data.tar.gz: b5adfadeac507e64888ea36412173daec3ec8b8b0067fe1c056de8b1c328c5b7
+  metadata.gz: f5a99dfd18ee5650a22a7511b6dc7cd061c4be32dae3d2ab7442174ce226b105
+  data.tar.gz: dbc832b5abd4f24d57927dec1e5cd5a593498ca4a818609488c0b61355ecba35
 SHA512:
-  metadata.gz: ad016e5b43be45f388e0f0c11956dbcfaed05d2702f1765d598a2c29e4ee2af8a539bb853c8d8ef8d0dd0121273c64e64353611b8acb494348d10e24188aa5d4
-  data.tar.gz: '08506d993c5b691a33ab9dc327fc2ca84814723cd289bf014ff164181f4fa85d882901286ccc0816aa26363aba371893090ee4024845cb7e0431c57bb2483dd4'
+  metadata.gz: 1c1aa74a2f8d4286a83b1b4b94b1e149999c1769f9512b3990e7e389e637e9c96db4645b041dfd506abb8948b9d9011d59995145ed8fab6c0fffe2901cf8ad50
+  data.tar.gz: d5e1166331606efb1b6a957c2b004360ad86c9fdae1d3846d2907f625ab52607e96bce3e73c5106910acdeeae4d2733f30e9ed6e43a335e6ecbdb6ada7001016

data/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,34 @@
 ## [Unreleased]
+## [0.9.4]
+- **Accessibility parity for the suggestion popover.** The panel is now a real
+  dialog (`role="dialog"`, `aria-modal="true"`, named by its title via
+  `aria-labelledby`); Tab/Shift+Tab are trapped inside it while it is open and
+  closing it returns focus to the element that opened it. Validation and save
+  errors are announced to screen readers (`role="alert"`), and the previously
+  hardcoded English network-failure message now goes through the localized
+  `errorSave` label like the rest. The page behind the open dialog is
+  scroll-locked (`overflow: hidden` on `<html>`, restored on close) — and if a
+  Turbo body swap removes the overlay without `close()`, the next render
+  releases the lock so the new page never arrives frozen. The floating pill is
+  untouched.
+## [0.9.3]
+- Fix the widget going dead after a Turbo Drive visit under a nonce-based
+  Content-Security-Policy. The widget code was inlined as a nonce'd `<script>`;
+  Turbo body swaps re-run body scripts against the *original* page's CSP
+  header, which refuses the freshly minted inline nonce — so after any soft
+  visit the widget never booted until a hard reload. The code is now served as
+  a **same-origin, content-fingerprinted script**
+  (`GET {mount_path}/widget.js?v=<md5>`), which `script-src 'self'` (or the
+  nonce the tag still carries) covers on every visit. The fingerprinted URL is
+  immutable and cached for a year — new code means a new URL — while any other
+  URL only ETag-revalidates. The inline JSON config block is unchanged: it is
+  data, not code, and needs no nonce.
 ## [0.9.2]
 - Make the suggestion popover **full-screen on mobile** (≤ 480px wide): edge to

data/app/controllers/i18n_proofreading/widgets_controller.rb ADDED Viewed

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+module I18nProofreading
+  # Serves the widget JavaScript as a plain same-origin script. Same-origin
+  # matters: under a `script-src 'self'` (or nonce-based) CSP, an external
+  # script from the app's own host is always allowed — including when Turbo
+  # Drive swaps the <body> and re-runs body scripts under the *original*
+  # page's CSP header, where a freshly minted inline nonce would be refused.
+  class WidgetsController < ApplicationController
+    # The script is static and carries no user data; without this, Rails'
+    # cross-origin JavaScript guard refuses to serve it to a plain
+    # <script src> request.
+    skip_forgery_protection
+    # The script URL carries a content fingerprint (?v=<md5>), so stale code
+    # is structurally impossible: new code means a new URL. The canonical
+    # fingerprinted URL is immutable and gets long-lived caching; anything
+    # else only ETag-revalidates.
+    def show
+      expires_in 1.year, public: true if params[:v] == Widget.fingerprint
+      return unless stale?(etag: [I18nProofreading::VERSION, Widget.fingerprint])
+      render plain: Widget.javascript, content_type: 'text/javascript'
+    end
+  end
+end

data/config/routes.rb CHANGED Viewed

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 I18nProofreading::Engine.routes.draw do
+  # The widget code, served same-origin so it runs under a `'self'`/nonce-based
+  # CSP even across Turbo body swaps (see WidgetsController).
+  get 'widget.js', to: 'widgets#show', as: :widget
   # index is the read-only admin dashboard; create + the `context` collection
   # route are the widget's public API (see SuggestionsController). There is
   # deliberately no update/destroy — the tool never mutates suggestions from the

data/lib/i18n_proofreading/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module I18nProofreading
-  VERSION = '0.9.2'
+  VERSION = '0.9.4'
 end

data/lib/i18n_proofreading/widget.js CHANGED Viewed

@@ -34,6 +34,8 @@
   var errorNode = null;
   var saveButton = null;
   var priorNode = null;
+  var openerNode = null;
+  var savedOverflow = null; // pre-lock inline overflow of <html>; null = not locked
   function ready(fn) {
     if (document.readyState === "loading") {
@@ -73,6 +75,12 @@
     // Re-read on each visit: the injected config is data (not an executed
     // script), so it reflects the page Turbo just rendered.
     config = readConfig() || config;
+    // A Turbo body swap can drop the overlay without close(); documentElement
+    // survives the swap, so release the scroll lock or the new page is frozen.
+    if (overlay && !document.body.contains(overlay)) {
+      overlay = null;
+      unlockScroll();
+    }
     injectStyles();
     if (config.showPill !== false) buildPill();
     document.documentElement.classList.toggle("i18np-active", !!config.active);
@@ -144,11 +152,30 @@
   }
   function handleKeydown(event) {
+    if (event.key === "Tab" && overlay) {
+      trapTab(event);
+      return;
+    }
     if (event.key !== "Escape") return;
     if (overlay) close();
     else if (config.active) toggle();
   }
+  // Keep Tab/Shift+Tab cycling inside the open dialog.
+  function trapTab(event) {
+    var focusable = overlay.querySelectorAll("button, [href], input, textarea, select");
+    if (!focusable.length) return;
+    var first = focusable[0];
+    var last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
   // --- pill -----------------------------------------------------------------
   function buildPill() {
@@ -178,12 +205,17 @@
   function open(key, currentValue) {
     close();
+    openerNode = document.activeElement;
     overlay = el("div", "i18np-overlay");
     overlay.addEventListener("click", function (event) {
       if (event.target === overlay) close();
     });
     var panel = el("div", "i18np-panel");
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
+    panel.setAttribute("aria-labelledby", "i18np-title");
     // Mirror the popover for right-to-left locales (Arabic, Urdu, …). The i18n
     // key stays LTR — it's a code identifier, not prose (see heading()).
     panel.dir = config.rtl ? "rtl" : "ltr";
@@ -201,6 +233,7 @@
     panel.appendChild(field(t("comment", "Comment"), commentInput));
     errorNode = el("p", "i18np-error");
+    errorNode.setAttribute("role", "alert");
     errorNode.style.display = "none";
     panel.appendChild(errorNode);
@@ -208,6 +241,7 @@
     overlay.appendChild(panel);
     document.body.appendChild(overlay);
+    lockScroll();
     proposedInput.focus();
     loadPrior(key);
   }
@@ -216,9 +250,25 @@
     if (overlay) {
       overlay.remove();
       overlay = null;
+      unlockScroll();
+      if (openerNode && document.body.contains(openerNode)) openerNode.focus();
+      openerNode = null;
     }
   }
+  // Scroll-lock the page behind the modal, remembering the inline value so
+  // close() can put it back exactly as it was.
+  function lockScroll() {
+    if (savedOverflow === null) savedOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+  }
+  function unlockScroll() {
+    if (savedOverflow === null) return;
+    document.documentElement.style.overflow = savedOverflow;
+    savedOverflow = null;
+  }
   function loadPrior(key) {
     var params = new URLSearchParams({ key: key, locale: config.locale });
     fetch(config.endpoint + "/context?" + params.toString(), { headers: { Accept: "application/json" } })
@@ -311,7 +361,7 @@
       })
       .catch(function () {
         saveButton.disabled = false;
-        showError("Could not save the suggestion.");
+        showError(t("errorSave", "Could not save the suggestion."));
       });
   }
@@ -325,6 +375,7 @@
   function heading(key) {
     var wrapper = el("div", "i18np-heading");
     var title = el("p", "i18np-title");
+    title.id = "i18np-title"; // aria-labelledby target; only one dialog at a time
     title.textContent = t("title", "Suggest a translation fix");
     var code = el("code", "i18np-key");
     code.dir = "ltr"; // the key is a code path, never RTL prose

data/lib/i18n_proofreading/widget.rb CHANGED Viewed

@@ -1,13 +1,14 @@
 # frozen_string_literal: true
 require 'json'
+require 'digest'
 module I18nProofreading
   # Serves the self-contained browser widget. The JavaScript is plain ES (no
   # framework, no build step) and styles itself inline, so it drops into any Rails
-  # app regardless of its CSS or JS setup. It is inlined into the page rather than
-  # served as a separate asset to avoid any dependency on the host's asset
-  # pipeline.
+  # app regardless of its CSS or JS setup. It is served by the engine's own
+  # controller (see WidgetsController) rather than through an asset pipeline, to
+  # avoid any dependency on the host's asset setup.
   module Widget
     # Lives under lib/ (not app/assets/), so a host that runs an asset
     # pipeline never ingests it: Rails auto-registers every engine's
@@ -24,6 +25,13 @@ module I18nProofreading
         @javascript ||= File.read(SOURCE)
       end
+      # Content fingerprint for the cache-busting script URL: a changed file is
+      # a changed URL, so no browser can ever run stale widget code — Safari
+      # has been caught ignoring must-revalidate on same-URL scripts.
+      def fingerprint
+        @fingerprint ||= Digest::MD5.hexdigest(javascript)
+      end
       # The two <script> tags to place before </body>.
       #
       # The config rides in a `type="application/json"` block: it is *data*, not
@@ -32,8 +40,12 @@ module I18nProofreading
       # widget can re-read the *current* page's config on every `turbo:load`
       # instead of being stuck with whatever the last full load evaluated.
       #
-      # `nonce:` stamps only the widget script (the code), so it runs under a
-      # nonce-based Content-Security-Policy; pass nil when the app has no nonce.
+      # The code is a same-origin `src` script served by the engine — NOT
+      # inlined. Under a nonce-based CSP, Turbo Drive body swaps re-run body
+      # scripts against the *original* page's CSP header, so a fresh inline
+      # nonce gets refused; a same-origin src is covered by `'self'` on every
+      # visit. `nonce:` is still stamped for hosts whose script-src has no
+      # 'self'; pass nil when the app has no nonce.
       def snippet(endpoint:, locale:, active:, nonce: nil)
         config = {
           endpoint: endpoint,
@@ -48,9 +60,10 @@ module I18nProofreading
         # Escape "</" so a value can't close the <script> block early.
         json = config.to_json.gsub('</', '<\/')
         nonce_attr = nonce ? %( nonce="#{nonce}") : ''
+        src = "#{I18nProofreading.config.mount_path.chomp('/')}/widget.js?v=#{fingerprint}"
         %(<script type="application/json" data-i18n-proofreading-config>#{json}</script>) +
-          %(<script data-i18n-proofreading-widget#{nonce_attr}>#{javascript}</script>)
+          %(<script src="#{src}" defer#{nonce_attr} data-i18n-proofreading-widget></script>)
       end
       private

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: i18n_proofreading
 version: !ruby/object:Gem::Version
-  version: 0.9.2
+  version: 0.9.4
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -40,6 +40,7 @@ files:
 - Rakefile
 - app/controllers/i18n_proofreading/application_controller.rb
 - app/controllers/i18n_proofreading/suggestions_controller.rb
+- app/controllers/i18n_proofreading/widgets_controller.rb
 - app/helpers/i18n_proofreading/tag_helper.rb
 - app/models/i18n_proofreading/application_record.rb
 - app/models/i18n_proofreading/suggestion.rb