[Editor] Add an aria-label to the alt-text button depending on its state

This commit is contained in:
Calixte Denizet 2023-09-20 21:45:03 +02:00
parent f2d75d9221
commit c90ea2314e
3 changed files with 10 additions and 0 deletions

View File

@ -268,6 +268,7 @@ editor_ink_canvas_aria_label=User-created image
# LOCALIZATION NOTE (editor_alt_text_button_label): Alternative text (alt text) helps # LOCALIZATION NOTE (editor_alt_text_button_label): Alternative text (alt text) helps
# when people can't see the image. # when people can't see the image.
editor_alt_text_button_label=Alt text editor_alt_text_button_label=Alt text
editor_alt_text_edit_button_label=Edit alt text
editor_alt_text_dialog_label=Choose an option editor_alt_text_dialog_label=Choose an option
editor_alt_text_dialog_description=Alt text (alternative text) helps when people cant see the image or when it doesnt load. editor_alt_text_dialog_description=Alt text (alternative text) helps when people cant see the image or when it doesnt load.
editor_alt_text_add_description_label=Add a description editor_alt_text_add_description_label=Add a description

View File

@ -150,6 +150,7 @@ class AnnotationEditor {
AnnotationEditor._l10nPromise ||= new Map( AnnotationEditor._l10nPromise ||= new Map(
[ [
"editor_alt_text_button_label", "editor_alt_text_button_label",
"editor_alt_text_edit_button_label",
"editor_alt_text_decorative_tooltip", "editor_alt_text_decorative_tooltip",
].map(str => [str, l10n.get(str)]) ].map(str => [str, l10n.get(str)])
); );
@ -831,6 +832,7 @@ class AnnotationEditor {
.get("editor_alt_text_button_label") .get("editor_alt_text_button_label")
.then(msg => { .then(msg => {
altText.textContent = msg; altText.textContent = msg;
altText.setAttribute("aria-label", msg);
}); });
altText.tabIndex = "0"; altText.tabIndex = "0";
altText.addEventListener( altText.addEventListener(
@ -865,6 +867,12 @@ class AnnotationEditor {
if (!button || (!this.#altTextDecorative && !this.#altText)) { if (!button || (!this.#altTextDecorative && !this.#altText)) {
return; return;
} }
AnnotationEditor._l10nPromise
.get("editor_alt_text_edit_button_label")
.then(msg => {
button.setAttribute("aria-label", msg);
});
let tooltip = this.#altTextTooltip; let tooltip = this.#altTextTooltip;
if (!tooltip) { if (!tooltip) {
this.#altTextTooltip = tooltip = document.createElement("span"); this.#altTextTooltip = tooltip = document.createElement("span");

View File

@ -83,6 +83,7 @@ const DEFAULT_L10N_STRINGS = {
editor_ink2_aria_label: "Draw Editor", editor_ink2_aria_label: "Draw Editor",
editor_ink_canvas_aria_label: "User-created image", editor_ink_canvas_aria_label: "User-created image",
editor_alt_text_button_label: "Alt text", editor_alt_text_button_label: "Alt text",
editor_alt_text_edit_button_label: "Edit alt text",
editor_alt_text_decorative_tooltip: "Marked as decorative", editor_alt_text_decorative_tooltip: "Marked as decorative",
}; };
if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) { if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {