alex/yomichan
1
Fork 0
Code Releases Activity

Google Docs accessibility simplifications (#2237)

Browse Source 
* Use getAttribute instead of dataset, in case SVG node APIs are unusual

* Use pointer-events instead of fill

* Use elementFromPoint instead of elementsFromPoint
This commit is contained in:
toasted-nutbread 2022-09-25 09:42:20 -04:00 committed by GitHub
parent 75d3059451
commit 642dcb8fc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ext/js/accessibility/google-docs-util.js
View File

@ -33,26 +33,28 @@ class GoogleDocsUtil {
* @returns {?TextSourceRange|TextSourceElement} A range for the hovered text or element, or `null` if no applicable content was found. * @returns {?TextSourceRange|TextSourceElement} A range for the hovered text or element, or `null` if no applicable content was found.
*/ */
static getRangeFromPoint(x, y, {normalizeCssZoom}) { static getRangeFromPoint(x, y, {normalizeCssZoom}) {
const selector = '.kix-canvas-tile-content svg>g>rect'; const styleNode = this._getStyleNode();
const styleNode = this._getStyleNode(selector);
styleNode.disabled = false; styleNode.disabled = false;
const elements = document.elementsFromPoint(x, y); const element = document.elementFromPoint(x, y);
styleNode.disabled = true; styleNode.disabled = true;
for (const element of elements) { if (element !== null && element.matches('.kix-canvas-tile-content svg>g>rect')) {
if (!element.matches(selector)) { continue; }
const ariaLabel = element.getAttribute('aria-label'); const ariaLabel = element.getAttribute('aria-label');
if (typeof ariaLabel !== 'string' || ariaLabel.length === 0) { continue; } if (typeof ariaLabel === 'string' && ariaLabel.length > 0) {
return this._createRange(element, ariaLabel, x, y, normalizeCssZoom); return this._createRange(element, ariaLabel, x, y, normalizeCssZoom);
}
} }
return null; return null;
} }
static _getStyleNode(selector) { static _getStyleNode() {
// This <style> node is necessary to force the SVG <rect> elements to have a fill, // This <style> node is necessary to force the SVG <rect> elements to have a fill,
// which allows them to be included in document.elementsFromPoint's return value. // which allows them to be included in document.elementsFromPoint's return value.
if (this._styleNode === null) { if (this._styleNode === null) {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = `${selector}{fill:#0000 !important;}`; style.textContent = [
'.kix-canvas-tile-content{pointer-events:none!important;}',
'.kix-canvas-tile-content svg>g>rect{pointer-events:all!important;}'
].join('\n');
const parent = document.head || document.documentElement; const parent = document.head || document.documentElement;
if (parent !== null) { if (parent !== null) {
parent.appendChild(style); parent.appendChild(style);
@ -67,13 +69,14 @@ class GoogleDocsUtil {
const content = document.createTextNode(text); const content = document.createTextNode(text);
const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const transform = element.getAttribute('transform') || ''; const transform = element.getAttribute('transform') || '';
const font = element.getAttribute('data-font-css') || '';
svgText.setAttribute('x', element.getAttribute('x')); svgText.setAttribute('x', element.getAttribute('x'));
svgText.setAttribute('y', element.getAttribute('y')); svgText.setAttribute('y', element.getAttribute('y'));
svgText.appendChild(content); svgText.appendChild(content);
const textStyle = svgText.style; const textStyle = svgText.style;
this._setImportantStyle(textStyle, 'all', 'initial'); this._setImportantStyle(textStyle, 'all', 'initial');
this._setImportantStyle(textStyle, 'transform', transform); this._setImportantStyle(textStyle, 'transform', transform);
this._setImportantStyle(textStyle, 'font', element.dataset.fontCss); this._setImportantStyle(textStyle, 'font', font);
this._setImportantStyle(textStyle, 'text-anchor', 'start'); this._setImportantStyle(textStyle, 'text-anchor', 'start');
element.parentNode.appendChild(svgText); element.parentNode.appendChild(svgText);