mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-19 22:58:07 +02:00
[Editor] Make the focused stamp annotation more clear from a screen reader point of view (bug 1911994)
It has been tested with Voice Over (mac) and with NVDA (windows). When an added stamp annotation is focused, the screen reader will announce that it's a figure containing a graphic with the added alt-text.
This commit is contained in:
parent
a41cd38387
commit
843fde3b13
4 changed files with 18 additions and 3 deletions
|
@ -279,8 +279,7 @@ class AltText {
|
|||
this.#altTextTooltip = tooltip = document.createElement("span");
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.setAttribute("role", "tooltip");
|
||||
const id = (tooltip.id = `alt-text-tooltip-${this.#editor.id}`);
|
||||
button.setAttribute("aria-describedby", id);
|
||||
tooltip.id = `alt-text-tooltip-${this.#editor.id}`;
|
||||
|
||||
const DELAY_TO_SHOW_TOOLTIP = 100;
|
||||
const signal = this.#editor._uiManager._signal;
|
||||
|
|
|
@ -993,6 +993,15 @@ class AnnotationEditor {
|
|||
this.#altText?.destroy();
|
||||
}
|
||||
|
||||
addContainer(container) {
|
||||
const editToolbarDiv = this._editToolbar?.div;
|
||||
if (editToolbarDiv) {
|
||||
editToolbarDiv.before(container);
|
||||
} else {
|
||||
this.div.append(container);
|
||||
}
|
||||
}
|
||||
|
||||
getClientDimensions() {
|
||||
return this.div.getBoundingClientRect();
|
||||
}
|
||||
|
|
|
@ -373,6 +373,7 @@ class StampEditor extends AnnotationEditor {
|
|||
|
||||
super.render();
|
||||
this.div.hidden = true;
|
||||
this.div.setAttribute("role", "figure");
|
||||
|
||||
this.addAltTextButton();
|
||||
|
||||
|
@ -425,7 +426,9 @@ class StampEditor extends AnnotationEditor {
|
|||
|
||||
this._uiManager.enableWaiting(false);
|
||||
const canvas = (this.#canvas = document.createElement("canvas"));
|
||||
div.append(canvas);
|
||||
canvas.setAttribute("role", "img");
|
||||
this.addContainer(canvas);
|
||||
|
||||
if (
|
||||
!this._uiManager.useNewAltTextWhenAddingImage ||
|
||||
!this._uiManager.useNewAltTextFlow
|
||||
|
|
|
@ -62,6 +62,10 @@ class EditorToolbar {
|
|||
return editToolbar;
|
||||
}
|
||||
|
||||
get div() {
|
||||
return this.#toolbar;
|
||||
}
|
||||
|
||||
static #pointerDown(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue