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.
*/
static getRangeFromPoint(x, y, {normalizeCssZoom}) {
const selector = '.kix-canvas-tile-content svg>g>rect';
const styleNode = this._getStyleNode(selector);
const styleNode = this._getStyleNode();
styleNode.disabled = false;
const elements = document.elementsFromPoint(x, y);
const element = document.elementFromPoint(x, y);
styleNode.disabled = true;
for (const element of elements) {
if (!element.matches(selector)) { continue; }
if (element !== null && element.matches('.kix-canvas-tile-content svg>g>rect')) {
const ariaLabel = element.getAttribute('aria-label');
if (typeof ariaLabel !== 'string' || ariaLabel.length === 0) { continue; }
return this._createRange(element, ariaLabel, x, y, normalizeCssZoom);
if (typeof ariaLabel === 'string' && ariaLabel.length > 0) {
return this._createRange(element, ariaLabel, x, y, normalizeCssZoom);
}
}
return null;
}
static _getStyleNode(selector) {
static _getStyleNode() {
// 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.
if (this._styleNode === null) {
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;
if (parent !== null) {
parent.appendChild(style);
@ -67,13 +69,14 @@ class GoogleDocsUtil {
const content = document.createTextNode(text);
const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const transform = element.getAttribute('transform') || '';
const font = element.getAttribute('data-font-css') || '';
svgText.setAttribute('x', element.getAttribute('x'));
svgText.setAttribute('y', element.getAttribute('y'));
svgText.appendChild(content);
const textStyle = svgText.style;
this._setImportantStyle(textStyle, 'all', 'initial');
this._setImportantStyle(textStyle, 'transform', transform);
this._setImportantStyle(textStyle, 'font', element.dataset.fontCss);
this._setImportantStyle(textStyle, 'font', font);
this._setImportantStyle(textStyle, 'text-anchor', 'start');
element.parentNode.appendChild(svgText);