Skip to content

Fix ImageEnlarger: accessibility, modal re-entry, responsive images, MutationObserver perf #925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PythonSmall-Q merged 5 commits into from
Mar 7, 2026
Merged

Fix ImageEnlarger: accessibility, modal re-entry, responsive images, MutationObserver perf #925

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6653cc
Initial plan
Copilot Mar 7, 2026
c1e5246
Address review feedback: fix accessibility, modal exclusion, currentS…
Copilot Mar 7, 2026
9b68c78
Fix close button background: reset browser default button styles
Copilot Mar 7, 2026
2b8330d
Update XMOJ.user.js
PythonSmall-Q Mar 7, 2026
259cc7a
Update XMOJ.user.js
PythonSmall-Q Mar 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions XMOJ.user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5590,26 +5590,6 @@ int main()
transition: opacity 0.2s ease;
}

.xmoj-image-preview::after {
content: "点击放大";
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 12px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.xmoj-image-preview:hover::after {
opacity: 1;
}

.xmoj-image-modal {
display: none;
Expand Down Expand Up @@ -5674,6 +5654,10 @@ int main()
top: 20px;
right: 30px;
color: white;
background: none;
border: none;
padding: 0;
line-height: 1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
Expand All @@ -5691,8 +5675,11 @@ int main()
ImageModal.className = "xmoj-image-modal";
ImageModal.id = "xmoj-image-modal";

let CloseButton = document.createElement("span");
let CloseButton = document.createElement("button");
CloseButton.className = "xmoj-image-modal-close";
CloseButton.type = "button";
CloseButton.setAttribute("aria-label", "关闭图片");
CloseButton.title = "关闭图片";
CloseButton.innerHTML = "×";
Comment on lines +5678 to 5683
Copy link

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CloseButton was changed from a to a , but the CSS for .xmoj-image-modal-close doesn’t reset default button styles (background/border/padding). This will likely render a native button chrome behind the “×” and affect layout/contrast. Consider adding background: none; border: 0; padding: 0; line-height: 1; (and optionally appearance: none;) for .xmoj-image-modal-close now that it’s a button.

Copilot uses AI. Check for mistakes.
ImageModal.appendChild(CloseButton);

Expand Down Expand Up @@ -5804,31 +5791,44 @@ int main()
});

// Apply to all images on the page
let ApplyEnlargerToImages = () => {
let Images = document.querySelectorAll("img");
Images.forEach((img) => {
if (!img.classList.contains("xmoj-image-preview") &&
!img.parentElement.classList.contains("xmoj-image-modal") &&
img.src &&
!img.src.includes("gravatar") &&
!img.src.includes("cravatar")) {

img.classList.add("xmoj-image-preview");
img.style.position = "relative";
img.addEventListener("click", (e) => {
e.stopPropagation();
OpenImageModal(img.src);
});
let ApplyEnlargerToImage = (img) => {
const effectiveSrc = img.currentSrc || img.src;
if (!img.classList.contains("xmoj-image-preview") &&
!img.closest(".xmoj-image-modal") &&
effectiveSrc &&
!effectiveSrc.includes("gravatar") &&
!effectiveSrc.includes("cravatar")) {

img.classList.add("xmoj-image-preview");
if (!img.title) {
img.title = "点击放大";
}
});
img.addEventListener("click", (e) => {
e.stopPropagation();
OpenImageModal(effectiveSrc);
Copy link

@cubic-dev-ai cubic-dev-ai bot Mar 7, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1: The modal opens a stale image URL because the click handler captures effectiveSrc at bind time instead of reading the current source at click time.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At XMOJ.user.js, line 5808:

<comment>The modal opens a stale image URL because the click handler captures `effectiveSrc` at bind time instead of reading the current source at click time.</comment>

<file context>
@@ -5792,17 +5792,20 @@ int main()
                         img.addEventListener("click", (e) => {
                             e.stopPropagation();
-                            OpenImageModal(img.currentSrc || img.src);
+                            OpenImageModal(effectiveSrc);
                         });
                     }
</file context>
Suggested change
OpenImageModal(effectiveSrc);
OpenImageModal(img.currentSrc || img.src);
Fix with Cubic

Copy link

@cubic-dev-ai cubic-dev-ai bot Mar 7, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The modal opens a stale image URL because effectiveSrc is captured once instead of reading img.currentSrc || img.src when the image is clicked.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At XMOJ.user.js, line 5806:

<comment>The modal opens a stale image URL because `effectiveSrc` is captured once instead of reading `img.currentSrc || img.src` when the image is clicked.</comment>

<file context>
@@ -5792,17 +5792,18 @@ int main()
                         img.addEventListener("click", (e) => {
                             e.stopPropagation();
-                            OpenImageModal(img.currentSrc || img.src);
+                            OpenImageModal(effectiveSrc);
                         });
                     }
</file context>
Suggested change
OpenImageModal(effectiveSrc);
OpenImageModal(img.currentSrc || img.src || effectiveSrc);
Fix with Cubic

});
Comment on lines +5802 to +5809
Copy link

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

img.title = "点击放大" overwrites any existing title on the page’s images (tooltips, a11y hints, etc.). To avoid clobbering author-provided titles, only set the title if it’s currently empty, or store/restore the original title (e.g., via a data- attribute) when toggling the preview behavior.

Copilot uses AI. Check for mistakes.
Comment on lines +5806 to +5809
Copy link

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR description mentions “focus returns to the trigger” and “background scroll is locked”, but the ImageEnlarger code shown here doesn’t implement either (Open/Close just toggles the show class). If those behaviors are intended, they should be added when opening/closing the modal; otherwise the PR description should be updated to match the actual behavior.

Copilot uses AI. Check for mistakes.
}
};

let ApplyEnlargerToImages = () => {
document.querySelectorAll("img").forEach(ApplyEnlargerToImage);
};

// Apply to existing images
ApplyEnlargerToImages();

// Apply to dynamically added images
let Observer = new MutationObserver((mutations) => {
ApplyEnlargerToImages();
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType !== Node.ELEMENT_NODE) return;
if (node.tagName === "IMG") {
ApplyEnlargerToImage(node);
} else {
node.querySelectorAll("img").forEach(ApplyEnlargerToImage);
}
});
Comment on lines 5821 to +5830
Copy link

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new MutationObserver path only processes newly added nodes once. Because ApplyEnlargerToImage returns early when img.src is empty, images that are inserted before their src/srcset is populated (common with lazy-loading) will never get the click handler. Consider either (a) attaching the handler even when img.src is empty and checking currentSrc/src at click time, or (b) observing attributes changes for src/srcset and re-running ApplyEnlargerToImage for the target image when those attributes change.

Copilot uses AI. Check for mistakes.
});
});

Observer.observe(document.body, {
Expand Down