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 = $("
").addClass("tota11y-info-errors");
+ var $errors = $("
").addClass("tota11y-info-errors");
- // Store a reference to the "Errors" tab so we can switch to it
- // later
- var $errorsTab = undefined;
+ // Store a reference to the "Errors" tab so we can switch to it
+ // later
+ var $errorsTab = void 0;
- _this3.errors.forEach(function (error, i) {
- var $error = $(errorTemplate(error));
+ this.errors.forEach(function (error, i) {
+ var $error = $(errorTemplate(error));
- // Insert description jQuery object into template.
- // Description is passed as jQuery object
- // so that functionality can be inserted.
- $error.find(".tota11y-info-error-description").prepend(error.$description);
+ // Insert description jQuery object into template.
+ // Description is passed as jQuery object
+ // so that functionality can be inserted.
+ $error.find(".tota11y-info-error-description").prepend(error.$description);
- $errors.append($error);
+ $errors.append($error);
- // Wire up the expand/collapse trigger
- var $trigger = $error.find(".tota11y-info-error-trigger");
- var $desc = $error.find(".tota11y-info-error-description");
+ // Wire up the expand/collapse trigger
+ var $trigger = $error.find(".tota11y-info-error-trigger");
+ var $desc = $error.find(".tota11y-info-error-description");
- $trigger.click(function (e) {
- e.preventDefault();
- e.stopPropagation();
- $trigger.toggleClass(COLLAPSED_CLASS_NAME);
- $desc.toggleClass(COLLAPSED_CLASS_NAME);
- });
+ $trigger.click(function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $trigger.toggleClass(COLLAPSED_CLASS_NAME);
+ $desc.toggleClass(COLLAPSED_CLASS_NAME);
+ });
- // Attach a function to the original error object to open
- // this error so it can be done externally. We'll use this to
- // access error entries in the info panel from labels.
- error.show = function () {
- // Make sure info panel is visible
- _this3.$el.removeClass(HIDDEN_CLASS_NAME);
-
- // Open the error entry
- $trigger.removeClass(COLLAPSED_CLASS_NAME);
- $desc.removeClass(COLLAPSED_CLASS_NAME);
-
- // Switch to the "Errors" tab
- $errorsTab.trigger("activate");
-
- // Scroll to the error entry
- var $scrollParent = $trigger.parents(".tota11y-info-section");
- $scrollParent[0].scrollTop = $trigger[0].offsetTop - 10;
- };
-
- // Attach the `$trigger` as well so can access it externally.
- // We use this to highlight the trigger when hovering over
- // inline error labels.
- error.$trigger = $trigger;
-
- // Wire up the scroll-to-error button
- var $scroll = $error.find(".tota11y-info-error-scroll");
- $scroll.click(function (e) {
- e.preventDefault();
- e.stopPropagation();
-
- // TODO: This attempts to scroll to fixed elements
- $(document).scrollTop(error.$el.offset().top - 80);
- });
+ // Attach a function to the original error object to open
+ // this error so it can be done externally. We'll use this to
+ // access error entries in the info panel from labels.
+ error.show = function () {
+ // Make sure info panel is visible
+ _this3.$el.removeClass(HIDDEN_CLASS_NAME);
+
+ // Open the error entry
+ $trigger.removeClass(COLLAPSED_CLASS_NAME);
+ $desc.removeClass(COLLAPSED_CLASS_NAME);
- // Expand the first violation
- if (i === 0) {
- $desc.toggleClass(COLLAPSED_CLASS_NAME);
- $trigger.toggleClass(COLLAPSED_CLASS_NAME);
- }
+ // Switch to the "Errors" tab
+ $errorsTab.trigger("activate");
- // Highlight the violating element on hover/focus. We do it
- // for both $trigger and $scroll to allow users to see the
- // highlight when scrolling to the element with the button.
- annotate.toggleHighlight(error.$el, $trigger);
- annotate.toggleHighlight(error.$el, $scroll);
+ // Scroll to the error entry
+ var $scrollParent = $trigger.parents(".tota11y-info-section");
+ $scrollParent[0].scrollTop = $trigger[0].offsetTop - 10;
+ };
- // Add code from error.$el to the information panel
- var errorHTML = error.$el[0].outerHTML;
+ // Attach the `$trigger` as well so can access it externally.
+ // We use this to highlight the trigger when hovering over
+ // inline error labels.
+ error.$trigger = $trigger;
- // Trim the code block if it is over 300 characters
- if (errorHTML.length > 300) {
- errorHTML = errorHTML.substring(0, 300) + "...";
- }
+ // Wire up the scroll-to-error button
+ var $scroll = $error.find(".tota11y-info-error-scroll");
+ $scroll.click(function (e) {
+ e.preventDefault();
+ e.stopPropagation();
- var $relevantCode = $error.find(".tota11y-info-error-description-code-container code");
- $relevantCode.text(errorHTML);
+ // TODO: This attempts to scroll to fixed elements
+ $(document).scrollTop(error.$el.offset().top - 80);
});
- $errorsTab = $activeTab = _this3._addTab("Errors", $errors);
+ // Expand the first violation
+ if (i === 0) {
+ $desc.toggleClass(COLLAPSED_CLASS_NAME);
+ $trigger.toggleClass(COLLAPSED_CLASS_NAME);
+ }
+
+ // Highlight the violating element on hover/focus. We do it
+ // for both $trigger and $scroll to allow users to see the
+ // highlight when scrolling to the element with the button.
+ annotate.toggleHighlight(error.$el, $trigger);
+ annotate.toggleHighlight(error.$el, $scroll);
+
+ // Add code from error.$el to the information panel
+ var errorHTML = error.$el[0].outerHTML;
+
+ // Trim the code block if it is over 300 characters
+ if (errorHTML.length > 300) {
+ errorHTML = errorHTML.substring(0, 300) + "...";
+ }
+
+ var $relevantCode = $error.find(".tota11y-info-error-description-code-container code");
+ $relevantCode.text(errorHTML);
+ });
- // Add a small badge next to the tab title
- var $badge = $("
").addClass("tota11y-info-error-count").text(_this3.errors.length);
+ $errorsTab = $activeTab = this._addTab("Errors", $errors);
- $activeTab.find(".tota11y-info-tab-anchor").append($badge);
- })();
+ // Add a small badge next to the tab title
+ var $badge = $("
").addClass("tota11y-info-error-count").text(this.errors.length);
+
+ $activeTab.find(".tota11y-info-tab-anchor").append($badge);
}
if ($activeTab) {
@@ -11157,7 +11155,7 @@
}]);
return InfoPanel;
- })();
+ }();
module.exports = InfoPanel;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(/*! ./utils/element */ 3)))
@@ -11169,6 +11167,8 @@
\******************************************/
/***/ (function(module, exports, __webpack_require__) {
+ "use strict";
+
/**
* Utility functions to annotate particular site elements.
*
@@ -11181,8 +11181,6 @@
* keeping track of an extra class name elsewhere.
*/
- "use strict";
-
var $ = __webpack_require__(/*! jquery */ 4);
var errorLabelTemplate = __webpack_require__(/*! ./error-label.handlebars */ 14);
@@ -11271,13 +11269,13 @@
// Places a small label in the top left corner of a given jQuery
// element. By default, this label contains the element's tagName.
label: function label($el) {
- var text = arguments.length <= 1 || arguments[1] === undefined ? $el.prop("tagName").toLowerCase() : arguments[1];
- return (function () {
- var $label = createAnnotation($el, "tota11y-label");
- return $label.html(text);
- })();
+ var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : $el.prop("tagName").toLowerCase();
+
+ var $label = createAnnotation($el, "tota11y-label");
+ return $label.html(text);
},
+
// Places a special label on an element that, when hovered, displays
// an expanded error message.
//
@@ -11310,6 +11308,7 @@
return this.label($el).addClass("tota11y-label-error").html($innerHtml);
},
+
// Highlights a given jQuery element by placing a translucent
// rectangle directly over it
highlight: function highlight($el) {
@@ -11321,12 +11320,13 @@
});
},
+
// Toggles a highlight on a given jQuery element `$el` when `$trigger`
// is hovered (mouseenter/mouseleave) or focused (focus/blur)
toggleHighlight: function toggleHighlight($el, $trigger) {
var _this = this;
- var $highlight = undefined;
+ var $highlight = void 0;
$trigger.on("mouseenter focus", function () {
if ($highlight) {
@@ -11343,15 +11343,12 @@
}
});
},
-
hide: function hide() {
$(".tota11y.tota11y-label").hide();
},
-
show: function show() {
$(".tota11y.tota11y-label").show();
},
-
removeAll: function removeAll() {
// Remove all annotations
$("." + ANNOTATION_CLASS).remove();
@@ -11366,7 +11363,7 @@
\********************************************************/
/***/ (function(module, exports, __webpack_require__) {
- var Handlebars = __webpack_require__(/*! ./~/handlebars/runtime.js */ 15);
+ var Handlebars = __webpack_require__(/*! ../../../~/handlebars/runtime.js */ 15);
function __default(obj) { return obj && (obj.__esModule ? obj["default"] : obj); }
module.exports = (Handlebars["default"] || Handlebars).template({"1":function(depth0,helpers,partials,data) {
return "