Skip to content

Commit

Permalink
[Editor] Make the focused stamp annotation more clear from a screen r…
Browse files Browse the repository at this point in the history
…eader 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.
  • Loading branch information
calixteman committed Sep 3, 2024
1 parent a41cd38 commit 843fde3
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 3 deletions.
3 changes: 1 addition & 2 deletions src/display/editor/alt_text.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions src/display/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
5 changes: 4 additions & 1 deletion src/display/editor/stamp.js
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,7 @@ class StampEditor extends AnnotationEditor {

super.render();
this.div.hidden = true;
this.div.setAttribute("role", "figure");

this.addAltTextButton();

Expand Down Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/display/editor/toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ class EditorToolbar {
return editToolbar;
}

get div() {
return this.#toolbar;
}

static #pointerDown(e) {
e.stopPropagation();
}
Expand Down

0 comments on commit 843fde3

Please sign in to comment.