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

Improve highlightments and popups in HCM (bug 1830850)

Browse source 
- Modify the text and background colors in popup to fit a11y requirements
- Add a backdrop filter on clickable areas in using a svg filter mapping
  canvas colors to Highlight and HighlightText ones.
This commit is contained in:
Calixte Denizet 2023-06-23 15:47:59 +02:00
parent ccb72073b0
commit c519cc821b
6 changed files with 248 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/display/annotation_layer.js
View file

@ -210,7 +210,7 @@ class AnnotationElement {
container.style.zIndex = this.parent.zIndex++;
if (this.data.popupRef) {
container.setAttribute("aria-haspopup", true);
container.setAttribute("aria-haspopup", "dialog");
}
if (data.noRotate) {
@ -474,7 +474,7 @@ class AnnotationElement {
*/
_createPopup() {
const { container, data } = this;
container.setAttribute("aria-haspopup", true);
container.setAttribute("aria-haspopup", "dialog");
const popup = new PopupAnnotationElement({
data: {
@ -590,6 +590,17 @@ class AnnotationElement {
getElementsToTriggerPopup() {
return this.quadrilaterals || this.container;
}
addHighlightArea() {
const triggers = this.getElementsToTriggerPopup();
if (Array.isArray(triggers)) {
for (const element of triggers) {
element.classList.add("highlightArea");
}
} else {
triggers.classList.add("highlightArea");
}
}
}
class LinkAnnotationElement extends AnnotationElement {
@ -1881,6 +1892,7 @@ class PopupAnnotationElement extends AnnotationElement {
for (const element of this.elements) {
element.popup = popup;
elementIds.push(element.data.id);
element.addHighlightArea();
}
this.container.setAttribute("aria-controls", elementIds.join(","));
@ -2264,6 +2276,10 @@ class LineAnnotationElement extends AnnotationElement {
getElementsToTriggerPopup() {
return this.#line;
}
addHighlightArea() {
this.container.classList.add("highlightArea");
}
}
class SquareAnnotationElement extends AnnotationElement {
@ -2323,6 +2339,10 @@ class SquareAnnotationElement extends AnnotationElement {
getElementsToTriggerPopup() {
return this.#square;
}
addHighlightArea() {
this.container.classList.add("highlightArea");
}
}
class CircleAnnotationElement extends AnnotationElement {
@ -2383,6 +2403,10 @@ class CircleAnnotationElement extends AnnotationElement {
getElementsToTriggerPopup() {
return this.#circle;
}
addHighlightArea() {
this.container.classList.add("highlightArea");
}
}
class PolylineAnnotationElement extends AnnotationElement {
@ -2452,6 +2476,10 @@ class PolylineAnnotationElement extends AnnotationElement {
getElementsToTriggerPopup() {
return this.#polyline;
}
addHighlightArea() {
this.container.classList.add("highlightArea");
}
}
class PolygonAnnotationElement extends PolylineAnnotationElement {
@ -2556,6 +2584,10 @@ class InkAnnotationElement extends AnnotationElement {
getElementsToTriggerPopup() {
return this.#polylines;
}
addHighlightArea() {
this.container.classList.add("highlightArea");
}
}
class HighlightAnnotationElement extends AnnotationElement {
@ -2750,6 +2782,10 @@ class FileAttachmentAnnotationElement extends AnnotationElement {
return this.#trigger;
}
addHighlightArea() {
this.container.classList.add("highlightArea");
}
/**
* Download the file attachment associated with this annotation.
*