diff --git a/.eslintrc b/.eslintrc index 79f15b52..edd05ab5 100644 --- a/.eslintrc +++ b/.eslintrc @@ -15,10 +15,10 @@ "strict": 0 }, "ecmaFeatures": { - "jsx": true, + "jsx": true }, "globals": { "axs": true, - "$": true, + "$": true } } diff --git a/.travis.yml b/.travis.yml index 47f61b2f..52dc916e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,4 @@ language: node_js node_js: - - "4.2.4" + - "10" script: npm run lint && npm test diff --git a/build/tota11y.js b/build/tota11y.js index 306ca858..8e6a5143 100644 --- a/build/tota11y.js +++ b/build/tota11y.js @@ -9,7 +9,7 @@ * Released under the MIT license * http://github.com/Khan/tota11y/blob/master/LICENSE.txt * - * Date: 2017-07-03 + * Date: 2019-03-16 * */ /******/ (function(modules) { // webpackBootstrap @@ -61,19 +61,19 @@ \******************/ /***/ (function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(buildElement) {/** + /* WEBPACK VAR INJECTION */(function(buildElement) {"use strict"; + + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** * The entry point for tota11y. * * Builds and mounts the toolbar. */ // Require the base tota11y styles right away so they can be overwritten - "use strict"; - - var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); - - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - __webpack_require__(/*! ./less/tota11y.less */ 5); var $ = __webpack_require__(/*! jquery */ 4); @@ -84,7 +84,7 @@ // Chrome Accessibility Developer Tools - required once as a global __webpack_require__(/*! script!./~/accessibility-developer-tools/dist/js/axs_testing.js */ 48); - var Toolbar = (function () { + var Toolbar = function () { function Toolbar() { _classCallCheck(this, Toolbar); @@ -96,6 +96,7 @@ * the appropriate plugins on and off. */ + _createClass(Toolbar, [{ key: "handlePluginClick", value: function handlePluginClick(plugin) { @@ -118,15 +119,16 @@ /** * Renders the toolbar and appends it to the specified element. */ + }, { key: "appendTo", value: function appendTo($el) { var _this = this; var $logo = $(logoTemplate()); - var $toolbar = undefined; + var $toolbar = void 0; - var $defaultPlugins = plugins["default"].map(function (Plugin) { + var $defaultPlugins = plugins.default.map(function (Plugin) { // eslint-disable-line no-unused-vars return buildElement(Plugin, { onClick: _this.handlePluginClick.bind(_this) }); }); @@ -197,7 +199,7 @@ }]); return Toolbar; - })(); + }(); $(function () { var bar = new Toolbar(); @@ -216,14 +218,12 @@ \**************************/ /***/ (function(module, exports, __webpack_require__) { + "use strict"; + /** * A function used by Babel to transpile JSX code into jQuery elements */ - "use strict"; - function buildElement(type, props) { - var _arguments = arguments; - // We need to require jQuery inside of this method because `require()` // will work different after mocha's magic "before" method runs. // @@ -238,57 +238,49 @@ // Is our element a Plugin? } else if (type.render) { - // Render the plugin with the passed-in click handler - return type.render(props && props.onClick); - - // Otherwise, build the element with jQuery - } else { - var _len, children, _key; - - var _ret = (function () { - var $el = $("<" + type + ">"); - - // Iterate through props - if (props !== null) { - for (var propName in props) { - // onClick gets turned into a jQuery event handler - // TODO: Handle props like onHover, onFocus, etc. - if (propName === "onClick") { - var handler = props[propName]; - $el.click(handler); - - // Some passed-in props need to be set with $.attr - // Currently we do this for role and aria-* - } else if (/^aria-/.test(propName) || propName === "role") { - var value = props[propName]; - $el.attr(propName, value); - - // All other props can go right to $.prop - } else { - var value = props[propName]; - $el.prop(propName, value); - } - } - } + // Render the plugin with the passed-in click handler + return type.render(props && props.onClick); - // Recurse through the children and append each resulting element to - // the parent + // Otherwise, build the element with jQuery + } else { + var $el = $("<" + type + ">"); + + // Iterate through props + if (props !== null) { + for (var propName in props) { + // onClick gets turned into a jQuery event handler + // TODO: Handle props like onHover, onFocus, etc. + if (propName === "onClick") { + var handler = props[propName]; + $el.click(handler); + + // Some passed-in props need to be set with $.attr + // Currently we do this for role and aria-* + } else if (/^aria-/.test(propName) || propName === "role") { + var value = props[propName]; + $el.attr(propName, value); + + // All other props can go right to $.prop + } else { + var _value = props[propName]; + $el.prop(propName, _value); + } + } + } - for (_len = _arguments.length, children = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { - children[_key - 2] = _arguments[_key]; - } + // Recurse through the children and append each resulting element to + // the parent - children.forEach(function (child) { - $el.append(buildElement(child)); - }); + for (var _len = arguments.length, children = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + children[_key - 2] = arguments[_key]; + } - return { - v: $el - }; - })(); + children.forEach(function (child) { + $el.append(buildElement(child)); + }); - if (typeof _ret === "object") return _ret.v; - } + return $el; + } } module.exports = buildElement; @@ -10446,14 +10438,14 @@ \**************************/ /***/ (function(module, exports, __webpack_require__) { + "use strict"; + /** * An index of plugins. * * Exposes an array of plugin instances. */ - "use strict"; - var AltTextPlugin = __webpack_require__(/*! ./alt-text */ 10); var ContrastPlugin = __webpack_require__(/*! ./contrast */ 31); var HeadingsPlugin = __webpack_require__(/*! ./headings */ 36); @@ -10463,7 +10455,7 @@ var A11yTextWand = __webpack_require__(/*! ./a11y-text-wand */ 44); module.exports = { - "default": [new HeadingsPlugin(), new ContrastPlugin(), new LinkTextPlugin(), new LabelsPlugin(), new AltTextPlugin(), new LandmarksPlugin()], + default: [new HeadingsPlugin(), new ContrastPlugin(), new LinkTextPlugin(), new LabelsPlugin(), new AltTextPlugin(), new LandmarksPlugin()], experimental: [new A11yTextWand()] }; @@ -10475,32 +10467,32 @@ \***********************************/ /***/ (function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(buildElement) {/** - * A plugin to check for valid alternative representations for images - */ - - "use strict"; + /* WEBPACK VAR INJECTION */(function(buildElement) {"use strict"; - var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); - - var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + /** + * A plugin to check for valid alternative representations for images + */ + var $ = __webpack_require__(/*! jquery */ 4); var Plugin = __webpack_require__(/*! ../base */ 11); var annotate = __webpack_require__(/*! ../shared/annotate */ 13)("alt-text"); var audit = __webpack_require__(/*! ../shared/audit */ 30); - var AltTextPlugin = (function (_Plugin) { + var AltTextPlugin = function (_Plugin) { _inherits(AltTextPlugin, _Plugin); function AltTextPlugin() { _classCallCheck(this, AltTextPlugin); - _get(Object.getPrototypeOf(AltTextPlugin.prototype), "constructor", this).apply(this, arguments); + return _possibleConstructorReturn(this, (AltTextPlugin.__proto__ || Object.getPrototypeOf(AltTextPlugin)).apply(this, arguments)); } _createClass(AltTextPlugin, [{ @@ -10564,11 +10556,9 @@ value: function run() { // Generate errors for any images that fail the Accessibility // Developer Tools audit - - var _audit = audit("imagesWithoutAltText"); - - var result = _audit.result; - var elements = _audit.elements; + var _audit = audit("imagesWithoutAltText"), + result = _audit.result, + elements = _audit.elements; if (result === "FAIL") { elements.forEach(this.reportError.bind(this)); @@ -10589,7 +10579,7 @@ }]); return AltTextPlugin; - })(Plugin); + }(Plugin); module.exports = AltTextPlugin; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(/*! ./utils/element */ 3))) @@ -10601,7 +10591,13 @@ \*************************/ /***/ (function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(buildElement) {/** + /* WEBPACK VAR INJECTION */(function(buildElement) {"use strict"; + + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** * Base class for plugins. * * This module defines methods to render and mount plugins to the toolbar. @@ -10612,17 +10608,11 @@ * cleanup: code to run when the plugin is deactivated from the toolbar */ - "use strict"; - - var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); - - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - var InfoPanel = __webpack_require__(/*! ./shared/info-panel */ 12); __webpack_require__(/*! ./style.less */ 28); - var Plugin = (function () { + var Plugin = function () { function Plugin() { _classCallCheck(this, Plugin); @@ -10647,6 +10637,7 @@ */ // Populates the info panel's "Summary" tab + }, { key: "summary", value: function summary($html) { @@ -10654,6 +10645,7 @@ } // Populates the info panel's "About" tab + }, { key: "about", value: function about($html) { @@ -10661,6 +10653,7 @@ } // Adds an entry to the info panel's "Errors" tab + }, { key: "error", value: function error(title, $description, $el) { @@ -10670,6 +10663,7 @@ /** * Renders the plugin view. */ + }, { key: "render", value: function render(clickHandler) { @@ -10678,7 +10672,7 @@ this.$checkbox = buildElement("input", { className: "tota11y-plugin-checkbox tota11y-sr-only", type: "checkbox", - onClick: function () { + onClick: function onClick() { return clickHandler(_this); } }); @@ -10690,7 +10684,7 @@ "div", { "aria-hidden": "true", className: "tota11y-plugin-indicator" }, - "✓" + "\u2713" ), buildElement( "div", @@ -10720,6 +10714,7 @@ /** * Activate the plugin from the UI. */ + }, { key: "activate", value: function activate() { @@ -10730,6 +10725,7 @@ /** * Deactivate the plugin from the UI. */ + }, { key: "deactivate", value: function deactivate() { @@ -10741,7 +10737,7 @@ }]); return Plugin; - })(); + }(); module.exports = Plugin; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(/*! ./utils/element */ 3))) @@ -10753,7 +10749,13 @@ \********************************************/ /***/ (function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(buildElement) {/** + /* WEBPACK VAR INJECTION */(function(buildElement) {"use strict"; + + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** * The following code defines an information panel that can be invoked from * any plugin to display summaries, errors, or more information about what * the plugin is doing. @@ -10769,12 +10771,6 @@ * contains the number of errors listed */ - "use strict"; - - var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); - - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - var $ = __webpack_require__(/*! jquery */ 4); var annotate = __webpack_require__(/*! ../annotate */ 13)("info-panel"); @@ -10785,7 +10781,7 @@ var COLLAPSED_CLASS_NAME = "tota11y-collapsed"; var HIDDEN_CLASS_NAME = "tota11y-info-hidden"; - var InfoPanel = (function () { + var InfoPanel = function () { function InfoPanel(plugin) { _classCallCheck(this, InfoPanel); @@ -10802,6 +10798,7 @@ * Sets the contents of the about section as HTML */ + _createClass(InfoPanel, [{ key: "setAbout", value: function setAbout(about) { @@ -10811,6 +10808,7 @@ /** * Sets the contents of the summary section as HTML */ + }, { key: "setSummary", value: function setSummary(summary) { @@ -10821,6 +10819,7 @@ * Adds an error to the errors tab. Also receives a jQuery element to * highlight on hover. */ + }, { key: "addError", value: function addError(title, $description, $el) { @@ -10879,13 +10878,14 @@ * Positions the info panel and sets up event listeners to make the * panel draggable */ + }, { key: "initAndPosition", value: function initAndPosition() { var _this2 = this; - var panelLeftPx = undefined, - panelTopPx = undefined; + var panelLeftPx = void 0, + panelTopPx = void 0; // Wire up the dismiss button this.$el.find(".tota11y-info-dismiss-trigger").click(function (e) { @@ -10910,10 +10910,10 @@ var isDragging = false; // Variables for the starting positions of the mouse and panel - var initMouseX = undefined, - initMouseY = undefined; - var initPanelLeft = undefined, - initPanelTop = undefined; + var initMouseX = void 0, + initMouseY = void 0; + var initPanelLeft = void 0, + initPanelTop = void 0; $draggable.on("mousedown", function (e) { e.preventDefault(); @@ -10992,7 +10992,7 @@ { "aria-label": "Close info panel", href: "#", className: "tota11y-info-dismiss-trigger" }, - "×" + "\xD7" ) ) ), @@ -11006,7 +11006,7 @@ // Add the appropriate tabs based on which information the info panel // was provided, then highlight the most important one. - var $activeTab = undefined; + var $activeTab = void 0; if (this.about) { $activeTab = this._addTab("About", this.about); } @@ -11025,99 +11025,97 @@ }); if (this.errors.length > 0) { - (function () { - var $errors = $("