mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-23 16:48:08 +02:00
[Editor] Utilize Fluent "better" when localizing the AltText
Currently we manually localize and update the DOM-elements of the AltText-button, and it seems nicer to utilize Fluent "properly" for that task. This can be achieved by introducing an explicit `span`-element on the AltText-button (similar to e.g. the regular toolbar-buttons), and adding a few more l10n-strings, since that allows just setting the `data-l10n-id`-attribute on all the relevant DOM-elements. Finally, note how we no longer need to localize any strings eagerly when initializing the various editors.
This commit is contained in:
Jonas Jenwald
parent
9108848743
commit
ee812b5df2
4 changed files with 70 additions and 58 deletions
|
|
@ -22,6 +22,8 @@ class AltText {
|
|||
|
||||
#altTextButton = null;
|
||||
|
||||
#altTextButtonLabel = null;
|
||||
|
||||
#altTextTooltip = null;
|
||||
|
||||
#altTextTooltipTimeout = null;
|
||||
|
|
@ -40,38 +42,46 @@ class AltText {
|
|||
|
||||
static #l10nNewButton = null;
|
||||
|
||||
static _l10nPromise = null;
|
||||
static _l10n = null;
|
||||
|
||||
constructor(editor) {
|
||||
this.#editor = editor;
|
||||
this.#useNewAltTextFlow = editor._uiManager.useNewAltTextFlow;
|
||||
|
||||
AltText.#l10nNewButton ||= Object.freeze({
|
||||
added: "pdfjs-editor-new-alt-text-added-button-label",
|
||||
missing: "pdfjs-editor-new-alt-text-missing-button-label",
|
||||
review: "pdfjs-editor-new-alt-text-to-review-button-label",
|
||||
added: "pdfjs-editor-new-alt-text-added-button",
|
||||
"added-label": "pdfjs-editor-new-alt-text-added-button-label",
|
||||
missing: "pdfjs-editor-new-alt-text-missing-button",
|
||||
"missing-label": "pdfjs-editor-new-alt-text-missing-button-label",
|
||||
review: "pdfjs-editor-new-alt-text-to-review-button",
|
||||
"review-label": "pdfjs-editor-new-alt-text-to-review-button-label",
|
||||
});
|
||||
}
|
||||
|
||||
static initialize(l10nPromise) {
|
||||
AltText._l10nPromise ||= l10nPromise;
|
||||
static initialize(l10n) {
|
||||
AltText._l10n ??= l10n;
|
||||
}
|
||||
|
||||
async render() {
|
||||
const altText = (this.#altTextButton = document.createElement("button"));
|
||||
altText.className = "altText";
|
||||
let msg;
|
||||
altText.tabIndex = "0";
|
||||
|
||||
const label = (this.#altTextButtonLabel = document.createElement("span"));
|
||||
altText.append(label);
|
||||
|
||||
if (this.#useNewAltTextFlow) {
|
||||
altText.classList.add("new");
|
||||
msg = await AltText._l10nPromise.get(AltText.#l10nNewButton.missing);
|
||||
} else {
|
||||
msg = await AltText._l10nPromise.get(
|
||||
"pdfjs-editor-alt-text-button-label"
|
||||
altText.setAttribute("data-l10n-id", AltText.#l10nNewButton.missing);
|
||||
label.setAttribute(
|
||||
"data-l10n-id",
|
||||
AltText.#l10nNewButton["missing-label"]
|
||||
);
|
||||
} else {
|
||||
altText.setAttribute("data-l10n-id", "pdfjs-editor-alt-text-button");
|
||||
label.setAttribute("data-l10n-id", "pdfjs-editor-alt-text-button-label");
|
||||
}
|
||||
altText.textContent = msg;
|
||||
altText.setAttribute("aria-label", msg);
|
||||
altText.tabIndex = "0";
|
||||
|
||||
const signal = this.#editor._uiManager._signal;
|
||||
altText.addEventListener("contextmenu", noContextMenu, { signal });
|
||||
altText.addEventListener("pointerdown", event => event.stopPropagation(), {
|
||||
|
|
@ -144,9 +154,10 @@ class AltText {
|
|||
return;
|
||||
}
|
||||
this.#guessedText = guessedText;
|
||||
this.#textWithDisclaimer = await AltText._l10nPromise.get(
|
||||
"pdfjs-editor-new-alt-text-generated-alt-text-with-disclaimer"
|
||||
)({ generatedAltText: guessedText });
|
||||
this.#textWithDisclaimer = await AltText._l10n.get(
|
||||
"pdfjs-editor-new-alt-text-generated-alt-text-with-disclaimer",
|
||||
{ generatedAltText: guessedText }
|
||||
);
|
||||
this.#setState();
|
||||
}
|
||||
|
||||
|
|
@ -229,6 +240,7 @@ class AltText {
|
|||
destroy() {
|
||||
this.#altTextButton?.remove();
|
||||
this.#altTextButton = null;
|
||||
this.#altTextButtonLabel = null;
|
||||
this.#altTextTooltip = null;
|
||||
this.#badge?.remove();
|
||||
this.#badge = null;
|
||||
|
|
@ -242,19 +254,12 @@ class AltText {
|
|||
|
||||
if (this.#useNewAltTextFlow) {
|
||||
button.classList.toggle("done", !!this.#altText);
|
||||
AltText._l10nPromise
|
||||
.get(AltText.#l10nNewButton[this.#label])
|
||||
.then(msg => {
|
||||
button.setAttribute("aria-label", msg);
|
||||
// We can't just use button.textContent here, because it would remove
|
||||
// the existing tooltip element.
|
||||
for (const child of button.childNodes) {
|
||||
if (child.nodeType === Node.TEXT_NODE) {
|
||||
child.textContent = msg;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
button.setAttribute("data-l10n-id", AltText.#l10nNewButton[this.#label]);
|
||||
|
||||
this.#altTextButtonLabel?.setAttribute(
|
||||
"data-l10n-id",
|
||||
AltText.#l10nNewButton[`${this.#label}-label`]
|
||||
);
|
||||
if (!this.#altText) {
|
||||
this.#altTextTooltip?.remove();
|
||||
return;
|
||||
|
|
@ -266,11 +271,7 @@ class AltText {
|
|||
return;
|
||||
}
|
||||
button.classList.add("done");
|
||||
AltText._l10nPromise
|
||||
.get("pdfjs-editor-alt-text-edit-button-label")
|
||||
.then(msg => {
|
||||
button.setAttribute("aria-label", msg);
|
||||
});
|
||||
button.setAttribute("data-l10n-id", "pdfjs-editor-alt-text-edit-button");
|
||||
}
|
||||
|
||||
let tooltip = this.#altTextTooltip;
|
||||
|
|
@ -315,11 +316,15 @@ class AltText {
|
|||
{ signal }
|
||||
);
|
||||
}
|
||||
tooltip.innerText = this.#altTextDecorative
|
||||
? await AltText._l10nPromise.get(
|
||||
"pdfjs-editor-alt-text-decorative-tooltip"
|
||||
)
|
||||
: this.#altText;
|
||||
if (this.#altTextDecorative) {
|
||||
tooltip.setAttribute(
|
||||
"data-l10n-id",
|
||||
"pdfjs-editor-alt-text-decorative-tooltip"
|
||||
);
|
||||
} else {
|
||||
tooltip.removeAttribute("data-l10n-id");
|
||||
tooltip.textContent = this.#altText;
|
||||
}
|
||||
|
||||
if (!tooltip.parentNode) {
|
||||
button.append(tooltip);
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ class AnnotationEditor {
|
|||
|
||||
_focusEventsAllowed = true;
|
||||
|
||||
static _l10nPromise = null;
|
||||
static _l10n = null;
|
||||
|
||||
static _l10nResizer = null;
|
||||
|
||||
|
|
@ -210,6 +210,8 @@ class AnnotationEditor {
|
|||
* @param {Object} l10n
|
||||
*/
|
||||
static initialize(l10n, _uiManager) {
|
||||
AnnotationEditor._l10n ??= l10n;
|
||||
|
||||
AnnotationEditor._l10nResizer ||= Object.freeze({
|
||||
topLeft: "pdfjs-editor-resizer-top-left",
|
||||
topMiddle: "pdfjs-editor-resizer-top-middle",
|
||||
|
|
@ -221,21 +223,6 @@ class AnnotationEditor {
|
|||
middleLeft: "pdfjs-editor-resizer-middle-left",
|
||||
});
|
||||
|
||||
AnnotationEditor._l10nPromise ||= new Map([
|
||||
...[
|
||||
"pdfjs-editor-alt-text-button-label",
|
||||
"pdfjs-editor-alt-text-edit-button-label",
|
||||
"pdfjs-editor-alt-text-decorative-tooltip",
|
||||
"pdfjs-editor-new-alt-text-added-button-label",
|
||||
"pdfjs-editor-new-alt-text-missing-button-label",
|
||||
"pdfjs-editor-new-alt-text-to-review-button-label",
|
||||
].map(str => [str, l10n.get(str)]),
|
||||
...[
|
||||
// Strings that need l10n-arguments.
|
||||
"pdfjs-editor-new-alt-text-generated-alt-text-with-disclaimer",
|
||||
].map(str => [str, l10n.get.bind(l10n, str)]),
|
||||
]);
|
||||
|
||||
if (AnnotationEditor._borderLineWidth !== -1) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -1003,7 +990,7 @@ class AnnotationEditor {
|
|||
if (this.#altText) {
|
||||
return;
|
||||
}
|
||||
AltText.initialize(AnnotationEditor._l10nPromise);
|
||||
AltText.initialize(AnnotationEditor._l10n);
|
||||
this.#altText = new AltText(this);
|
||||
if (this.#accessibilityData) {
|
||||
this.#altText.data = this.#accessibilityData;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue