Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/*
 * @package    tiny_accessibilitychecker
 * @copyright  2022, Stevani Andolo  <stevani@hotmail.com.au>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import Templates from 'core/templates';
import {getString, getStrings} from 'core/str';
import {component} from './common';
import Modal from 'core/modal';
import * as ModalEvents from 'core/modal_events';
import ColorBase from './colorbase';
import {getPlaceholderSelectors} from 'editor_tiny/options';

/**
 * @typedef ProblemDetail
 * @type {object}
 * @param {string} description The description of the problem
 * @param {ProblemNode[]} problemNodes The list of affected nodes
 */

/**
 * @typedef ProblemNode
 * @type {object}
 * @param {string} nodeName The node name for the affected node
 * @param {string} nodeIndex The indexd of the node
 * @param {string} text A description of the issue
 * @param {string} src The source of the image
 */

export default class {

    constructor(editor) {
        this.editor = editor;
        this.colorBase = new ColorBase();
        this.modal = null;
        this.placeholderSelectors = null;
        const placeholders = getPlaceholderSelectors(this.editor);
        if (placeholders.length) {
            this.placeholderSelectors = placeholders.join(', ');
        }
    }

    destroy() {
        delete this.editor;
        delete this.colorBase;

        this.modal.destroy();
        delete this.modal;
    }

    async displayDialogue() {
        this.modal = await Modal.create({
            large: true,
            title: getString('pluginname', component),
            body: this.getDialogueContent(),
            show: true,
        });

        // Destroy the class when hiding the modal.
        this.modal.getRoot().on(ModalEvents.hidden, () => this.destroy());

        this.modal.getRoot()[0].addEventListener('click', (event) => {
            const faultLink = event.target.closest('[data-action="highlightfault"]');
            if (!faultLink) {
                return;
            }

            event.preventDefault();

            const nodeName = faultLink.dataset.nodeName;
            let selectedNode = null;
            if (nodeName) {
                if (nodeName.includes(',') || nodeName === 'body') {
                    selectedNode = this.editor.dom.select('body')[0];
                } else {
                    const nodeIndex = faultLink.dataset.nodeIndex ?? 0;
                    selectedNode = this.editor.dom.select(nodeName)[nodeIndex];
                }
            }

            if (selectedNode && selectedNode.nodeName.toUpperCase() !== 'BODY') {
                this.selectAndScroll(selectedNode);
            }

            this.modal.hide();
        });
    }

    async getAllWarningStrings() {
        const keys = [
            'emptytext',
            'entiredocument',
            'imagesmissingalt',
            'needsmorecontrast',
            'needsmoreheadings',
            'tablesmissingcaption',
            'tablesmissingheaders',
            'tableswithmergedcells',
        ];

        const stringValues = await getStrings(keys.map((key) => ({key, component})));
        return new Map(keys.map((key, index) => ([key, stringValues[index]])));
    }

    /**
     * Return the dialogue content.
     *
     * @return {Promise<Array>} A template promise containing the rendered dialogue content.
     */
     async getDialogueContent() {
        const langStrings = await this.getAllWarningStrings();

        // Translate langstrings into real strings.
        const warnings = this.getWarnings().map((warning) => {
            if (warning.description) {
                if (warning.description.type === 'langstring') {
                    warning.description = langStrings.get(warning.description.value);
                } else {
                    warning.description = warning.description.value;
                }
            }

            warning.nodeData = warning.nodeData.map((problemNode) => {
                if (problemNode.text) {
                    if (problemNode.text.type === 'langstring') {
                        problemNode.text = langStrings.get(problemNode.text.value);
                    } else {
                        problemNode.text = problemNode.text.value;
                    }
                }

                return problemNode;
            });

            return warning;
        });

        return Templates.render('tiny_accessibilitychecker/warning_content', {
            warnings
        });
    }

    /**
     * Set the selection and scroll to the selected element.
     *
     * @param {node} node
     */
    selectAndScroll(node) {
        this.editor.selection.select(node).scrollIntoView({
            behavior: 'smooth',
            block: 'nearest'
        });
    }

    /**
     * Find all problems with the content editable region.
     *
     * @return {ProblemDetail[]} A complete list of all warnings and problems.
     */
    getWarnings() {
        const warnings = [];

        // Check Images with no alt text or dodgy alt text.
        warnings.push(this.createWarnings('imagesmissingalt', this.checkImage(), true));
        warnings.push(this.createWarnings('needsmorecontrast', this.checkOtherElements(), false));

        // Check for no headings.
        if (this.editor.getContent({format: 'text'}).length > 1000 && this.editor.dom.select('h3,h4,h5').length < 1) {
            warnings.push(this.createWarnings('needsmoreheadings', [this.editor], false));
        }

        // Check for tables with no captions.
        warnings.push(this.createWarnings('tablesmissingcaption', this.checkTableCaption(), false));

        // Check for tables with merged cells.
        warnings.push(this.createWarnings('tableswithmergedcells', this.checkTableMergedCells(), false));

        // Check for tables with no row/col headers.
        warnings.push(this.createWarnings('tablesmissingheaders', this.checkTableHeaders(), false));

        return warnings.filter((warning) => warning.nodeData.length > 0);
    }

    /**
     * Generate the data that describes the issues found.
     *
     * @param {String} description Description of this failure.
     * @param {HTMLElement[]} nodes An array of failing nodes.
     * @param {boolean} isImageType Whether the warnings are related to image type checks
     * @return {ProblemDetail[]} A set of problem details
     */
    createWarnings(description, nodes, isImageType) {
        const getTextValue = (node) => {
            if (node === this.editor) {
                return {
                    type: 'langstring',
                    value: 'entiredocument',
                };
            }

            const emptyStringValue = {
                type: 'langstring',
                value: 'emptytext',
            };
            if ('innerText' in node) {
                const value = node.innerText.trim();
                return value.length ? {type: 'raw', value} : emptyStringValue;
            } else if ('textContent' in node) {
                const value = node.textContent.trim();
                return value.length ? {type: 'raw', value} : emptyStringValue;
            }

            return {type: 'raw', value: node.nodeName};
        };

        const getEventualNode = (node) => {
            if (node !== this.editor) {
                return node;
            }
            const childNodes = node.dom.select('body')[0].childNodes;
            if (childNodes.length) {
                return document.body;
            } else {
                return childNodes;
            }
        };

        const warning = {
            description: {
                type: 'langstring',
                value: description,
            },
            nodeData: [],
        };

        warning.nodeData = [...nodes].filter((node) => {
            // If the failed node is a placeholder element. We should remove it from the list.
            if (node !== this.editor && this.placeholderSelectors) {
                return node.matches(this.placeholderSelectors) === false;
            }

            return node;
        }).map((node) => {
            const describedNode = getEventualNode(node);

            // Find the index of the node within the type of node.
            // This is used to select the correct node when the user selects it.
            const nodeIndex = this.editor.dom.select(describedNode.nodeName).indexOf(describedNode);
            const warning = {
                src: null,
                text: null,
                nodeName: describedNode.nodeName,
                nodeIndex,
            };

            if (isImageType) {
                warning.src = node.getAttribute('src');
            } else {
                warning.text = getTextValue(node);
            }

            return warning;
        });

        return warning;
    }

    /**
     * Check accessiblity issue only for img type.
     *
     * @return {Node} A complete list of all warnings and problems.
     */
    checkImage() {
        const problemNodes = [];
        this.editor.dom.select('img').forEach((img) => {
            const alt = img.getAttribute('alt');
            if (!alt && img.getAttribute('role') !== 'presentation') {
                problemNodes.push(img);
            }
        });
        return problemNodes;
    }

    /**
     * Look for any table without a caption.
     *
     * @return {Node} A complete list of all warnings and problems.
     */
    checkTableCaption() {
        const problemNodes = [];
        this.editor.dom.select('table').forEach((table) => {
            const caption = table.querySelector('caption');
            if (!caption?.textContent.trim()) {
                problemNodes.push(table);
            }
        });

        return problemNodes;
    }

    /**
     * Check accessiblity issue for not img and table only.
     *
     * @return {Node} A complete list of all warnings and problems.
     * @private
     */
    checkOtherElements() {
        const problemNodes = [];

        const getRatio = (lum1, lum2) => {
            // Algorithm from "http://www.w3.org/TR/WCAG20-GENERAL/G18.html".
            if (lum1 > lum2) {
                return (lum1 + 0.05) / (lum2 + 0.05);
            } else {
                return (lum2 + 0.05) / (lum1 + 0.05);
            }
        };

        this.editor.dom.select('body *')
            .filter((node) => node.hasChildNodes() && node.childNodes[0].nodeValue !== null)
            .forEach((node) => {
                const foreground = this.colorBase.fromArray(
                    this.getComputedBackgroundColor(
                        node,
                        window.getComputedStyle(node, null).getPropertyValue('color')
                    ),
                    this.colorBase.TYPES.RGBA
                );
                const background = this.colorBase.fromArray(
                    this.getComputedBackgroundColor(
                        node
                    ),
                    this.colorBase.TYPES.RGBA
                );

                const lum1 = this.getLuminanceFromCssColor(foreground);
                const lum2 = this.getLuminanceFromCssColor(background);
                const ratio = getRatio(lum1, lum2);

                if (ratio <= 4.5) {
                    window.console.log(`
                        Contrast ratio is too low: ${ratio}
                        Colour 1: ${foreground}
                        Colour 2: ${background}
                        Luminance 1: ${lum1}
                        Luminance 2: ${lum2}
                    `);

                    // We only want the highest node with dodgy contrast reported.
                    if (!problemNodes.find((existingProblemNode) => existingProblemNode.contains(node))) {
                        problemNodes.push(node);
                    }
                }
            });
        return problemNodes;
    }

    /**
     * Check accessiblity issue only for table with merged cells.
     *
     * @return {Node} A complete list of all warnings and problems.
     * @private
     */
    checkTableMergedCells() {
        const problemNodes = [];
        this.editor.dom.select('table').forEach((table) => {
            const rowcolspan = table.querySelectorAll('[colspan], [rowspan]');
            if (rowcolspan.length) {
                problemNodes.push(table);
            }
        });
        return problemNodes;
    }

    /**
     * Check accessiblity issue only for table with no headers.
     *
     * @return {Node} A complete list of all warnings and problems.
     * @private
     */
    checkTableHeaders() {
        const problemNodes = [];

        this.editor.dom.select('table').forEach((table) => {
            if (table.querySelector('tr').querySelector('td')) {
                // The first row has a non-header cell, so all rows must have at least one header.
                const missingHeader = [...table.querySelectorAll('tr')].some((row) => {
                    const header = row.querySelector('th');
                    if (!header) {
                        return true;
                    }

                    if (!header.textContent.trim()) {
                        return true;
                    }

                    return false;
                });
                if (missingHeader) {
                    // At least one row is missing the header, or it is empty.
                    problemNodes.push(table);
                }
            } else {
                // Every header must have some content.
                if ([...table.querySelectorAll('tr th')].some((header) => !header.textContent.trim())) {
                    problemNodes.push(table);
                }
            }
        });
        return problemNodes;
    }

    /**
     * Convert a CSS color to a luminance value.
     *
     * @param {String} colortext The Hex value for the colour
     * @return {Number} The luminance value.
     * @private
     */
    getLuminanceFromCssColor(colortext) {
        if (colortext === 'transparent') {
            colortext = '#ffffff';
        }
        const color = this.colorBase.toArray(this.colorBase.toRGB(colortext));

        // Algorithm from "http://www.w3.org/TR/WCAG20-GENERAL/G18.html".
        const part1 = (a) => {
            a = parseInt(a, 10) / 255.0;
            if (a <= 0.03928) {
                a = a / 12.92;
            } else {
                a = Math.pow(((a + 0.055) / 1.055), 2.4);
            }
            return a;
        };

        const r1 = part1(color[0]);
        const g1 = part1(color[1]);
        const b1 = part1(color[2]);

        return 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1;
    }

    /**
     * Get the computed RGB converted to full alpha value, considering the node hierarchy.
     *
     * @param {Node} node
     * @param {String} color The initial colour. If not specified, fetches the backgroundColor from the node.
     * @return {Array} Colour in Array form (RGBA)
     * @private
     */
    getComputedBackgroundColor(node, color) {
        if (!node.parentNode) {
            // This is the document node and has no colour.
            // We cannot use window.getComputedStyle on the document.
            // If we got here, then the document has no background colour. Fall back to white.
            return this.colorBase.toArray('rgba(255, 255, 255, 1)');
        }
        color = color ? color : window.getComputedStyle(node, null).getPropertyValue('background-color');

        if (color.toLowerCase() === 'rgba(0, 0, 0, 0)' || color.toLowerCase() === 'transparent') {
            color = 'rgba(1, 1, 1, 0)';
        }

        // Convert the colour to its constituent parts in RGBA format, then fetch the alpha.
        const colorParts = this.colorBase.toArray(color);
        const alpha = colorParts[3];

        if (alpha === 1) {
            // If the alpha of the background is already 1, then the parent background colour does not change anything.
            return colorParts;
        }

        // Fetch the computed background colour of the parent and use it to calculate the RGB of this item.
        const parentColor = this.getComputedBackgroundColor(node.parentNode);
        return [
            // RGB = (alpha * R|G|B) + (1 - alpha * solid parent colour).
            (1 - alpha) * parentColor[0] + alpha * colorParts[0],
            (1 - alpha) * parentColor[1] + alpha * colorParts[1],
            (1 - alpha) * parentColor[2] + alpha * colorParts[2],
            // We always return a colour with full alpha.
            1
        ];
    }
}