[Editor] Make FreeText annotations visible for screen readers when in editing mode (bug 1793419)

- When we're editing some annotations, keeping the role="text-box" make them visible
as editable and VoiceOver (Mac) is able to read the contents when they're focused;
- Add an attribute "aria-activedescendant" in order to make the content discoverable
by NVDA on Windows.
This commit is contained in:
Calixte Denizet 2022-10-19 16:20:58 +02:00
parent cc450b405d
commit 535c624e0d

View File

@ -42,6 +42,8 @@ class FreeTextEditor extends AnnotationEditor {
#content = "";
#editorDivId = `${this.id}-editor`;
#hasAlreadyBeenCommitted = false;
#fontSize;
@ -225,10 +227,10 @@ class FreeTextEditor extends AnnotationEditor {
this.parent.setEditingState(false);
this.parent.updateToolbar(AnnotationEditorType.FREETEXT);
super.enableEditMode();
this.enableEditing();
this.overlayDiv.classList.remove("enabled");
this.editorDiv.contentEditable = true;
this.div.draggable = false;
this.div.removeAttribute("aria-activedescendant");
this.editorDiv.addEventListener("keydown", this.#boundEditorDivKeydown);
this.editorDiv.addEventListener("focus", this.#boundEditorDivFocus);
this.editorDiv.addEventListener("blur", this.#boundEditorDivBlur);
@ -243,9 +245,9 @@ class FreeTextEditor extends AnnotationEditor {
this.parent.setEditingState(true);
super.disableEditMode();
this.disableEditing();
this.overlayDiv.classList.add("enabled");
this.editorDiv.contentEditable = false;
this.div.setAttribute("aria-activedescendant", this.#editorDivId);
this.div.draggable = true;
this.editorDiv.removeEventListener("keydown", this.#boundEditorDivKeydown);
this.editorDiv.removeEventListener("focus", this.#boundEditorDivFocus);
@ -409,7 +411,7 @@ class FreeTextEditor extends AnnotationEditor {
this.editorDiv = document.createElement("div");
this.editorDiv.className = "internal";
this.editorDiv.setAttribute("id", `${this.id}-editor`);
this.editorDiv.setAttribute("id", this.#editorDivId);
this.enableEditing();
FreeTextEditor._l10nPromise