ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 01:10:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Annotations] Add some aria-owns in the text layer to link to annotations (bug 1780375)

Browse source 
This patch doesn't structurally change the text layer: it just adds some aria-owns
attributes to some spans.
The aria-owns attribute expect to have an element id, hence it's why it adds back an
id on the element rendering an annotation, but this id is built in using crypto.randomUUID
to avoid any potential issues with the hash in the url.
The elements in the annotation layer are moved into the DOM in order to have them in the
same "order" as they visually are.
The overall goal is to help screen readers to present to the user the annotations as
they visually are and as they come in the text flow.
It is clearly not perfect, but it should improve readability for some people with visual
disabilities.
This commit is contained in:
Calixte Denizet 2022-07-28 17:59:03 +02:00
parent cef2ac99e5
commit f316300113
23 changed files with 436 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/text_layer_builder.js
View file

@ -17,6 +17,8 @@
/** @typedef {import("../src/display/display_utils").PageViewport} PageViewport */
/** @typedef {import("./event_utils").EventBus} EventBus */
/** @typedef {import("./text_highlighter").TextHighlighter} TextHighlighter */
// eslint-disable-next-line max-len
/** @typedef {import("./text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */
import { renderTextLayer } from "pdfjs-lib";
@ -32,6 +34,7 @@ const EXPAND_DIVS_TIMEOUT = 300; // ms
* highlighting text from the find controller.
* @property {boolean} enhanceTextSelection - Option to turn on improved
* text selection.
* @property {TextAccessibilityManager} [accessibilityManager]
*/
/**
@ -47,6 +50,7 @@ class TextLayerBuilder {
viewport,
highlighter = null,
enhanceTextSelection = false,
accessibilityManager = null,
}) {
this.textLayerDiv = textLayerDiv;
this.eventBus = eventBus;
@ -60,6 +64,7 @@ class TextLayerBuilder {
this.textLayerRenderTask = null;
this.highlighter = highlighter;
this.enhanceTextSelection = enhanceTextSelection;
this.accessibilityManager = accessibilityManager;
this._bindMouse();
}
@ -97,6 +102,7 @@ class TextLayerBuilder {
this.textDivs.length = 0;
this.highlighter?.setTextMapping(this.textDivs, this.textContentItemsStr);
this.accessibilityManager?.setTextMapping(this.textDivs);
const textLayerFrag = document.createDocumentFragment();
this.textLayerRenderTask = renderTextLayer({
@ -114,6 +120,7 @@ class TextLayerBuilder {
this.textLayerDiv.append(textLayerFrag);
this._finishRendering();
this.highlighter?.enable();
this.accessibilityManager?.enable();
},
function (reason) {
// Cancelled or failed to render text layer; skipping errors.
@ -130,6 +137,7 @@ class TextLayerBuilder {
this.textLayerRenderTask = null;
}
this.highlighter?.disable();
this.accessibilityManager?.disable();
}
setTextContentStream(readableStream) {