Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create regions only when needed #1119

Merged
merged 3 commits into from
Jul 9, 2024
Merged

Create regions only when needed #1119

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d081930
Only create Region divs when they are in use
dpvc Jul 7, 2024
174291f
Remove coords that are no longer needed with use of clip-path
dpvc Jul 8, 2024
165dfdd
Change clip-path to overflow:hidden
dpvc Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions ts/a11y/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
options.a11y.speechRules = `${options.sre.domain}-${options.sre.style}`;
}
options.MathItem = ExplorerMathItemMixin(options.MathItem, toMathML);
this.explorerRegions = new RegionPool(this);
}

/**
Expand All @@ -258,9 +259,6 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
public explorable(): ExplorerMathDocument {
if (!this.processed.isSet('explorer')) {
if (this.options.enableExplorer) {
if (!this.explorerRegions) {
this.explorerRegions = new RegionPool(this);
}
for (const math of this.math) {
(math as ExplorerMathItem).explorable(this);
}
Expand Down
2 changes: 1 addition & 1 deletion ts/a11y/explorer/KeyExplorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
() => this.brailleRegion.Show(this.node, this.highlighter));
}
if (options.a11y.keyMagnifier) {
this.magnifyRegion.Show(this.node, this.highlighter);
this.magnifyRegion.Show(this.current, this.highlighter);
}
this.Update();
}
Expand Down
11 changes: 0 additions & 11 deletions ts/a11y/explorer/MouseExplorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,6 @@ export abstract class AbstractMouseExplorer<T> extends AbstractExplorer<T> imple
*/
export abstract class Hoverer<T> extends AbstractMouseExplorer<T> {

/**
* Remember the last position to avoid flickering.
* @type {[number, number]}
*/
protected coord: [number, number];

/**
* @constructor
* @extends {AbstractMouseExplorer<T>}
Expand Down Expand Up @@ -127,10 +121,6 @@ export abstract class Hoverer<T> extends AbstractMouseExplorer<T> {
* @override
*/
public MouseOut(event: MouseEvent) {
if (event.clientX === this.coord[0] &&
event.clientY === this.coord[1]) {
return;
}
this.highlighter.unhighlight();
this.region.Hide();
super.MouseOut(event);
Expand All @@ -143,7 +133,6 @@ export abstract class Hoverer<T> extends AbstractMouseExplorer<T> {
public MouseOver(event: MouseEvent) {
super.MouseOver(event);
let target = event.target as HTMLElement;
this.coord = [event.clientX, event.clientY];
let [node, kind] = this.getNode(target);
if (!node) {
return;
Expand Down
56 changes: 29 additions & 27 deletions ts/a11y/explorer/Region.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ export abstract class AbstractRegion<T> implements Region<T> {
constructor(public document: A11yDocument) {
this.CLASS = this.constructor as typeof AbstractRegion;
this.AddStyles();
this.AddElement();
}


Expand All @@ -136,9 +135,9 @@ export abstract class AbstractRegion<T> implements Region<T> {
* @override
*/
public AddElement() {
if (this.div) return;
let element = this.document.adaptor.node('div');
element.classList.add(this.CLASS.className);
element.style.backgroundColor = 'white';
this.div = element;
this.inner = this.document.adaptor.node('div');
this.div.appendChild(this.inner);
Expand All @@ -153,6 +152,7 @@ export abstract class AbstractRegion<T> implements Region<T> {
* @override
*/
public Show(node: HTMLElement, highlighter: Sre.highlighter) {
this.AddElement();
this.position(node);
this.highlight(highlighter);
this.div.classList.add(this.CLASS.className + '_Show');
Expand All @@ -177,7 +177,10 @@ export abstract class AbstractRegion<T> implements Region<T> {
* @override
*/
public Hide() {
this.div.classList.remove(this.CLASS.className + '_Show');
if (!this.div) return;
this.div.parentNode.removeChild(this.div);
this.div = null;
this.inner = null;
}


Expand All @@ -198,6 +201,7 @@ export abstract class AbstractRegion<T> implements Region<T> {
* @param {HTMLElement} node The reference node.
*/
protected stackRegions(node: HTMLElement) {
this.AddElement();
// TODO: This could be made more efficient by caching regions of a class.
const rect = node.getBoundingClientRect();
let baseBottom = 0;
Expand Down Expand Up @@ -270,6 +274,7 @@ export class StringRegion extends AbstractRegion<string> {
* @override
*/
public Clear(): void {
if (!this.div) return;
this.Update('');
this.inner.style.top = '';
this.inner.style.backgroundColor = '';
Expand All @@ -280,8 +285,13 @@ export class StringRegion extends AbstractRegion<string> {
* @override
*/
public Update(speech: string) {
this.inner.textContent = '';
this.inner.textContent = speech;
if (speech) {
this.AddElement();
}
if (this.inner) {
this.inner.textContent = '';
this.inner.textContent = speech;
}
}

/**
Expand All @@ -296,6 +306,7 @@ export class StringRegion extends AbstractRegion<string> {
* @override
*/
protected highlight(highlighter: Sre.highlighter) {
if (!this.div) return;
const color = highlighter.colorString();
this.inner.style.backgroundColor = color.background;
this.inner.style.color = color.foreground;
Expand All @@ -317,13 +328,11 @@ export class ToolTip extends StringRegion {
protected static style: CssStyles =
new CssStyles({
['.' + ToolTip.className]: {
display: 'none',
},
['.' + ToolTip.className + '_Show']: {
width: 'auto', height: 'auto', opacity: 1, 'text-align': 'center',
'border-radius': '6px', padding: 0,
'border-bottom': '1px dotted black',
position: 'absolute', display: 'inline-block',
'background-color': 'white',
'z-index': 202
}
});
Expand All @@ -344,14 +353,12 @@ export class LiveRegion extends StringRegion {
protected static style: CssStyles =
new CssStyles({
['.' + LiveRegion.className]: {
display: 'none'
},
['.' + LiveRegion.className + '_Show']: {
position: 'absolute', top: 0,
display: 'block', width: 'auto', height: 'auto',
padding: 0, opacity: 1, 'z-index': '202',
left: 0, right: 0, 'margin': '0 auto',
'background-color': 'rgba(0, 0, 255, 0.2)', 'box-shadow': '0px 5px 20px #888',
'background-color': 'white',
'box-shadow': '0px 5px 20px #888',
border: '2px solid #CCCCCC'
}
});
Expand Down Expand Up @@ -531,27 +538,17 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
protected static style: CssStyles =
new CssStyles({
['.' + HoverRegion.className]: {
display: 'none'
},
['.' + HoverRegion.className + '_Show']: {
display: 'block', position: 'absolute',
width: 'max-content', height: 'auto',
padding: 0, opacity: 1, 'z-index': '202', 'margin': '0 auto',
'background-color': 'rgba(0, 0, 255, 0.2)',
'background-color': 'white', 'line-height': 0,
'box-shadow': '0px 10px 20px #888', border: '2px solid #CCCCCC'
},
['.' + HoverRegion.className + ' > div']: {
'clip-path': 'rect(100% 0 0 100%)'
zorkow marked this conversation as resolved.
Show resolved Hide resolved
}
});


/**
* @constructor
* @param {A11yDocument} document The document the live region is added to.
*/
constructor(public document: A11yDocument) {
super(document);
this.inner.style.lineHeight = '0';
}

/**
* Sets the position of the region with respect to align parameter. There are
* three options: top, bottom and center. Center is the default.
Expand All @@ -568,7 +565,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
let top;
switch (this.document.options.a11y.align) {
case 'top':
top = nodeRect.top - divRect.height - 10 ;
top = nodeRect.top - divRect.height - 10;
break;
case 'bottom':
top = nodeRect.bottom + 10;
Expand All @@ -588,6 +585,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
* @override
*/
protected highlight(highlighter: Sre.highlighter) {
if (!this.div) return;
// TODO Do this with styles to avoid the interaction of SVG/CHTML.
if (this.inner.firstChild &&
!(this.inner.firstChild as HTMLElement).hasAttribute('sre-highlight')) {
Expand All @@ -602,6 +600,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
* @override
*/
public Show(node: HTMLElement, highlighter: Sre.highlighter) {
this.AddElement();
this.div.style.fontSize = this.document.options.a11y.magnify;
this.Update(node);
super.Show(node, highlighter);
Expand All @@ -611,6 +610,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
* @override
*/
public Clear() {
if (!this.div) return;
this.inner.textContent = '';
this.inner.style.top = '';
this.inner.style.backgroundColor = '';
Expand All @@ -620,9 +620,11 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
* @override
*/
public Update(node: HTMLElement) {
if (!this.div) return;
this.Clear();
let mjx = this.cloneNode(node);
this.inner.appendChild(mjx);
this.position(node);
}

/**
Expand Down
4 changes: 4 additions & 0 deletions ts/a11y/semantic-enrich.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ export function EnrichedMathDocumentMixin<N, T, D, B extends MathDocumentConstru
this.attachSpeechDone();
}
this.awaitingSpeech = Array.from(this.math);
if (this.awaitingSpeech.length === 0) {
this.awaitingSpeech = null;
return;
}
this.renderPromises.push(new Promise<void>((ok, _fail) => {
this.attachSpeechDone = ok;
}));
Expand Down