Skip to content

Add labels to gallery thumbnail size controls#1775

Open
whitewooood wants to merge 3 commits into
UniversalViewer:devfrom
whitewooood:codex/add-gallery-size-labels
Open

Add labels to gallery thumbnail size controls#1775
whitewooood wants to merge 3 commits into
UniversalViewer:devfrom
whitewooood:codex/add-gallery-size-labels

Conversation

@whitewooood

Copy link
Copy Markdown

Summary

  • add accessible labels to the gallery thumbnail size decrease button, range control, and increase button
  • route those labels through gallery content config with default fallbacks
  • add locale entries for supported locale files and a puppeteer regression test

Fixes #1488.

Validation

  • npm run build
  • CI=true npm test -- tests/test.js -t "labels gallery thumbnail size controls" --runInBand
  • npx prettier --check tests/test.js src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts src/content-handlers/iiif/extensions/uv-av-extension/config/config.json src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json src/locales/cy-GB.json src/locales/en-GB.json src/locales/fr-FR.json src/locales/pl-PL.json src/locales/sv-SE.json
  • npx eslint tests/test.js src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts
  • npm run build-tsc
  • npm run checkLocaleUsage
  • npm run findMissingTranslations (reports pre-existing missing keys for adjust image labels; no new thumbnail-size keys missing)
  • CI=true npm test -- --runInBand (first run had a transient thumbnail image load failure; the failing test passed when rerun directly, and the full suite passed on rerun: 4 passed, 1 skipped)

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
universalviewer Ready Ready Preview, Comment Jun 22, 2026 3:02pm

Request Review

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

@whitewooood is attempting to deploy a commit to the Universal Viewer Team on Vercel.

A member of the Team first needs to authorize it.

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for your contribution, @whitewooood -- I took a quick look and have a question and suggestion below.

this._$sizeDownButton = $(
'<input class="btn btn-default size-down" type="button" value="-" />'
);
).attr("aria-label", this.options.data.content.decreaseSize);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is there a particular reason why you chose to shorten the string names when including them in content? I think it might be better to use decreaseThumbnailSize or decreaseThumbSize instead of just decreaseSize to reduce potential ambiguity if we add more strings in the future relating to different size-related functionality. (This is also true of increaseSize and especially size).

Comment thread src/locales/cy-GB.json
"$shareLink": "Dolen i'r dudalen hon",
"$shareInstructions": "Er mwyn rhannu'r eitem hon, cop\u00efwch y URL isod.",
"$size": "Maint:",
"$decreaseThumbnailSize": "Lleihau maint bawdluniau",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Where/how did you source your non-English translations? Do we need to have our translation team review them for accuracy?

@whitewooood

Copy link
Copy Markdown
Author

Thanks for the review. I pushed an update using more specific content keys: decreaseThumbnailSize, thumbnailSize, and increaseThumbnailSize.

For the non-English strings, I added direct equivalents so the new labels resolve in the existing locale files. They have not gone through a separate translation-team review, so adjustments from the translation workflow would be welcome.

@demiankatz

Copy link
Copy Markdown
Contributor

Thanks, @whitewooood, I have put this in the "in testing" column of the Community Board so we can discuss it at a future Community Call and figure out the best way to get all the translations reviewed.

Comment on lines +66 to +70
this.options.data.content = Object.assign(
{},
this.data().content,
this.options.data.content
);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this necessary? If so, why?

(It's been a while since I've reviewed the config loading code here, which I realize is rather confusing -- but this doesn't seem to match patterns I've seen elsewhere, so I'm just curious about it).

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thanks for pointing this out. I removed that constructor-level content merge in the latest commit.

I had added it as a fallback for the new labels, but it was not a good fit for the existing config-loading pattern. The component now applies the size-control labels from its current data in _init() and again in set(), which keeps the normal config flow intact and also lets the localized content supplied later by GalleryView.databind() update those labels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: In testing

Development

Successfully merging this pull request may close these issues.

Accessibility: add missing labels to gallery thumbnail size controls

2 participants