bard-attachment_field 0.6.0 → 0.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f03200d473a693885b813d0990c78f6d06c7a3ef6ba6a9b88acdac3769379344
-  data.tar.gz: e343b3122f95ef094f1060e73661d4a06ca07d0d4f3f041f3388271193a9aea5
+  metadata.gz: 171fcac9ab96b706cf55ff53b8f7c18f48aaa29c26a166b4e53c932136071c72
+  data.tar.gz: 683c9604ea6c3c0214e2571dee9c66ce2008f9452b9f0e70b393500b0c40d420
 SHA512:
-  metadata.gz: 7d8d24848b191cbd2699095a94c512d5eb44c710ee0d36cd167719ae2865f0350b7a701727b19dc84172e35d7f2997e9bc06aaec341be120d1adb21f13bcbd2b
-  data.tar.gz: ad571bce098435bec2bb4f05197aca1ab0ee9db13ee4325ae0c0aa02d157758ba071c61fc4d819b06b63def46ca39df0936f0faf13feac50c6d4e8bece325b66
+  metadata.gz: f21267ecf4f3107be7c9032212323e44b3b43b12fd30949abfdb78782b4779daa1940a7db337be51b4a9355cd6c701a9fa42765a0c1367e376217a7a2267352b
+  data.tar.gz: bd493292e9d8c0bff64960bef1aa95f931f334a27de8b80a243ee64b668af75d6735de34820ac0d5eeec80432b7479169bb5c1ba7c481cffa34cfe06c8335098

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.6.2] - 2026-07-23
+
+### Bug Fixes
+
+- Clicking a `<video>` preview to play/pause no longer opens the file picker.
+  The click handler now stops propagation so it doesn't bubble to the
+  `<file-drop>` wrapper, which opens the upload dialog on click.
+
+## [0.6.1] - 2026-06-24
+
+### Bug Fixes
+
+- Bump `@botandrose/progress-bar` to 0.6.1, which moves the `progressbar` role
+  off the host onto the inner fill/ring and names it from its slotted content.
+  This resolves the `aria-progressbar-name` and `nested-interactive` axe
+  violations on `<attachment-file>`, whose download link is slotted as the
+  progress bar's content.
+
 ## [0.6.0] - 2026-06-11
 
 ### Features

data/app/assets/javascripts/input-attachment.js

@@ -4087,7 +4087,7 @@ var a = proxyCustomElement(class extends H {
   src;
   filetype;
   render() {
-    return h(Host, { key: "429f17fda03ded975255da6335ba23a663ee662e", class: this.computeClass() }, this.isImage() && h("img", { key: "daa4e38cb1375db7d8852ab1cb401f048efbbdc7", src: this.src }), this.isVideo() && h("video", { key: "1b7860bc3edf2f4ba4951dd0bd8a88f14db078a0", src: this.src, onClick: n }), this.isOther() && "This file does not offer a preview", h("slot", { key: "b8a894bcc9ae11619d543b20f2bd2ee9167616d8" }));
+    return h(Host, { key: "429f17fda03ded975255da6335ba23a663ee662e", class: this.computeClass() }, this.isImage() && h("img", { key: "daa4e38cb1375db7d8852ab1cb401f048efbbdc7", src: this.src }), this.isVideo() && h("video", { key: "1b7860bc3edf2f4ba4951dd0bd8a88f14db078a0", src: this.src, onClick: c }), this.isOther() && "This file does not offer a preview", h("slot", { key: "b8a894bcc9ae11619d543b20f2bd2ee9167616d8" }));
   }
   computeClass() {
     return this.isImage() ? "image" : this.isVideo() ? "video" : "other";
@@ -4105,8 +4105,8 @@ var a = proxyCustomElement(class extends H {
     return ":host{display:block;font-size:13px}img,video{max-width:100%;margin-top:10px}";
   }
 }, [769, "attachment-preview", { src: [513], filetype: [513] }]);
-var n = function() {
-  return this.paused ? this.play() : this.pause(), false;
+var c = function(e3) {
+  e3.stopPropagation(), this.paused ? this.play() : this.pause();
 };
 
 // dist/components/attachment-file2.js
@@ -4808,11 +4808,14 @@ var t = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" }), this._percent = null, this._renderedMode = null, this._rateTimer = null;
   }
   connectedCallback() {
-    this.render(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), this.updateBar(), this._syncTicker();
+    this.render(), this.updateBar(), this._syncTicker();
   }
   disconnectedCallback() {
     this._stopTicker();
   }
+  get _progressbarEl() {
+    return this.shadowRoot.querySelector("circular" === this.mode ? ".ring" : ".bar");
+  }
   get percent() {
     return this._percent;
   }
@@ -4849,13 +4852,14 @@ var t = class extends HTMLElement {
   }
   updateBar() {
     if ("circular" === this.mode) {
-      const r4 = this.shadowRoot?.querySelector(".progress-ring");
-      r4 && (r4.style.strokeDashoffset = this.indeterminate ? "" : String(100 * (1 - this._percent / 100)));
+      const r5 = this.shadowRoot?.querySelector(".progress-ring");
+      r5 && (r5.style.strokeDashoffset = this.indeterminate ? "" : String(100 * (1 - this._percent / 100)));
     } else {
-      const r4 = this.shadowRoot?.querySelector(".bar");
-      r4 && (r4.style.width = this.indeterminate ? "" : `${this._percent}%`);
+      const r5 = this.shadowRoot?.querySelector(".bar");
+      r5 && (r5.style.width = this.indeterminate ? "" : `${this._percent}%`);
     }
-    this.indeterminate ? this.removeAttribute("aria-valuenow") : this.setAttribute("aria-valuenow", String(this._percent));
+    const r4 = this._progressbarEl;
+    r4 && (this.indeterminate ? r4.removeAttribute("aria-valuenow") : r4.setAttribute("aria-valuenow", String(this._percent)));
   }
   _syncTicker() {
     const r4 = Number(this.getAttribute("rate")), n3 = this.isConnected && !this.indeterminate && Number.isFinite(r4) && 0 !== r4;
@@ -4870,7 +4874,8 @@ var t = class extends HTMLElement {
   }
   render() {
     const n3 = this.mode;
-    this._renderedMode !== n3 && (this._renderedMode = n3, this.shadowRoot.adoptedStyleSheets = [(r || (r = new CSSStyleSheet(), r.replaceSync(`
+    if (this._renderedMode === n3) return;
+    this._renderedMode = n3, this.shadowRoot.adoptedStyleSheets = [(r || (r = new CSSStyleSheet(), r.replaceSync(`
   :host {
     --progress-color: #2E7D32;
     --error-color: #7a242f;
@@ -5012,7 +5017,9 @@ var t = class extends HTMLElement {
   :host([error]) .progress-ring { display: none; }
   :host([error]) .ring { animation: none; }
   :host([error]) .error-mark { display: block; }
-`)), r)], this.shadowRoot.innerHTML = "circular" === n3 ? '\n  <div class="circular">\n    <svg class="ring" viewBox="0 0 100 100">\n      <circle class="track" cx="50" cy="50" r="40"></circle>\n      <circle class="progress-ring" cx="50" cy="50" r="40" pathLength="100"></circle>\n      <path class="error-mark" d="M37 37 L63 63 M63 37 L37 63"></path>\n    </svg>\n    <span class="label"><slot></slot></span>\n  </div>\n' : '\n  <div class="bar"></div>\n  <div class="text"><slot></slot></div>\n');
+`)), r)], this.shadowRoot.innerHTML = "circular" === n3 ? '\n  <div class="circular">\n    <svg class="ring" viewBox="0 0 100 100">\n      <circle class="track" cx="50" cy="50" r="40"></circle>\n      <circle class="progress-ring" cx="50" cy="50" r="40" pathLength="100"></circle>\n      <path class="error-mark" d="M37 37 L63 63 M63 37 L37 63"></path>\n    </svg>\n    <span class="label" id="label"><slot></slot></span>\n  </div>\n' : '\n  <div class="bar"></div>\n  <div class="text" id="label"><slot></slot></div>\n';
+    const e3 = this._progressbarEl;
+    e3.setAttribute("role", "progressbar"), e3.setAttribute("aria-valuemin", "0"), e3.setAttribute("aria-valuemax", "100"), e3.setAttribute("aria-labelledby", "label");
   }
 };
 customElements.get("progress-bar") || customElements.define("progress-bar", t);

data/input-attachment/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@botandrose/file-drop": "^0.1.1",
-    "@botandrose/progress-bar": "^0.6.0",
+    "@botandrose/progress-bar": "^0.6.1",
     "@rails/activestorage": "^8.1.0",
     "@rails/request.js": "0.0.13",
     "@stencil/core": "^4.43.2",

data/input-attachment/src/components/attachment-preview/attachment-preview.e2e.ts

@@ -8,4 +8,31 @@ describe('attachment-preview', () => {
     const element = await page.find('attachment-preview');
     expect(element).toHaveClass('hydrated');
   });
+
+  it('does not bubble video preview clicks to ancestor upload handlers', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <div id="drop">
+        <attachment-preview filetype="video" src="data:video/mp4;base64,AAAA"></attachment-preview>
+      </div>
+    `);
+    await page.evaluate(() => {
+      (window as any).ancestorClicked = false;
+      document
+        .getElementById('drop')
+        .addEventListener('click', () => { (window as any).ancestorClicked = true; });
+      const video = document
+        .querySelector('attachment-preview')
+        .shadowRoot.querySelector('video') as any;
+      video.play = () => Promise.resolve();
+      video.pause = () => {};
+    });
+
+    const video = await page.find('attachment-preview >>> video');
+    await video.click();
+    await page.waitForChanges();
+
+    const ancestorClicked = await page.evaluate(() => (window as any).ancestorClicked);
+    expect(ancestorClicked).toBe(false);
+  });
 });

data/input-attachment/src/components/attachment-preview/attachment-preview.tsx

@@ -39,4 +39,7 @@ export class AttachmentPreview {
   }
 }
 
-const toggle = function() { this.paused ? this.play() : this.pause(); return false }
+const toggle = function(event) {
+  event.stopPropagation()
+  this.paused ? this.play() : this.pause()
+}

data/lib/bard/attachment_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module AttachmentField
-    VERSION = "0.6.0"
+    VERSION = "0.6.2"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-attachment_field
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.6.2
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-06-11 00:00:00.000000000 Z
+date: 2026-07-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage