Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

12 files changed, 3807 insertions, 0 deletions

diff --git a/devtools/server/actors/accessibility/accessibility.js b/devtools/server/actors/accessibility/accessibility.js
new file mode 100644
index 0000000000..6bdf0e9f32
--- /dev/null
+++ b/devtools/server/actors/accessibility/accessibility.js
@@ -0,0 +1,130 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  accessibilitySpec,
+} = require("resource://devtools/shared/specs/accessibility.js");
+
+loader.lazyRequireGetter(
+  this,
+  "AccessibleWalkerActor",
+  "resource://devtools/server/actors/accessibility/walker.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "SimulatorActor",
+  "resource://devtools/server/actors/accessibility/simulator.js",
+  true
+);
+
+/**
+ * The AccessibilityActor is a top level container actor that initializes
+ * accessible walker and is the top-most point of interaction for accessibility
+ * tools UI for a top level content process.
+ */
+class AccessibilityActor extends Actor {
+  constructor(conn, targetActor) {
+    super(conn, accessibilitySpec);
+    // This event is fired when accessibility service is initialized or shut
+    // down. "init" and "shutdown" events are only relayed when the enabled
+    // state matches the event (e.g. the event came from the same process as
+    // the actor).
+    Services.obs.addObserver(this, "a11y-init-or-shutdown");
+    this.targetActor = targetActor;
+  }
+
+  getTraits() {
+    // The traits are used to know if accessibility actors support particular
+    // API on the server side.
+    return {
+      // @backward-compat { version 84 } Fixed on the server by Bug 1654956.
+      tabbingOrder: true,
+    };
+  }
+
+  bootstrap() {
+    return {
+      enabled: this.enabled,
+    };
+  }
+
+  get enabled() {
+    return Services.appinfo.accessibilityEnabled;
+  }
+
+  /**
+   * Observe Accessibility service init and shutdown events. It relays these
+   * events to AccessibilityFront if the event is fired for the a11y service
+   * that lives in the same process.
+   *
+   * @param  {null} subject
+   *         Not used.
+   * @param  {String} topic
+   *         Name of the a11y service event: "a11y-init-or-shutdown".
+   * @param  {String} data
+   *         "0" corresponds to shutdown and "1" to init.
+   */
+  observe(subject, topic, data) {
+    const enabled = data === "1";
+    if (enabled && this.enabled) {
+      this.emit("init");
+    } else if (!enabled && !this.enabled) {
+      if (this.walker) {
+        this.walker.reset();
+      }
+
+      this.emit("shutdown");
+    }
+  }
+
+  /**
+   * Get or create AccessibilityWalker actor, similar to WalkerActor.
+   *
+   * @return {Object}
+   *         AccessibleWalkerActor for the current tab.
+   */
+  getWalker() {
+    if (!this.walker) {
+      this.walker = new AccessibleWalkerActor(this.conn, this.targetActor);
+      this.manage(this.walker);
+    }
+    return this.walker;
+  }
+
+  /**
+   * Get or create Simulator actor, managed by AccessibilityActor,
+   * only if webrender is enabled. Simulator applies color filters on an entire
+   * viewport. This needs to be done using webrender and not an SVG
+   * <feColorMatrix> since it is accelerated and scrolling with filter applied
+   * needs to be smooth (Bug1431466).
+   *
+   * @return {Object|null}
+   *         SimulatorActor for the current tab.
+   */
+  getSimulator() {
+    if (!this.simulator) {
+      this.simulator = new SimulatorActor(this.conn, this.targetActor);
+      this.manage(this.simulator);
+    }
+
+    return this.simulator;
+  }
+
+  /**
+   * Destroy accessibility actor. This method also shutsdown accessibility
+   * service if possible.
+   */
+  async destroy() {
+    super.destroy();
+    Services.obs.removeObserver(this, "a11y-init-or-shutdown");
+    this.walker = null;
+    this.targetActor = null;
+  }
+}
+
+exports.AccessibilityActor = AccessibilityActor;
diff --git a/devtools/server/actors/accessibility/accessible.js b/devtools/server/actors/accessibility/accessible.js
new file mode 100644
index 0000000000..1866d0a91b
--- /dev/null
+++ b/devtools/server/actors/accessibility/accessible.js
@@ -0,0 +1,675 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  accessibleSpec,
+} = require("resource://devtools/shared/specs/accessibility.js");
+
+const {
+  accessibility: { AUDIT_TYPE },
+} = require("resource://devtools/shared/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getContrastRatioFor",
+  "resource://devtools/server/actors/accessibility/audit/contrast.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "auditKeyboard",
+  "resource://devtools/server/actors/accessibility/audit/keyboard.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "auditTextLabel",
+  "resource://devtools/server/actors/accessibility/audit/text-label.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "isDefunct",
+  "resource://devtools/server/actors/utils/accessibility.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "findCssSelector",
+  "resource://devtools/shared/inspector/css-logic.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "events",
+  "resource://devtools/shared/event-emitter.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "getBounds",
+  "resource://devtools/server/actors/highlighters/utils/accessibility.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "isFrameWithChildTarget",
+  "resource://devtools/shared/layout/utils.js",
+  true
+);
+const lazy = {};
+loader.lazyGetter(
+  lazy,
+  "ContentDOMReference",
+  () =>
+    ChromeUtils.importESModule(
+      "resource://gre/modules/ContentDOMReference.sys.mjs",
+      {
+        // ContentDOMReference needs to be retrieved from the shared global
+        // since it is a shared singleton.
+        loadInDevToolsLoader: false,
+      }
+    ).ContentDOMReference
+);
+
+const RELATIONS_TO_IGNORE = new Set([
+  Ci.nsIAccessibleRelation.RELATION_CONTAINING_APPLICATION,
+  Ci.nsIAccessibleRelation.RELATION_CONTAINING_TAB_PANE,
+  Ci.nsIAccessibleRelation.RELATION_CONTAINING_WINDOW,
+  Ci.nsIAccessibleRelation.RELATION_PARENT_WINDOW_OF,
+  Ci.nsIAccessibleRelation.RELATION_SUBWINDOW_OF,
+]);
+
+const nsIAccessibleRole = Ci.nsIAccessibleRole;
+const TEXT_ROLES = new Set([
+  nsIAccessibleRole.ROLE_TEXT_LEAF,
+  nsIAccessibleRole.ROLE_STATICTEXT,
+]);
+
+const STATE_DEFUNCT = Ci.nsIAccessibleStates.EXT_STATE_DEFUNCT;
+const CSS_TEXT_SELECTOR = "#text";
+
+/**
+ * Get node inforamtion such as nodeType and the unique CSS selector for the node.
+ * @param  {DOMNode} node
+ *         Node for which to get the information.
+ * @return {Object}
+ *         Information about the type of the node and how to locate it.
+ */
+function getNodeDescription(node) {
+  if (!node || Cu.isDeadWrapper(node)) {
+    return { nodeType: undefined, nodeCssSelector: "" };
+  }
+
+  const { nodeType } = node;
+  return {
+    nodeType,
+    // If node is a text node, we find a unique CSS selector for its parent and add a
+    // CSS_TEXT_SELECTOR postfix to indicate that it's a text node.
+    nodeCssSelector:
+      nodeType === Node.TEXT_NODE
+        ? `${findCssSelector(node.parentNode)}${CSS_TEXT_SELECTOR}`
+        : findCssSelector(node),
+  };
+}
+
+/**
+ * Get a snapshot of the nsIAccessible object including its subtree. None of the subtree
+ * queried here is cached via accessible walker's refMap.
+ * @param  {nsIAccessible} acc
+ *         Accessible object to take a snapshot of.
+ * @param  {nsIAccessibilityService} a11yService
+ *         Accessibility service instance in the current process, used to get localized
+ *         string representation of various accessible properties.
+ * @param  {WindowGlobalTargetActor} targetActor
+ * @return {JSON}
+ *         JSON snapshot of the accessibility tree with root at current accessible.
+ */
+function getSnapshot(acc, a11yService, targetActor) {
+  if (isDefunct(acc)) {
+    return {
+      states: [a11yService.getStringStates(0, STATE_DEFUNCT)],
+    };
+  }
+
+  const actions = [];
+  for (let i = 0; i < acc.actionCount; i++) {
+    actions.push(acc.getActionDescription(i));
+  }
+
+  const attributes = {};
+  if (acc.attributes) {
+    for (const { key, value } of acc.attributes.enumerate()) {
+      attributes[key] = value;
+    }
+  }
+
+  const state = {};
+  const extState = {};
+  acc.getState(state, extState);
+  const states = [...a11yService.getStringStates(state.value, extState.value)];
+
+  const children = [];
+  for (let child = acc.firstChild; child; child = child.nextSibling) {
+    // Ignore children from different documents when we have targets for every documents.
+    if (
+      targetActor.ignoreSubFrames &&
+      child.DOMNode.ownerDocument !== targetActor.contentDocument
+    ) {
+      continue;
+    }
+    children.push(getSnapshot(child, a11yService, targetActor));
+  }
+
+  const { nodeType, nodeCssSelector } = getNodeDescription(acc.DOMNode);
+  const snapshot = {
+    name: acc.name,
+    role: getStringRole(acc, a11yService),
+    actions,
+    value: acc.value,
+    nodeCssSelector,
+    nodeType,
+    description: acc.description,
+    keyboardShortcut: acc.accessKey || acc.keyboardShortcut,
+    childCount: acc.childCount,
+    indexInParent: acc.indexInParent,
+    states,
+    children,
+    attributes,
+  };
+  const useChildTargetToFetchChildren =
+    acc.role === Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME &&
+    isFrameWithChildTarget(targetActor, acc.DOMNode);
+  if (useChildTargetToFetchChildren) {
+    snapshot.useChildTargetToFetchChildren = useChildTargetToFetchChildren;
+    snapshot.childCount = 1;
+    snapshot.contentDOMReference = lazy.ContentDOMReference.get(acc.DOMNode);
+  }
+
+  return snapshot;
+}
+
+/**
+ * Get a string indicating the role of the nsIAccessible object.
+ * An ARIA role token will be returned unless the role can't be mapped to an
+ * ARIA role (e.g. <iframe>), in which case a Gecko role string will be
+ * returned.
+ * @param  {nsIAccessible} acc
+ *         Accessible object to take a snapshot of.
+ * @param  {nsIAccessibilityService} a11yService
+ *         Accessibility service instance in the current process, used to get localized
+ *         string representation of various accessible properties.
+ * @return String
+ */
+function getStringRole(acc, a11yService) {
+  let role = acc.computedARIARole;
+  if (!role) {
+    // We couldn't map to an ARIA role, so use a Gecko role string.
+    role = a11yService.getStringRole(acc.role);
+  }
+  return role;
+}
+
+/**
+ * The AccessibleActor provides information about a given accessible object: its
+ * role, name, states, etc.
+ */
+class AccessibleActor extends Actor {
+  constructor(walker, rawAccessible) {
+    super(walker.conn, accessibleSpec);
+    this.walker = walker;
+    this.rawAccessible = rawAccessible;
+
+    /**
+     * Indicates if the raw accessible is no longer alive.
+     *
+     * @return Boolean
+     */
+    Object.defineProperty(this, "isDefunct", {
+      get() {
+        const defunct = isDefunct(this.rawAccessible);
+        if (defunct) {
+          delete this.isDefunct;
+          this.isDefunct = true;
+          return this.isDefunct;
+        }
+
+        return defunct;
+      },
+      configurable: true,
+    });
+  }
+
+  destroy() {
+    super.destroy();
+    this.walker = null;
+    this.rawAccessible = null;
+  }
+
+  get role() {
+    if (this.isDefunct) {
+      return null;
+    }
+    return getStringRole(this.rawAccessible, this.walker.a11yService);
+  }
+
+  get name() {
+    if (this.isDefunct) {
+      return null;
+    }
+    return this.rawAccessible.name;
+  }
+
+  get value() {
+    if (this.isDefunct) {
+      return null;
+    }
+    return this.rawAccessible.value;
+  }
+
+  get description() {
+    if (this.isDefunct) {
+      return null;
+    }
+    return this.rawAccessible.description;
+  }
+
+  get keyboardShortcut() {
+    if (this.isDefunct) {
+      return null;
+    }
+    // Gecko accessibility exposes two key bindings: Accessible::AccessKey and
+    // Accessible::KeyboardShortcut. The former is used for accesskey, where the latter
+    // is used for global shortcuts defined by XUL menu items, etc. Here - do what the
+    // Windows implementation does: try AccessKey first, and if that's empty, use
+    // KeyboardShortcut.
+    return this.rawAccessible.accessKey || this.rawAccessible.keyboardShortcut;
+  }
+
+  get childCount() {
+    if (this.isDefunct) {
+      return 0;
+    }
+    // In case of a remote frame declare at least one child (the #document
+    // element) so that they can be expanded.
+    if (this.useChildTargetToFetchChildren) {
+      return 1;
+    }
+
+    return this.rawAccessible.childCount;
+  }
+
+  get domNodeType() {
+    if (this.isDefunct) {
+      return 0;
+    }
+    return this.rawAccessible.DOMNode ? this.rawAccessible.DOMNode.nodeType : 0;
+  }
+
+  get parentAcc() {
+    if (this.isDefunct) {
+      return null;
+    }
+    return this.walker.addRef(this.rawAccessible.parent);
+  }
+
+  children() {
+    const children = [];
+    if (this.isDefunct) {
+      return children;
+    }
+
+    for (
+      let child = this.rawAccessible.firstChild;
+      child;
+      child = child.nextSibling
+    ) {
+      children.push(this.walker.addRef(child));
+    }
+    return children;
+  }
+
+  get indexInParent() {
+    if (this.isDefunct) {
+      return -1;
+    }
+
+    try {
+      return this.rawAccessible.indexInParent;
+    } catch (e) {
+      // Accessible is dead.
+      return -1;
+    }
+  }
+
+  get actions() {
+    const actions = [];
+    if (this.isDefunct) {
+      return actions;
+    }
+
+    for (let i = 0; i < this.rawAccessible.actionCount; i++) {
+      actions.push(this.rawAccessible.getActionDescription(i));
+    }
+    return actions;
+  }
+
+  get states() {
+    if (this.isDefunct) {
+      return [];
+    }
+
+    const state = {};
+    const extState = {};
+    this.rawAccessible.getState(state, extState);
+    return [
+      ...this.walker.a11yService.getStringStates(state.value, extState.value),
+    ];
+  }
+
+  get attributes() {
+    if (this.isDefunct || !this.rawAccessible.attributes) {
+      return {};
+    }
+
+    const attributes = {};
+    for (const { key, value } of this.rawAccessible.attributes.enumerate()) {
+      attributes[key] = value;
+    }
+
+    return attributes;
+  }
+
+  get bounds() {
+    if (this.isDefunct) {
+      return null;
+    }
+
+    let x = {},
+      y = {},
+      w = {},
+      h = {};
+    try {
+      this.rawAccessible.getBoundsInCSSPixels(x, y, w, h);
+      x = x.value;
+      y = y.value;
+      w = w.value;
+      h = h.value;
+    } catch (e) {
+      return null;
+    }
+
+    // Check if accessible bounds are invalid.
+    const left = x,
+      right = x + w,
+      top = y,
+      bottom = y + h;
+    if (left === right || top === bottom) {
+      return null;
+    }
+
+    return { x, y, w, h };
+  }
+
+  async getRelations() {
+    const relationObjects = [];
+    if (this.isDefunct) {
+      return relationObjects;
+    }
+
+    const relations = [
+      ...this.rawAccessible.getRelations().enumerate(Ci.nsIAccessibleRelation),
+    ];
+    if (relations.length === 0) {
+      return relationObjects;
+    }
+
+    const doc = await this.walker.getDocument();
+    if (this.isDestroyed()) {
+      // This accessible actor is destroyed.
+      return relationObjects;
+    }
+    relations.forEach(relation => {
+      if (RELATIONS_TO_IGNORE.has(relation.relationType)) {
+        return;
+      }
+
+      const type = this.walker.a11yService.getStringRelationType(
+        relation.relationType
+      );
+      const targets = [...relation.getTargets().enumerate(Ci.nsIAccessible)];
+      let relationObject;
+      for (const target of targets) {
+        let targetAcc;
+        try {
+          targetAcc = this.walker.attachAccessible(target, doc.rawAccessible);
+        } catch (e) {
+          // Target is not available.
+        }
+
+        if (targetAcc) {
+          if (!relationObject) {
+            relationObject = { type, targets: [] };
+          }
+
+          relationObject.targets.push(targetAcc);
+        }
+      }
+
+      if (relationObject) {
+        relationObjects.push(relationObject);
+      }
+    });
+
+    return relationObjects;
+  }
+
+  get useChildTargetToFetchChildren() {
+    if (this.isDefunct) {
+      return false;
+    }
+
+    return (
+      this.rawAccessible.role === Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME &&
+      isFrameWithChildTarget(
+        this.walker.targetActor,
+        this.rawAccessible.DOMNode
+      )
+    );
+  }
+
+  form() {
+    return {
+      actor: this.actorID,
+      role: this.role,
+      name: this.name,
+      useChildTargetToFetchChildren: this.useChildTargetToFetchChildren,
+      childCount: this.childCount,
+      checks: this._lastAudit,
+    };
+  }
+
+  /**
+   * Provide additional (full) information about the accessible object that is
+   * otherwise missing from the form.
+   *
+   * @return {Object}
+   *         Object that contains accessible object information such as states,
+   *         actions, attributes, etc.
+   */
+  hydrate() {
+    return {
+      value: this.value,
+      description: this.description,
+      keyboardShortcut: this.keyboardShortcut,
+      domNodeType: this.domNodeType,
+      indexInParent: this.indexInParent,
+      states: this.states,
+      actions: this.actions,
+      attributes: this.attributes,
+    };
+  }
+
+  _isValidTextLeaf(rawAccessible) {
+    return (
+      !isDefunct(rawAccessible) &&
+      TEXT_ROLES.has(rawAccessible.role) &&
+      rawAccessible.name &&
+      !!rawAccessible.name.trim().length
+    );
+  }
+
+  /**
+   * Calculate the contrast ratio of the given accessible.
+   */
+  async _getContrastRatio() {
+    if (!this._isValidTextLeaf(this.rawAccessible)) {
+      return null;
+    }
+
+    const { bounds } = this;
+    if (!bounds) {
+      return null;
+    }
+
+    const { DOMNode: rawNode } = this.rawAccessible;
+    const win = rawNode.ownerGlobal;
+
+    // Keep the reference to the walker actor in case the actor gets destroyed
+    // during the colour contrast ratio calculation.
+    const { walker } = this;
+    await walker.clearStyles(win);
+    const contrastRatio = await getContrastRatioFor(rawNode.parentNode, {
+      bounds: getBounds(win, bounds),
+      win,
+      appliedColorMatrix: this.walker.colorMatrix,
+    });
+
+    if (this.isDestroyed()) {
+      // This accessible actor is destroyed.
+      return null;
+    }
+    await walker.restoreStyles(win);
+
+    return contrastRatio;
+  }
+
+  /**
+   * Run an accessibility audit for a given audit type.
+   * @param {String} type
+   *        Type of an audit (Check AUDIT_TYPE in devtools/shared/constants
+   *        to see available audit types).
+   *
+   * @return {null|Object}
+   *         Object that contains accessible audit data for a given type or null
+   *         if there's nothing to report for this accessible.
+   */
+  _getAuditByType(type) {
+    switch (type) {
+      case AUDIT_TYPE.CONTRAST:
+        return this._getContrastRatio();
+      case AUDIT_TYPE.KEYBOARD:
+        // Determine if keyboard accessibility is lacking where it is necessary.
+        return auditKeyboard(this.rawAccessible);
+      case AUDIT_TYPE.TEXT_LABEL:
+        // Determine if text alternative is missing for an accessible where it
+        // is necessary.
+        return auditTextLabel(this.rawAccessible);
+      default:
+        return null;
+    }
+  }
+
+  /**
+   * Audit the state of the accessible object.
+   *
+   * @param  {Object} options
+   *         Options for running audit, may include:
+   *         - types: Array of audit types to be performed during audit.
+   *
+   * @return {Object|null}
+   *         Audit results for the accessible object.
+   */
+  audit(options = {}) {
+    if (this._auditing) {
+      return this._auditing;
+    }
+
+    const { types } = options;
+    let auditTypes = Object.values(AUDIT_TYPE);
+    if (types && types.length) {
+      auditTypes = auditTypes.filter(auditType => types.includes(auditType));
+    }
+
+    // For some reason keyboard checks for focus styling affect values (that are
+    // used by other types of checks (text names and values)) returned by
+    // accessible objects. This happens only when multiple checks are run at the
+    // same time (asynchronously) and the audit might return unexpected
+    // failures. We thus split the execution of the checks into two parts, first
+    // performing keyboard checks and only after the rest of the checks. See bug
+    // 1594743 for more detail.
+    let keyboardAuditResult;
+    const keyboardAuditIndex = auditTypes.indexOf(AUDIT_TYPE.KEYBOARD);
+    if (keyboardAuditIndex > -1) {
+      // If we are performing a keyboard audit, remove its value from the
+      // complete list and run it.
+      auditTypes.splice(keyboardAuditIndex, 1);
+      keyboardAuditResult = this._getAuditByType(AUDIT_TYPE.KEYBOARD);
+    }
+
+    this._auditing = Promise.resolve(keyboardAuditResult)
+      .then(keyboardResult => {
+        const audits = auditTypes.map(auditType =>
+          this._getAuditByType(auditType)
+        );
+
+        // If we are also performing a keyboard audit, add its type and its
+        // result back to the complete list of audits.
+        if (keyboardAuditIndex > -1) {
+          auditTypes.splice(keyboardAuditIndex, 0, AUDIT_TYPE.KEYBOARD);
+          audits.splice(keyboardAuditIndex, 0, keyboardResult);
+        }
+
+        return Promise.all(audits);
+      })
+      .then(results => {
+        if (this.isDefunct || this.isDestroyed()) {
+          return null;
+        }
+
+        const audit = results.reduce((auditResults, result, index) => {
+          auditResults[auditTypes[index]] = result;
+          return auditResults;
+        }, {});
+        this._lastAudit = this._lastAudit || {};
+        Object.assign(this._lastAudit, audit);
+        events.emit(this, "audited", audit);
+
+        return audit;
+      })
+      .catch(error => {
+        if (!this.isDefunct && !this.isDestroyed()) {
+          throw error;
+        }
+        return null;
+      })
+      .finally(() => {
+        this._auditing = null;
+      });
+
+    return this._auditing;
+  }
+
+  snapshot() {
+    return getSnapshot(
+      this.rawAccessible,
+      this.walker.a11yService,
+      this.walker.targetActor
+    );
+  }
+}
+
+exports.AccessibleActor = AccessibleActor;
diff --git a/devtools/server/actors/accessibility/audit/contrast.js b/devtools/server/actors/accessibility/audit/contrast.js
new file mode 100644
index 0000000000..68e7b497f8
--- /dev/null
+++ b/devtools/server/actors/accessibility/audit/contrast.js
@@ -0,0 +1,306 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "CssLogic",
+  "resource://devtools/server/actors/inspector/css-logic.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getCurrentZoom",
+  "resource://devtools/shared/layout/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "addPseudoClassLock",
+  "resource://devtools/server/actors/highlighters/utils/markup.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "removePseudoClassLock",
+  "resource://devtools/server/actors/highlighters/utils/markup.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getContrastRatioAgainstBackground",
+  "resource://devtools/shared/accessibility.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getTextProperties",
+  "resource://devtools/shared/accessibility.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "DevToolsWorker",
+  "resource://devtools/shared/worker/worker.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "InspectorActorUtils",
+  "resource://devtools/server/actors/inspector/utils.js"
+);
+
+const WORKER_URL = "resource://devtools/server/actors/accessibility/worker.js";
+const HIGHLIGHTED_PSEUDO_CLASS = ":-moz-devtools-highlighted";
+const {
+  LARGE_TEXT: { BOLD_LARGE_TEXT_MIN_PIXELS, LARGE_TEXT_MIN_PIXELS },
+} = require("resource://devtools/shared/accessibility.js");
+
+loader.lazyGetter(this, "worker", () => new DevToolsWorker(WORKER_URL));
+
+/**
+ * Get canvas rendering context for the current target window bound by the bounds of the
+ * accessible objects.
+ * @param  {Object}  win
+ *         Current target window.
+ * @param  {Object}  bounds
+ *         Bounds for the accessible object.
+ * @param  {Object}  zoom
+ *         Current zoom level for the window.
+ * @param  {Object}  scale
+ *         Scale value to scale down the drawn image.
+ * @param  {null|DOMNode} node
+ *         If not null, a node that corresponds to the accessible object to be used to
+ *         make its text color transparent.
+ * @return {CanvasRenderingContext2D}
+ *         Canvas rendering context for the current window.
+ */
+function getImageCtx(win, bounds, zoom, scale, node) {
+  const doc = win.document;
+  const canvas = doc.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+
+  const { left, top, width, height } = bounds;
+  canvas.width = width * zoom * scale;
+  canvas.height = height * zoom * scale;
+  const ctx = canvas.getContext("2d", { alpha: false });
+  ctx.imageSmoothingEnabled = false;
+  ctx.scale(scale, scale);
+
+  // If node is passed, make its color related text properties invisible.
+  if (node) {
+    addPseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
+  }
+
+  ctx.drawWindow(
+    win,
+    left * zoom,
+    top * zoom,
+    width * zoom,
+    height * zoom,
+    "#fff",
+    ctx.DRAWWINDOW_USE_WIDGET_LAYERS
+  );
+
+  // Restore all inline styling.
+  if (node) {
+    removePseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
+  }
+
+  return ctx;
+}
+
+/**
+ * Calculate the transformed RGBA when a color matrix is set in docShell by
+ * multiplying the color matrix with the RGBA vector.
+ *
+ * @param  {Array}  rgba
+ *         Original RGBA array which we want to transform.
+ * @param  {Array}  colorMatrix
+ *         Flattened 4x5 color matrix that is set in docShell.
+ *         A 4x5 matrix of the form:
+ *           1  2  3  4  5
+ *           6  7  8  9  10
+ *           11 12 13 14 15
+ *           16 17 18 19 20
+ *         will be set in docShell as:
+ *           [1, 6, 11, 16, 2, 7, 12, 17, 3, 8, 13, 18, 4, 9, 14, 19, 5, 10, 15, 20]
+ * @return {Array}
+ *         Transformed RGBA after the color matrix is multiplied with the original RGBA.
+ */
+function getTransformedRGBA(rgba, colorMatrix) {
+  const transformedRGBA = [0, 0, 0, 0];
+
+  // Only use the first four columns of the color matrix corresponding to R, G, B and A
+  // color channels respectively. The fifth column is a fixed offset that does not need
+  // to be considered for the matrix multiplication. We end up multiplying a 4x4 color
+  // matrix with a 4x1 RGBA vector.
+  for (let i = 0; i < 16; i++) {
+    const row = i % 4;
+    const col = Math.floor(i / 4);
+    transformedRGBA[row] += colorMatrix[i] * rgba[col];
+  }
+
+  return transformedRGBA;
+}
+
+/**
+ * Find RGBA or a range of RGBAs for the background pixels under the text.
+ *
+ * @param  {DOMNode}  node
+ *         Node for which we want to get the background color data.
+ * @param  {Object}  options
+ *         - bounds       {Object}
+ *                        Bounds for the accessible object.
+ *         - win          {Object}
+ *                        Target window.
+ *         - size         {Number}
+ *                        Font size of the selected text node
+ *         - isBoldText   {Boolean}
+ *                        True if selected text node is bold
+ * @return {Object}
+ *         Object with one or more of the following RGBA fields: value, min, max
+ */
+function getBackgroundFor(node, { win, bounds, size, isBoldText }) {
+  const zoom = 1 / getCurrentZoom(win);
+  // When calculating colour contrast, we traverse image data for text nodes that are
+  // drawn both with and without transparent text. Image data arrays are typically really
+  // big. In cases when the font size is fairly large or when the page is zoomed in image
+  // data is especially large (retrieving it and/or traversing it takes significant amount
+  // of time). Here we optimize the size of the image data by scaling down the drawn nodes
+  // to a size where their text size equals either BOLD_LARGE_TEXT_MIN_PIXELS or
+  // LARGE_TEXT_MIN_PIXELS (lower threshold for large text size) depending on the font
+  // weight.
+  //
+  // IMPORTANT: this optimization, in some cases where background colour is non-uniform
+  // (gradient or image), can result in small (not noticeable) blending of the background
+  // colours. In turn this might affect the reported values of the contrast ratio. The
+  // delta is fairly small (<0.1) to noticeably skew the results.
+  //
+  // NOTE: this optimization does not help in cases where contrast is being calculated for
+  // nodes with a lot of text.
+  let scale =
+    ((isBoldText ? BOLD_LARGE_TEXT_MIN_PIXELS : LARGE_TEXT_MIN_PIXELS) / size) *
+    zoom;
+  // We do not need to scale the images if the font is smaller than large or if the page
+  // is zoomed out (scaling in this case would've been scaling up).
+  scale = scale > 1 ? 1 : scale;
+
+  const textContext = getImageCtx(win, bounds, zoom, scale);
+  const backgroundContext = getImageCtx(win, bounds, zoom, scale, node);
+
+  const { data: dataText } = textContext.getImageData(
+    0,
+    0,
+    bounds.width * scale,
+    bounds.height * scale
+  );
+  const { data: dataBackground } = backgroundContext.getImageData(
+    0,
+    0,
+    bounds.width * scale,
+    bounds.height * scale
+  );
+
+  return worker.performTask(
+    "getBgRGBA",
+    {
+      dataTextBuf: dataText.buffer,
+      dataBackgroundBuf: dataBackground.buffer,
+    },
+    [dataText.buffer, dataBackground.buffer]
+  );
+}
+
+/**
+ * Calculates the contrast ratio of the referenced DOM node.
+ *
+ * @param  {DOMNode} node
+ *         The node for which we want to calculate the contrast ratio.
+ * @param  {Object}  options
+ *         - bounds                           {Object}
+ *                                            Bounds for the accessible object.
+ *         - win                              {Object}
+ *                                            Target window.
+ *         - appliedColorMatrix               {Array|null}
+ *                                            Simulation color matrix applied to
+ *                                            to the viewport, if it exists.
+ * @return {Object}
+ *         An object that may contain one or more of the following fields: error,
+ *         isLargeText, value, min, max values for contrast.
+ */
+async function getContrastRatioFor(node, options = {}) {
+  const computedStyle = CssLogic.getComputedStyle(node);
+  const props = computedStyle ? getTextProperties(computedStyle) : null;
+
+  if (!props) {
+    return {
+      error: true,
+    };
+  }
+
+  const { isLargeText, isBoldText, size, opacity } = props;
+  const { appliedColorMatrix } = options;
+  const color = appliedColorMatrix
+    ? getTransformedRGBA(props.color, appliedColorMatrix)
+    : props.color;
+  let rgba = await getBackgroundFor(node, {
+    ...options,
+    isBoldText,
+    size,
+  });
+
+  if (!rgba) {
+    // Fallback (original) contrast calculation algorithm. It tries to get the
+    // closest background colour for the node and use it to calculate contrast.
+    const backgroundColor = InspectorActorUtils.getClosestBackgroundColor(node);
+    const backgroundImage = InspectorActorUtils.getClosestBackgroundImage(node);
+
+    if (backgroundImage !== "none") {
+      // Both approaches failed, at this point we don't have a better one yet.
+      return {
+        error: true,
+      };
+    }
+
+    let { r, g, b, a } = InspectorUtils.colorToRGBA(backgroundColor);
+    // If the element has opacity in addition to background alpha value, take it
+    // into account. TODO: this does not handle opacity set on ancestor
+    // elements (see bug https://bugzilla.mozilla.org/show_bug.cgi?id=1544721).
+    if (opacity < 1) {
+      a = opacity * a;
+    }
+
+    return getContrastRatioAgainstBackground(
+      {
+        value: appliedColorMatrix
+          ? getTransformedRGBA([r, g, b, a], appliedColorMatrix)
+          : [r, g, b, a],
+      },
+      {
+        color,
+        isLargeText,
+      }
+    );
+  }
+
+  if (appliedColorMatrix) {
+    rgba = rgba.value
+      ? {
+          value: getTransformedRGBA(rgba.value, appliedColorMatrix),
+        }
+      : {
+          min: getTransformedRGBA(rgba.min, appliedColorMatrix),
+          max: getTransformedRGBA(rgba.max, appliedColorMatrix),
+        };
+  }
+
+  return getContrastRatioAgainstBackground(rgba, {
+    color,
+    isLargeText,
+  });
+}
+
+exports.getContrastRatioFor = getContrastRatioFor;
+exports.getBackgroundFor = getBackgroundFor;
diff --git a/devtools/server/actors/accessibility/audit/keyboard.js b/devtools/server/actors/accessibility/audit/keyboard.js
new file mode 100644
index 0000000000..d1b13dbbf6
--- /dev/null
+++ b/devtools/server/actors/accessibility/audit/keyboard.js
@@ -0,0 +1,514 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "CssLogic",
+  "resource://devtools/server/actors/inspector/css-logic.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getCSSStyleRules",
+  "resource://devtools/shared/inspector/css-logic.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "nodeConstants",
+  "resource://devtools/shared/dom-node-constants.js"
+);
+loader.lazyRequireGetter(
+  this,
+  ["isDefunct", "getAriaRoles"],
+  "resource://devtools/server/actors/utils/accessibility.js",
+  true
+);
+
+const {
+  accessibility: {
+    AUDIT_TYPE: { KEYBOARD },
+    ISSUE_TYPE: {
+      [KEYBOARD]: {
+        FOCUSABLE_NO_SEMANTICS,
+        FOCUSABLE_POSITIVE_TABINDEX,
+        INTERACTIVE_NO_ACTION,
+        INTERACTIVE_NOT_FOCUSABLE,
+        MOUSE_INTERACTIVE_ONLY,
+        NO_FOCUS_VISIBLE,
+      },
+    },
+    SCORES: { FAIL, WARNING },
+  },
+} = require("resource://devtools/shared/constants.js");
+
+// Specified by the author CSS rule type.
+const STYLE_RULE = 1;
+
+// Accessible action for showing long description.
+const CLICK_ACTION = "click";
+
+/**
+ * Focus specific pseudo classes that the keyboard audit simulates to determine
+ * focus styling.
+ */
+const FOCUS_PSEUDO_CLASS = ":focus";
+const MOZ_FOCUSRING_PSEUDO_CLASS = ":-moz-focusring";
+
+const KEYBOARD_FOCUSABLE_ROLES = new Set([
+  Ci.nsIAccessibleRole.ROLE_BUTTONMENU,
+  Ci.nsIAccessibleRole.ROLE_CHECKBUTTON,
+  Ci.nsIAccessibleRole.ROLE_COMBOBOX,
+  Ci.nsIAccessibleRole.ROLE_EDITCOMBOBOX,
+  Ci.nsIAccessibleRole.ROLE_ENTRY,
+  Ci.nsIAccessibleRole.ROLE_LINK,
+  Ci.nsIAccessibleRole.ROLE_LISTBOX,
+  Ci.nsIAccessibleRole.ROLE_PASSWORD_TEXT,
+  Ci.nsIAccessibleRole.ROLE_PUSHBUTTON,
+  Ci.nsIAccessibleRole.ROLE_RADIOBUTTON,
+  Ci.nsIAccessibleRole.ROLE_SLIDER,
+  Ci.nsIAccessibleRole.ROLE_SPINBUTTON,
+  Ci.nsIAccessibleRole.ROLE_SUMMARY,
+  Ci.nsIAccessibleRole.ROLE_SWITCH,
+  Ci.nsIAccessibleRole.ROLE_TOGGLE_BUTTON,
+]);
+
+const INTERACTIVE_ROLES = new Set([
+  ...KEYBOARD_FOCUSABLE_ROLES,
+  Ci.nsIAccessibleRole.ROLE_CHECK_MENU_ITEM,
+  Ci.nsIAccessibleRole.ROLE_CHECK_RICH_OPTION,
+  Ci.nsIAccessibleRole.ROLE_COMBOBOX_OPTION,
+  Ci.nsIAccessibleRole.ROLE_MENUITEM,
+  Ci.nsIAccessibleRole.ROLE_OPTION,
+  Ci.nsIAccessibleRole.ROLE_OUTLINE,
+  Ci.nsIAccessibleRole.ROLE_OUTLINEITEM,
+  Ci.nsIAccessibleRole.ROLE_PAGETAB,
+  Ci.nsIAccessibleRole.ROLE_PARENT_MENUITEM,
+  Ci.nsIAccessibleRole.ROLE_RADIO_MENU_ITEM,
+  Ci.nsIAccessibleRole.ROLE_RICH_OPTION,
+]);
+
+const INTERACTIVE_IF_FOCUSABLE_ROLES = new Set([
+  // If article is focusable, we can assume it is inside a feed.
+  Ci.nsIAccessibleRole.ROLE_ARTICLE,
+  // Column header can be focusable.
+  Ci.nsIAccessibleRole.ROLE_COLUMNHEADER,
+  Ci.nsIAccessibleRole.ROLE_GRID_CELL,
+  Ci.nsIAccessibleRole.ROLE_MENUBAR,
+  Ci.nsIAccessibleRole.ROLE_MENUPOPUP,
+  Ci.nsIAccessibleRole.ROLE_PAGETABLIST,
+  // Row header can be focusable.
+  Ci.nsIAccessibleRole.ROLE_ROWHEADER,
+  Ci.nsIAccessibleRole.ROLE_SCROLLBAR,
+  Ci.nsIAccessibleRole.ROLE_SEPARATOR,
+  Ci.nsIAccessibleRole.ROLE_TOOLBAR,
+]);
+
+/**
+ * Determine if a node is dead or is not an element node.
+ *
+ * @param   {DOMNode} node
+ *          Node to be tested for validity.
+ *
+ * @returns {Boolean}
+ *          True if the node is either dead or is not an element node.
+ */
+function isInvalidNode(node) {
+  return (
+    !node ||
+    Cu.isDeadWrapper(node) ||
+    node.nodeType !== nodeConstants.ELEMENT_NODE ||
+    !node.ownerGlobal
+  );
+}
+
+/**
+ * Determine if accessible is focusable with the keyboard.
+ *
+ * @param   {nsIAccessible} accessible
+ *          Accessible for which to determine if it is keyboard focusable.
+ *
+ * @returns {Boolean}
+ *          True if focusable with the keyboard.
+ */
+function isKeyboardFocusable(accessible) {
+  const state = {};
+  accessible.getState(state, {});
+  // State will be focusable even if the tabindex is negative.
+  return (
+    state.value & Ci.nsIAccessibleStates.STATE_FOCUSABLE &&
+    // Platform accessibility will still report STATE_FOCUSABLE even with the
+    // tabindex="-1" so we need to check that it is >= 0 to be considered
+    // keyboard focusable.
+    accessible.DOMNode.tabIndex > -1
+  );
+}
+
+/**
+ * Determine if a current node has focus specific styling by applying a
+ * focus-related pseudo class (such as :focus or :-moz-focusring) to a focusable
+ * node.
+ *
+ * @param   {DOMNode} focusableNode
+ *          Node to apply focus-related pseudo class to.
+ * @param   {DOMNode} currentNode
+ *          Node to be checked for having focus specific styling.
+ * @param   {String} pseudoClass
+ *          A focus related pseudo-class to be simulated for style comparison.
+ *
+ * @returns {Boolean}
+ *          True if the currentNode has focus specific styling.
+ */
+function hasStylesForFocusRelatedPseudoClass(
+  focusableNode,
+  currentNode,
+  pseudoClass
+) {
+  const defaultRules = getCSSStyleRules(currentNode);
+
+  InspectorUtils.addPseudoClassLock(focusableNode, pseudoClass);
+
+  // Determine a set of properties that are specific to CSS rules that are only
+  // present when a focus related pseudo-class is locked in.
+  const tempRules = getCSSStyleRules(currentNode);
+  const properties = new Set();
+  for (const rule of tempRules) {
+    if (rule.type !== STYLE_RULE) {
+      continue;
+    }
+
+    if (!defaultRules.includes(rule)) {
+      for (let index = 0; index < rule.style.length; index++) {
+        properties.add(rule.style.item(index));
+      }
+    }
+  }
+
+  // If there are no focus specific CSS rules or properties, currentNode does
+  // node have any focus specific styling, we are done.
+  if (properties.size === 0) {
+    InspectorUtils.removePseudoClassLock(focusableNode, pseudoClass);
+    return false;
+  }
+
+  // Determine values for properties that are focus specific.
+  const tempStyle = CssLogic.getComputedStyle(currentNode);
+  const focusStyle = {};
+  for (const name of properties.values()) {
+    focusStyle[name] = tempStyle.getPropertyValue(name);
+  }
+
+  InspectorUtils.removePseudoClassLock(focusableNode, pseudoClass);
+
+  // If values for focus specific properties are different from default style
+  // values, assume we have focus spefic styles for the currentNode.
+  const defaultStyle = CssLogic.getComputedStyle(currentNode);
+  for (const name of properties.values()) {
+    if (defaultStyle.getPropertyValue(name) !== focusStyle[name]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Check if an element node (currentNode) has distinct focus styling. This
+ * function also takes into account a case when focus styling is applied to a
+ * descendant too.
+ *
+ * @param   {DOMNode} focusableNode
+ *          Node to apply focus-related pseudo class to.
+ * @param   {DOMNode} currentNode
+ *          Node to be checked for having focus specific styling.
+ *
+ * @returns {Boolean}
+ *          True if the node or its descendant has distinct focus styling.
+ */
+function hasFocusStyling(focusableNode, currentNode) {
+  if (isInvalidNode(currentNode)) {
+    return false;
+  }
+
+  // Check if an element node has distinct :-moz-focusring styling.
+  const hasStylesForMozFocusring = hasStylesForFocusRelatedPseudoClass(
+    focusableNode,
+    currentNode,
+    MOZ_FOCUSRING_PSEUDO_CLASS
+  );
+  if (hasStylesForMozFocusring) {
+    return true;
+  }
+
+  // Check if an element node has distinct :focus styling.
+  const hasStylesForFocus = hasStylesForFocusRelatedPseudoClass(
+    focusableNode,
+    currentNode,
+    FOCUS_PSEUDO_CLASS
+  );
+  if (hasStylesForFocus) {
+    return true;
+  }
+
+  // If no element specific focus styles where found, check if its element
+  // children have them.
+  for (
+    let child = currentNode.firstElementChild;
+    child;
+    child = currentNode.nextnextElementSibling
+  ) {
+    if (hasFocusStyling(focusableNode, child)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * A rule that determines if a focusable accessible object has appropriate focus
+ * styling.
+ *
+ * @param  {nsIAccessible} accessible
+ *         Accessible to be checked for being focusable and having focus
+ *         styling.
+ *
+ * @return {null|Object}
+ *         Null if accessible has keyboard focus styling, audit report object
+ *         otherwise.
+ */
+function focusStyleRule(accessible) {
+  const { DOMNode } = accessible;
+  if (isInvalidNode(DOMNode)) {
+    return null;
+  }
+
+  // Ignore non-focusable elements.
+  if (!isKeyboardFocusable(accessible)) {
+    return null;
+  }
+
+  if (hasFocusStyling(DOMNode, DOMNode)) {
+    return null;
+  }
+
+  // If no browser or author focus styling was found, check if the node is a
+  // widget that is themed by platform native theme.
+  if (InspectorUtils.isElementThemed(DOMNode)) {
+    return null;
+  }
+
+  return { score: WARNING, issue: NO_FOCUS_VISIBLE };
+}
+
+/**
+ * A rule that determines if an interactive accessible has any associated
+ * accessible actions with it. If the element is interactive but and has no
+ * actions, assistive technology users will not be able to interact with it.
+ *
+ * @param  {nsIAccessible} accessible
+ *         Accessible to be checked for being interactive and having accessible
+ *         actions.
+ *
+ * @return {null|Object}
+ *         Null if accessible is not interactive or if it is and it has
+ *         accessible action associated with it, audit report object otherwise.
+ */
+function interactiveRule(accessible) {
+  if (!INTERACTIVE_ROLES.has(accessible.role)) {
+    return null;
+  }
+
+  if (accessible.actionCount > 0) {
+    return null;
+  }
+
+  return { score: FAIL, issue: INTERACTIVE_NO_ACTION };
+}
+
+/**
+ * A rule that determines if an interactive accessible is also focusable when
+ * not disabled.
+ *
+ * @param  {nsIAccessible} accessible
+ *         Accessible to be checked for being interactive and being focusable
+ *         when enabled.
+ *
+ * @return {null|Object}
+ *         Null if accessible is not interactive or if it is and it is focusable
+ *         when enabled, audit report object otherwise.
+ */
+function focusableRule(accessible) {
+  if (!KEYBOARD_FOCUSABLE_ROLES.has(accessible.role)) {
+    return null;
+  }
+
+  const state = {};
+  accessible.getState(state, {});
+  // We only expect in interactive accessible object to be focusable if it is
+  // not disabled.
+  if (state.value & Ci.nsIAccessibleStates.STATE_UNAVAILABLE) {
+    return null;
+  }
+
+  if (isKeyboardFocusable(accessible)) {
+    return null;
+  }
+
+  const ariaRoles = getAriaRoles(accessible);
+  if (
+    ariaRoles &&
+    (ariaRoles.includes("combobox") || ariaRoles.includes("listbox"))
+  ) {
+    // Do not force ARIA combobox or listbox to be focusable.
+    return null;
+  }
+
+  return { score: FAIL, issue: INTERACTIVE_NOT_FOCUSABLE };
+}
+
+/**
+ * A rule that determines if a focusable accessible has an associated
+ * interactive role.
+ *
+ * @param  {nsIAccessible} accessible
+ *         Accessible to be checked for having an interactive role if it is
+ *         focusable.
+ *
+ * @return {null|Object}
+ *         Null if accessible is not interactive or if it is and it has an
+ *         interactive role, audit report object otherwise.
+ */
+function semanticsRule(accessible) {
+  if (
+    INTERACTIVE_ROLES.has(accessible.role) ||
+    // Visible listboxes will have focusable state when inside comboboxes.
+    accessible.role === Ci.nsIAccessibleRole.ROLE_COMBOBOX_LIST
+  ) {
+    return null;
+  }
+
+  if (isKeyboardFocusable(accessible)) {
+    if (INTERACTIVE_IF_FOCUSABLE_ROLES.has(accessible.role)) {
+      return null;
+    }
+
+    // ROLE_TABLE is used for grids too which are considered interactive.
+    if (accessible.role === Ci.nsIAccessibleRole.ROLE_TABLE) {
+      const ariaRoles = getAriaRoles(accessible);
+      if (ariaRoles && ariaRoles.includes("grid")) {
+        return null;
+      }
+    }
+
+    return { score: WARNING, issue: FOCUSABLE_NO_SEMANTICS };
+  }
+
+  const state = {};
+  accessible.getState(state, {});
+  if (
+    // Ignore text leafs.
+    accessible.role === Ci.nsIAccessibleRole.ROLE_TEXT_LEAF ||
+    // Ignore accessibles with no accessible actions.
+    accessible.actionCount === 0 ||
+    // Ignore labels that have a label for relation with their target because
+    // they are clickable.
+    (accessible.role === Ci.nsIAccessibleRole.ROLE_LABEL &&
+      accessible.getRelationByType(Ci.nsIAccessibleRelation.RELATION_LABEL_FOR)
+        .targetsCount > 0) ||
+    // Ignore images that are inside an anchor (have linked state).
+    (accessible.role === Ci.nsIAccessibleRole.ROLE_GRAPHIC &&
+      state.value & Ci.nsIAccessibleStates.STATE_LINKED)
+  ) {
+    return null;
+  }
+
+  // Ignore anything but a click action in the list of actions.
+  for (let i = 0; i < accessible.actionCount; i++) {
+    if (accessible.getActionName(i) === CLICK_ACTION) {
+      return { score: FAIL, issue: MOUSE_INTERACTIVE_ONLY };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * A rule that determines if an element associated with a focusable accessible
+ * has a positive tabindex.
+ *
+ * @param  {nsIAccessible} accessible
+ *         Accessible to be checked for having an element with positive tabindex
+ *         attribute.
+ *
+ * @return {null|Object}
+ *         Null if accessible is not focusable or if it is and its element's
+ *         tabindex attribute is less than 1, audit report object otherwise.
+ */
+function tabIndexRule(accessible) {
+  const { DOMNode } = accessible;
+  if (isInvalidNode(DOMNode)) {
+    return null;
+  }
+
+  if (!isKeyboardFocusable(accessible)) {
+    return null;
+  }
+
+  if (DOMNode.tabIndex > 0) {
+    return { score: WARNING, issue: FOCUSABLE_POSITIVE_TABINDEX };
+  }
+
+  return null;
+}
+
+function auditKeyboard(accessible) {
+  if (isDefunct(accessible)) {
+    return null;
+  }
+  // Do not test anything on accessible objects for documents or frames.
+  if (
+    accessible.role === Ci.nsIAccessibleRole.ROLE_DOCUMENT ||
+    accessible.role === Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME
+  ) {
+    return null;
+  }
+
+  // Check if interactive accessible can be used by the assistive
+  // technology.
+  let issue = interactiveRule(accessible);
+  if (issue) {
+    return issue;
+  }
+
+  // Check if interactive accessible is also focusable when enabled.
+  issue = focusableRule(accessible);
+  if (issue) {
+    return issue;
+  }
+
+  // Check if accessible object has an element with a positive tabindex.
+  issue = tabIndexRule(accessible);
+  if (issue) {
+    return issue;
+  }
+
+  // Check if a focusable accessible has interactive semantics.
+  issue = semanticsRule(accessible);
+  if (issue) {
+    return issue;
+  }
+
+  // Check if focusable accessible has associated focus styling.
+  issue = focusStyleRule(accessible);
+  if (issue) {
+    return issue;
+  }
+
+  return issue;
+}
+
+module.exports.auditKeyboard = auditKeyboard;
diff --git a/devtools/server/actors/accessibility/audit/moz.build b/devtools/server/actors/accessibility/audit/moz.build
new file mode 100644
index 0000000000..01bd0af849
--- /dev/null
+++ b/devtools/server/actors/accessibility/audit/moz.build
@@ -0,0 +1,12 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "contrast.js",
+    "keyboard.js",
+    "text-label.js",
+)
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Accessibility Tools")
diff --git a/devtools/server/actors/accessibility/audit/text-label.js b/devtools/server/actors/accessibility/audit/text-label.js
new file mode 100644
index 0000000000..8570c5cce8
--- /dev/null
+++ b/devtools/server/actors/accessibility/audit/text-label.js
@@ -0,0 +1,438 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  accessibility: {
+    AUDIT_TYPE: { TEXT_LABEL },
+    ISSUE_TYPE,
+    SCORES: { BEST_PRACTICES, FAIL, WARNING },
+  },
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  AREA_NO_NAME_FROM_ALT,
+  DIALOG_NO_NAME,
+  DOCUMENT_NO_TITLE,
+  EMBED_NO_NAME,
+  FIGURE_NO_NAME,
+  FORM_FIELDSET_NO_NAME,
+  FORM_FIELDSET_NO_NAME_FROM_LEGEND,
+  FORM_NO_NAME,
+  FORM_NO_VISIBLE_NAME,
+  FORM_OPTGROUP_NO_NAME_FROM_LABEL,
+  FRAME_NO_NAME,
+  HEADING_NO_CONTENT,
+  HEADING_NO_NAME,
+  IFRAME_NO_NAME_FROM_TITLE,
+  IMAGE_NO_NAME,
+  INTERACTIVE_NO_NAME,
+  MATHML_GLYPH_NO_NAME,
+  TOOLBAR_NO_NAME,
+} = ISSUE_TYPE[TEXT_LABEL];
+
+/**
+ * Check if the accessible is visible to the assistive technology.
+ * @param {nsIAccessible} accessible
+ *        Accessible object to be tested for visibility.
+ *
+ * @returns {Boolean}
+ *         True if accessible object is visible to assistive technology.
+ */
+function isVisible(accessible) {
+  const state = {};
+  accessible.getState(state, {});
+  return !(state.value & Ci.nsIAccessibleStates.STATE_INVISIBLE);
+}
+
+/**
+ * Get related accessible objects that are targets of labelled by relation e.g.
+ * labels.
+ * @param {nsIAccessible} accessible
+ *        Accessible objects to get labels for.
+ *
+ * @returns {Array}
+ *          A list of accessible objects that are labels for a given accessible.
+ */
+function getLabels(accessible) {
+  const relation = accessible.getRelationByType(
+    Ci.nsIAccessibleRelation.RELATION_LABELLED_BY
+  );
+  return [...relation.getTargets().enumerate(Ci.nsIAccessible)];
+}
+
+/**
+ * Get a trimmed name of the accessible object.
+ *
+ * @param {nsIAccessible} accessible
+ *        Accessible objects to get a name for.
+ *
+ * @returns {null|String}
+ *          Trimmed name of the accessible object if available.
+ */
+function getAccessibleName(accessible) {
+  return accessible.name && accessible.name.trim();
+}
+
+/**
+ * A text label rule for accessible objects that must have a non empty
+ * accessible name.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if accessible object has no or empty name, null
+ *          otherwise.
+ */
+const mustHaveNonEmptyNameRule = function (issue, accessible) {
+  const name = getAccessibleName(accessible);
+  return name ? null : { score: FAIL, issue };
+};
+
+/**
+ * A text label rule for accessible objects that should have a non empty
+ * accessible name as a best practice.
+ *
+ * @returns {null|Object}
+ *          Best practices audit report if accessible object has no or empty
+ *          name, null otherwise.
+ */
+const shouldHaveNonEmptyNameRule = function (issue, accessible) {
+  const name = getAccessibleName(accessible);
+  return name ? null : { score: BEST_PRACTICES, issue };
+};
+
+/**
+ * A text label rule for accessible objects that can be activated via user
+ * action and must have a non-empty name.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if interactive accessible object has no or
+ *          empty name, null otherwise.
+ */
+const interactiveRule = mustHaveNonEmptyNameRule.bind(
+  null,
+  INTERACTIVE_NO_NAME
+);
+
+/**
+ * A text label rule for accessible objects that correspond to dialogs and thus
+ * should have a non-empty name.
+ *
+ * @returns {null|Object}
+ *          Best practices audit report if dialog accessible object has no or
+ *          empty name, null otherwise.
+ */
+const dialogRule = shouldHaveNonEmptyNameRule.bind(null, DIALOG_NO_NAME);
+
+/**
+ * A text label rule for accessible objects that provide visual information
+ * (images, canvas, etc.) and must have a defined name (that can be empty, e.g.
+ * "").
+ *
+ * @returns {null|Object}
+ *          Failure audit report if interactive accessible object has no name,
+ *          null otherwise.
+ */
+const imageRule = function (accessible) {
+  const name = getAccessibleName(accessible);
+  return name != null ? null : { score: FAIL, issue: IMAGE_NO_NAME };
+};
+
+/**
+ * A text label rule for accessible objects that correspond to form elements.
+ * These objects must have a non-empty name and must have a visible label.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if form element accessible object has no name,
+ *          warning if the name does not come from a visible label, null
+ *          otherwise.
+ */
+const formRule = function (accessible) {
+  const name = getAccessibleName(accessible);
+  if (!name) {
+    return { score: FAIL, issue: FORM_NO_NAME };
+  }
+
+  const labels = getLabels(accessible);
+  const hasNameFromVisibleLabel = labels.some(label => isVisible(label));
+
+  return hasNameFromVisibleLabel
+    ? null
+    : { score: WARNING, issue: FORM_NO_VISIBLE_NAME };
+};
+
+/**
+ * A text label rule for elements that map to ROLE_GROUPING:
+ * * <OPTGROUP> must have a non-empty name and must be provided via the
+ *   "label" attribute.
+ * * <FIELDSET> must have a non-empty name and must be provided via the
+ *   corresponding <LEGEND> element.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if form grouping accessible object has no name,
+ *          or has a name that is not derived from a required location, null
+ *          otherwise.
+ */
+const formGroupingRule = function (accessible) {
+  const name = getAccessibleName(accessible);
+  const { DOMNode } = accessible;
+
+  switch (DOMNode.nodeName) {
+    case "OPTGROUP":
+      return name && DOMNode.label && DOMNode.label.trim() === name
+        ? null
+        : {
+            score: FAIL,
+            issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL,
+          };
+    case "FIELDSET":
+      if (!name) {
+        return { score: FAIL, issue: FORM_FIELDSET_NO_NAME };
+      }
+
+      const labels = getLabels(accessible);
+      const hasNameFromLegend = labels.some(
+        label =>
+          label.DOMNode.nodeName === "LEGEND" &&
+          label.name &&
+          label.name.trim() === name &&
+          isVisible(label)
+      );
+
+      return hasNameFromLegend
+        ? null
+        : {
+            score: WARNING,
+            issue: FORM_FIELDSET_NO_NAME_FROM_LEGEND,
+          };
+    default:
+      return null;
+  }
+};
+
+/**
+ * A text label rule for elements that map to ROLE_TEXT_CONTAINER:
+ * * <METER> mapps to ROLE_TEXT_CONTAINER and must have a name provided via
+ *   the visible label. Note: Will only work when bug 559770 is resolved (right
+ *   now, unlabelled meters are not mapped to an accessible object).
+ *
+ * @returns {null|Object}
+ *          Failure audit report depending on requirements for dialogs or form
+ *          meter element, null otherwise.
+ */
+const textContainerRule = function (accessible) {
+  const { DOMNode } = accessible;
+
+  switch (DOMNode.nodeName) {
+    case "DIALOG":
+      return dialogRule(accessible);
+    case "METER":
+      return formRule(accessible);
+    default:
+      return null;
+  }
+};
+
+/**
+ * A text label rule for elements that map to ROLE_INTERNAL_FRAME:
+ *  * <OBJECT> maps to ROLE_INTERNAL_FRAME. Check the type attribute and whether
+ *    it includes "image/" (e.g. image/jpeg, image/png, image/gif). If so, audit
+ *    it the same way other image roles are audited.
+ *  * <EMBED> maps to ROLE_INTERNAL_FRAME and must have a non-empty name.
+ *  * <FRAME> and <IFRAME> map to ROLE_INTERNAL_FRAME and must have a non-empty
+ *    title attribute.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if the internal frame accessible object name is
+ *          not provided or if it is not derived from a required location, null
+ *          otherwise.
+ */
+const internalFrameRule = function (accessible) {
+  const { DOMNode } = accessible;
+  switch (DOMNode.nodeName) {
+    case "FRAME":
+      return mustHaveNonEmptyNameRule(FRAME_NO_NAME, accessible);
+    case "IFRAME":
+      const name = getAccessibleName(accessible);
+      const title = DOMNode.title && DOMNode.title.trim();
+
+      return title && title === name
+        ? null
+        : { score: FAIL, issue: IFRAME_NO_NAME_FROM_TITLE };
+    case "OBJECT": {
+      const type = DOMNode.getAttribute("type");
+      if (!type || !type.startsWith("image/")) {
+        return null;
+      }
+
+      return imageRule(accessible);
+    }
+    case "EMBED": {
+      const type = DOMNode.getAttribute("type");
+      if (!type || !type.startsWith("image/")) {
+        return mustHaveNonEmptyNameRule(EMBED_NO_NAME, accessible);
+      }
+      return imageRule(accessible);
+    }
+    default:
+      return null;
+  }
+};
+
+/**
+ * A text label rule for accessible objects that represent documents and should
+ * have title element provided.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if document accessible object has no or empty
+ *          title, null otherwise.
+ */
+const documentRule = function (accessible) {
+  const title = accessible.DOMNode.title && accessible.DOMNode.title.trim();
+  return title ? null : { score: FAIL, issue: DOCUMENT_NO_TITLE };
+};
+
+/**
+ * A text label rule for accessible objects that correspond to headings and thus
+ * must be non-empty.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if heading accessible object has no or
+ *          empty name or if its text content is empty, null otherwise.
+ */
+const headingRule = function (accessible) {
+  const name = getAccessibleName(accessible);
+  if (!name) {
+    return { score: FAIL, issue: HEADING_NO_NAME };
+  }
+
+  const content =
+    accessible.DOMNode.textContent && accessible.DOMNode.textContent.trim();
+  return content ? null : { score: WARNING, issue: HEADING_NO_CONTENT };
+};
+
+/**
+ * A text label rule for accessible objects that represent toolbars and must
+ * have a non-empty name if there is more than one toolbar present.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if toolbar accessible object is not the only
+ *          toolbar in the document and has no or empty title, null otherwise.
+ */
+const toolbarRule = function (accessible) {
+  const toolbars =
+    accessible.DOMNode.ownerDocument.querySelectorAll(`[role="toolbar"]`);
+
+  return toolbars.length > 1
+    ? mustHaveNonEmptyNameRule(TOOLBAR_NO_NAME, accessible)
+    : null;
+};
+
+/**
+ * A text label rule for accessible objects that represent link (anchors, areas)
+ * and must have a non-empty name.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if link accessible object has no or empty name,
+ *          or in case when it's an <area> element with href attribute the name
+ *          is not specified by an alt attribute, null otherwise.
+ */
+const linkRule = function (accessible) {
+  const { DOMNode } = accessible;
+  if (DOMNode.nodeName === "AREA" && DOMNode.hasAttribute("href")) {
+    const alt = DOMNode.getAttribute("alt");
+    const name = getAccessibleName(accessible);
+    return alt && alt.trim() === name
+      ? null
+      : { score: FAIL, issue: AREA_NO_NAME_FROM_ALT };
+  }
+
+  return interactiveRule(accessible);
+};
+
+/**
+ * A text label rule for accessible objects that are used to display
+ * non-standard symbols where existing Unicode characters are not available and
+ * must have a non-empty name.
+ *
+ * @returns {null|Object}
+ *          Failure audit report if mglyph accessible object has no or empty
+ *          name, and no or empty alt attribute, null otherwise.
+ */
+const mathmlGlyphRule = function (accessible) {
+  const name = getAccessibleName(accessible);
+  if (name) {
+    return null;
+  }
+
+  const { DOMNode } = accessible;
+  const alt = DOMNode.getAttribute("alt");
+  return alt && alt.trim()
+    ? null
+    : { score: FAIL, issue: MATHML_GLYPH_NO_NAME };
+};
+
+const RULES = {
+  [Ci.nsIAccessibleRole.ROLE_BUTTONMENU]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_CANVAS]: imageRule,
+  [Ci.nsIAccessibleRole.ROLE_CHECKBUTTON]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_CHECK_MENU_ITEM]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_CHECK_RICH_OPTION]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_COLUMNHEADER]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_COMBOBOX]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_COMBOBOX_OPTION]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_DIAGRAM]: imageRule,
+  [Ci.nsIAccessibleRole.ROLE_DIALOG]: dialogRule,
+  [Ci.nsIAccessibleRole.ROLE_DOCUMENT]: documentRule,
+  [Ci.nsIAccessibleRole.ROLE_EDITCOMBOBOX]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_ENTRY]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_FIGURE]: shouldHaveNonEmptyNameRule.bind(
+    null,
+    FIGURE_NO_NAME
+  ),
+  [Ci.nsIAccessibleRole.ROLE_GRAPHIC]: imageRule,
+  [Ci.nsIAccessibleRole.ROLE_GROUPING]: formGroupingRule,
+  [Ci.nsIAccessibleRole.ROLE_HEADING]: headingRule,
+  [Ci.nsIAccessibleRole.ROLE_IMAGE_MAP]: imageRule,
+  [Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME]: internalFrameRule,
+  [Ci.nsIAccessibleRole.ROLE_LINK]: linkRule,
+  [Ci.nsIAccessibleRole.ROLE_LISTBOX]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_MATHML_GLYPH]: mathmlGlyphRule,
+  [Ci.nsIAccessibleRole.ROLE_MENUITEM]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_OPTION]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_OUTLINEITEM]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_PAGETAB]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_PASSWORD_TEXT]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_PROGRESSBAR]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_PUSHBUTTON]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_RADIOBUTTON]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_RADIO_MENU_ITEM]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_ROWHEADER]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_SLIDER]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_SPINBUTTON]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_SWITCH]: formRule,
+  [Ci.nsIAccessibleRole.ROLE_TEXT_CONTAINER]: textContainerRule,
+  [Ci.nsIAccessibleRole.ROLE_TOGGLE_BUTTON]: interactiveRule,
+  [Ci.nsIAccessibleRole.ROLE_TOOLBAR]: toolbarRule,
+};
+
+/**
+ * Perform audit for WCAG 1.1 criteria related to providing alternative text
+ * depending on the type of content.
+ * @param {nsIAccessible} accessible
+ *        Accessible object to be tested to determine if it requires and has
+ *        an appropriate text alternative.
+ *
+ * @return {null|Object}
+ *         Null if accessible does not need or has the right text alternative,
+ *         audit data otherwise. This data is used in the accessibility panel
+ *         for its audit filters, audit badges, sidebar checks section and
+ *         highlighter.
+ */
+function auditTextLabel(accessible) {
+  const rule = RULES[accessible.role];
+  return rule ? rule(accessible) : null;
+}
+
+module.exports.auditTextLabel = auditTextLabel;
diff --git a/devtools/server/actors/accessibility/constants.js b/devtools/server/actors/accessibility/constants.js
new file mode 100644
index 0000000000..6035b5c844
--- /dev/null
+++ b/devtools/server/actors/accessibility/constants.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  accessibility: {
+    SIMULATION_TYPE: {
+      ACHROMATOPSIA,
+      DEUTERANOPIA,
+      PROTANOPIA,
+      TRITANOPIA,
+      CONTRAST_LOSS,
+    },
+  },
+} = require("resource://devtools/shared/constants.js");
+
+/**
+ * Constants used in accessibility actors.
+ */
+
+// Color blindness matrix values taken from Machado et al. (2009), https://doi.org/10.1109/TVCG.2009.113:
+// https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html
+// Contrast loss matrix values are for 50% contrast (see https://docs.rainmeter.net/tips/colormatrix-guide/,
+// and https://stackoverflow.com/questions/23865511/contrast-with-color-matrix). The matrices are flattened
+// 4x5 matrices, needed for docShell setColorMatrix method. i.e. A 4x5 matrix of the form:
+//   1  2  3  4  5
+//   6  7  8  9  10
+//   11 12 13 14 15
+//   16 17 18 19 20
+// will be need to be set in docShell as:
+//   [1, 6, 11, 16, 2, 7, 12, 17, 3, 8, 13, 18, 4, 9, 14, 19, 5, 10, 15, 20]
+const COLOR_TRANSFORMATION_MATRICES = {
+  NONE: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0],
+  [ACHROMATOPSIA]: [
+    0.299, 0.299, 0.299, 0, 0.587, 0.587, 0.587, 0, 0.114, 0.114, 0.114, 0, 0,
+    0, 0, 1, 0, 0, 0, 0,
+  ],
+  [PROTANOPIA]: [
+    0.152286, 0.114503, -0.003882, 0, 1.052583, 0.786281, -0.048116, 0,
+    -0.204868, 0.099216, 1.051998, 0, 0, 0, 0, 1, 0, 0, 0, 0,
+  ],
+  [DEUTERANOPIA]: [
+    0.367322, 0.280085, -0.01182, 0, 0.860646, 0.672501, 0.04294, 0, -0.227968,
+    0.047413, 0.968881, 0, 0, 0, 0, 1, 0, 0, 0, 0,
+  ],
+  [TRITANOPIA]: [
+    1.255528, -0.078411, 0.004733, 0, -0.076749, 0.930809, 0.691367, 0,
+    -0.178779, 0.147602, 0.3039, 0, 0, 0, 0, 1, 0, 0, 0, 0,
+  ],
+  [CONTRAST_LOSS]: [
+    0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0.25, 0.25, 0.25, 0,
+  ],
+};
+
+exports.simulation = {
+  COLOR_TRANSFORMATION_MATRICES,
+};
diff --git a/devtools/server/actors/accessibility/moz.build b/devtools/server/actors/accessibility/moz.build
new file mode 100644
index 0000000000..4da1cd0b24
--- /dev/null
+++ b/devtools/server/actors/accessibility/moz.build
@@ -0,0 +1,20 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "audit",
+]
+
+DevToolsModules(
+    "accessibility.js",
+    "accessible.js",
+    "constants.js",
+    "parent-accessibility.js",
+    "simulator.js",
+    "walker.js",
+    "worker.js",
+)
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Accessibility Tools")
diff --git a/devtools/server/actors/accessibility/parent-accessibility.js b/devtools/server/actors/accessibility/parent-accessibility.js
new file mode 100644
index 0000000000..fd2c945ea7
--- /dev/null
+++ b/devtools/server/actors/accessibility/parent-accessibility.js
@@ -0,0 +1,154 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  parentAccessibilitySpec,
+} = require("resource://devtools/shared/specs/accessibility.js");
+
+const PREF_ACCESSIBILITY_FORCE_DISABLED = "accessibility.force_disabled";
+
+class ParentAccessibilityActor extends Actor {
+  constructor(conn) {
+    super(conn, parentAccessibilitySpec);
+
+    this.userPref = Services.prefs.getIntPref(
+      PREF_ACCESSIBILITY_FORCE_DISABLED
+    );
+
+    if (this.enabled && !this.accService) {
+      // Set a local reference to an accessibility service if accessibility was
+      // started elsewhere to ensure that parent process a11y service does not
+      // get GC'ed away.
+      this.accService = Cc["@mozilla.org/accessibilityService;1"].getService(
+        Ci.nsIAccessibilityService
+      );
+    }
+
+    Services.obs.addObserver(this, "a11y-consumers-changed");
+    Services.prefs.addObserver(PREF_ACCESSIBILITY_FORCE_DISABLED, this);
+  }
+
+  bootstrap() {
+    return {
+      canBeDisabled: this.canBeDisabled,
+      canBeEnabled: this.canBeEnabled,
+    };
+  }
+
+  observe(subject, topic, data) {
+    if (topic === "a11y-consumers-changed") {
+      // This event is fired when accessibility service consumers change. Since
+      // this observer lives in parent process there are 2 possible consumers of
+      // a11y service: XPCOM and PlatformAPI (e.g. screen readers). We only care
+      // about PlatformAPI consumer changes because when set, we can no longer
+      // disable accessibility service.
+      const { PlatformAPI } = JSON.parse(data);
+      this.emit("can-be-disabled-change", !PlatformAPI);
+    } else if (
+      !this.disabling &&
+      topic === "nsPref:changed" &&
+      data === PREF_ACCESSIBILITY_FORCE_DISABLED
+    ) {
+      // PREF_ACCESSIBILITY_FORCE_DISABLED preference change event. When set to
+      // >=1, it means that the user wants to disable accessibility service and
+      // prevent it from starting in the future. Note: we also check
+      // this.disabling state when handling this pref change because this is how
+      // we disable the accessibility inspector itself.
+      this.emit("can-be-enabled-change", this.canBeEnabled);
+    }
+  }
+
+  /**
+   * A getter that indicates if accessibility service is enabled.
+   *
+   * @return {Boolean}
+   *         True if accessibility service is on.
+   */
+  get enabled() {
+    return Services.appinfo.accessibilityEnabled;
+  }
+
+  /**
+   * A getter that indicates if the accessibility service can be disabled.
+   *
+   * @return {Boolean}
+   *         True if accessibility service can be disabled.
+   */
+  get canBeDisabled() {
+    if (this.enabled) {
+      const a11yService = Cc["@mozilla.org/accessibilityService;1"].getService(
+        Ci.nsIAccessibilityService
+      );
+      const { PlatformAPI } = JSON.parse(a11yService.getConsumers());
+      return !PlatformAPI;
+    }
+
+    return true;
+  }
+
+  /**
+   * A getter that indicates if the accessibility service can be enabled.
+   *
+   * @return {Boolean}
+   *         True if accessibility service can be enabled.
+   */
+  get canBeEnabled() {
+    return Services.prefs.getIntPref(PREF_ACCESSIBILITY_FORCE_DISABLED) < 1;
+  }
+
+  /**
+   * Enable accessibility service (via XPCOM service).
+   */
+  enable() {
+    if (this.enabled || !this.canBeEnabled) {
+      return;
+    }
+
+    this.accService = Cc["@mozilla.org/accessibilityService;1"].getService(
+      Ci.nsIAccessibilityService
+    );
+  }
+
+  /**
+   * Force disable accessibility service. This method removes the reference to
+   * the XPCOM a11y service object and flips the
+   * PREF_ACCESSIBILITY_FORCE_DISABLED preference on and off to shutdown a11y
+   * service.
+   */
+  disable() {
+    if (!this.enabled || !this.canBeDisabled) {
+      return;
+    }
+
+    this.disabling = true;
+    this.accService = null;
+    // Set PREF_ACCESSIBILITY_FORCE_DISABLED to 1 to force disable
+    // accessibility service. This is the only way to guarantee an immediate
+    // accessibility service shutdown in all processes. This also prevents
+    // accessibility service from starting up in the future.
+    Services.prefs.setIntPref(PREF_ACCESSIBILITY_FORCE_DISABLED, 1);
+    // Set PREF_ACCESSIBILITY_FORCE_DISABLED back to previous default or user
+    // set value. This will not start accessibility service until the user
+    // activates it again. It simply ensures that accessibility service can
+    // start again (when value is below 1).
+    Services.prefs.setIntPref(PREF_ACCESSIBILITY_FORCE_DISABLED, this.userPref);
+    delete this.disabling;
+  }
+
+  /**
+   * Destroy the helper class, remove all listeners and if possible disable
+   * accessibility service in the parent process.
+   */
+  destroy() {
+    this.disable();
+    super.destroy();
+    Services.obs.removeObserver(this, "a11y-consumers-changed");
+    Services.prefs.removeObserver(PREF_ACCESSIBILITY_FORCE_DISABLED, this);
+  }
+}
+
+exports.ParentAccessibilityActor = ParentAccessibilityActor;
diff --git a/devtools/server/actors/accessibility/simulator.js b/devtools/server/actors/accessibility/simulator.js
new file mode 100644
index 0000000000..4f7e059d8c
--- /dev/null
+++ b/devtools/server/actors/accessibility/simulator.js
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  simulatorSpec,
+} = require("resource://devtools/shared/specs/accessibility.js");
+
+const {
+  simulation: { COLOR_TRANSFORMATION_MATRICES },
+} = require("resource://devtools/server/actors/accessibility/constants.js");
+
+/**
+ * The SimulatorActor is responsible for setting color matrices
+ * based on the simulation type specified.
+ */
+class SimulatorActor extends Actor {
+  constructor(conn, targetActor) {
+    super(conn, simulatorSpec);
+    this.targetActor = targetActor;
+  }
+
+  /**
+   * Simulates a type of visual impairment (i.e. color blindness or contrast loss).
+   *
+   * @param  {Object} options
+   *         Properties: {Array} types
+   *                     Contains the types of visual impairment(s) to be simulated.
+   *                     Set default color matrix if array is empty.
+   * @return {Boolean}
+   *         True if matrix was successfully applied, false otherwise.
+   */
+  simulate(options) {
+    if (options.types.length > 1) {
+      return false;
+    }
+
+    return this.setColorMatrix(
+      COLOR_TRANSFORMATION_MATRICES[
+        options.types.length === 1 ? options.types[0] : "NONE"
+      ]
+    );
+  }
+
+  setColorMatrix(colorMatrix) {
+    if (!this.docShell) {
+      return false;
+    }
+
+    try {
+      this.docShell.setColorMatrix(colorMatrix);
+    } catch (error) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Disables all simulations by setting the default color matrix.
+   */
+  disable() {
+    this.simulate({ types: [] });
+  }
+
+  destroy() {
+    super.destroy();
+
+    this.disable();
+    this.targetActor = null;
+  }
+
+  get docShell() {
+    return this.targetActor && this.targetActor.docShell;
+  }
+}
+
+exports.SimulatorActor = SimulatorActor;
diff --git a/devtools/server/actors/accessibility/walker.js b/devtools/server/actors/accessibility/walker.js
new file mode 100644
index 0000000000..17a21af482
--- /dev/null
+++ b/devtools/server/actors/accessibility/walker.js
@@ -0,0 +1,1315 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  accessibleWalkerSpec,
+} = require("resource://devtools/shared/specs/accessibility.js");
+
+const {
+  simulation: { COLOR_TRANSFORMATION_MATRICES },
+} = require("resource://devtools/server/actors/accessibility/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "AccessibleActor",
+  "resource://devtools/server/actors/accessibility/accessible.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["CustomHighlighterActor"],
+  "resource://devtools/server/actors/highlighters.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "DevToolsUtils",
+  "resource://devtools/shared/DevToolsUtils.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "events",
+  "resource://devtools/shared/event-emitter.js"
+);
+loader.lazyRequireGetter(
+  this,
+  ["isWindowIncluded", "isFrameWithChildTarget"],
+  "resource://devtools/shared/layout/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "isXUL",
+  "resource://devtools/server/actors/highlighters/utils/markup.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  [
+    "isDefunct",
+    "loadSheetForBackgroundCalculation",
+    "removeSheetForBackgroundCalculation",
+  ],
+  "resource://devtools/server/actors/utils/accessibility.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "accessibility",
+  "resource://devtools/shared/constants.js",
+  true
+);
+
+const kStateHover = 0x00000004; // ElementState::HOVER
+
+const {
+  EVENT_TEXT_CHANGED,
+  EVENT_TEXT_INSERTED,
+  EVENT_TEXT_REMOVED,
+  EVENT_ACCELERATOR_CHANGE,
+  EVENT_ACTION_CHANGE,
+  EVENT_DEFACTION_CHANGE,
+  EVENT_DESCRIPTION_CHANGE,
+  EVENT_DOCUMENT_ATTRIBUTES_CHANGED,
+  EVENT_HIDE,
+  EVENT_NAME_CHANGE,
+  EVENT_OBJECT_ATTRIBUTE_CHANGED,
+  EVENT_REORDER,
+  EVENT_STATE_CHANGE,
+  EVENT_TEXT_ATTRIBUTE_CHANGED,
+  EVENT_VALUE_CHANGE,
+} = Ci.nsIAccessibleEvent;
+
+// TODO: We do not need this once bug 1422913 is fixed. We also would not need
+// to fire a name change event for an accessible that has an updated subtree and
+// that has its name calculated from the said subtree.
+const NAME_FROM_SUBTREE_RULE_ROLES = new Set([
+  Ci.nsIAccessibleRole.ROLE_BUTTONDROPDOWN,
+  Ci.nsIAccessibleRole.ROLE_BUTTONMENU,
+  Ci.nsIAccessibleRole.ROLE_CELL,
+  Ci.nsIAccessibleRole.ROLE_CHECKBUTTON,
+  Ci.nsIAccessibleRole.ROLE_CHECK_MENU_ITEM,
+  Ci.nsIAccessibleRole.ROLE_CHECK_RICH_OPTION,
+  Ci.nsIAccessibleRole.ROLE_COLUMNHEADER,
+  Ci.nsIAccessibleRole.ROLE_COMBOBOX_OPTION,
+  Ci.nsIAccessibleRole.ROLE_DEFINITION,
+  Ci.nsIAccessibleRole.ROLE_GRID_CELL,
+  Ci.nsIAccessibleRole.ROLE_HEADING,
+  Ci.nsIAccessibleRole.ROLE_KEY,
+  Ci.nsIAccessibleRole.ROLE_LABEL,
+  Ci.nsIAccessibleRole.ROLE_LINK,
+  Ci.nsIAccessibleRole.ROLE_LISTITEM,
+  Ci.nsIAccessibleRole.ROLE_MATHML_IDENTIFIER,
+  Ci.nsIAccessibleRole.ROLE_MATHML_NUMBER,
+  Ci.nsIAccessibleRole.ROLE_MATHML_OPERATOR,
+  Ci.nsIAccessibleRole.ROLE_MATHML_TEXT,
+  Ci.nsIAccessibleRole.ROLE_MATHML_STRING_LITERAL,
+  Ci.nsIAccessibleRole.ROLE_MATHML_GLYPH,
+  Ci.nsIAccessibleRole.ROLE_MENUITEM,
+  Ci.nsIAccessibleRole.ROLE_OPTION,
+  Ci.nsIAccessibleRole.ROLE_OUTLINEITEM,
+  Ci.nsIAccessibleRole.ROLE_PAGETAB,
+  Ci.nsIAccessibleRole.ROLE_PARENT_MENUITEM,
+  Ci.nsIAccessibleRole.ROLE_PUSHBUTTON,
+  Ci.nsIAccessibleRole.ROLE_RADIOBUTTON,
+  Ci.nsIAccessibleRole.ROLE_RADIO_MENU_ITEM,
+  Ci.nsIAccessibleRole.ROLE_RICH_OPTION,
+  Ci.nsIAccessibleRole.ROLE_ROW,
+  Ci.nsIAccessibleRole.ROLE_ROWHEADER,
+  Ci.nsIAccessibleRole.ROLE_SUMMARY,
+  Ci.nsIAccessibleRole.ROLE_SWITCH,
+  Ci.nsIAccessibleRole.ROLE_TERM,
+  Ci.nsIAccessibleRole.ROLE_TOGGLE_BUTTON,
+  Ci.nsIAccessibleRole.ROLE_TOOLTIP,
+]);
+
+const IS_OSX = Services.appinfo.OS === "Darwin";
+
+const {
+  SCORES: { BEST_PRACTICES, FAIL, WARNING },
+} = accessibility;
+
+/**
+ * Helper function that determines if nsIAccessible object is in stale state. When an
+ * object is stale it means its subtree is not up to date.
+ *
+ * @param  {nsIAccessible}  accessible
+ *         object to be tested.
+ * @return {Boolean}
+ *         True if accessible object is stale, false otherwise.
+ */
+function isStale(accessible) {
+  const extraState = {};
+  accessible.getState({}, extraState);
+  // extraState.value is a bitmask. We are applying bitwise AND to mask out
+  // irrelevant states.
+  return !!(extraState.value & Ci.nsIAccessibleStates.EXT_STATE_STALE);
+}
+
+/**
+ * Get accessibility audit starting with the passed accessible object as a root.
+ *
+ * @param {Object} acc
+ *        AccessibileActor to be used as the root for the audit.
+ * @param {Object} options
+ *        Options for running audit, may include:
+ *        - types: Array of audit types to be performed during audit.
+ * @param {Map} report
+ *        An accumulator map to be used to store audit information.
+ * @param {Object} progress
+ *        An audit project object that is used to track the progress of the
+ *        audit and send progress "audit-event" events to the client.
+ */
+function getAudit(acc, options, report, progress) {
+  if (acc.isDefunct) {
+    return;
+  }
+
+  // Audit returns a promise, save the actual value in the report.
+  report.set(
+    acc,
+    acc.audit(options).then(result => {
+      report.set(acc, result);
+      progress.increment();
+    })
+  );
+
+  for (const child of acc.children()) {
+    getAudit(child, options, report, progress);
+  }
+}
+
+/**
+ * A helper class that is used to track audit progress and send progress events
+ * to the client.
+ */
+class AuditProgress {
+  constructor(walker) {
+    this.completed = 0;
+    this.percentage = 0;
+    this.walker = walker;
+  }
+
+  setTotal(size) {
+    this.size = size;
+  }
+
+  notify() {
+    this.walker.emit("audit-event", {
+      type: "progress",
+      progress: {
+        total: this.size,
+        percentage: this.percentage,
+        completed: this.completed,
+      },
+    });
+  }
+
+  increment() {
+    this.completed++;
+    const { completed, size } = this;
+    if (!size) {
+      return;
+    }
+
+    const percentage = Math.round((completed / size) * 100);
+    if (percentage > this.percentage) {
+      this.percentage = percentage;
+      this.notify();
+    }
+  }
+
+  destroy() {
+    this.walker = null;
+  }
+}
+
+/**
+ * The AccessibleWalkerActor stores a cache of AccessibleActors that represent
+ * accessible objects in a given document.
+ *
+ * It is also responsible for implicitely initializing and shutting down
+ * accessibility engine by storing a reference to the XPCOM accessibility
+ * service.
+ */
+class AccessibleWalkerActor extends Actor {
+  constructor(conn, targetActor) {
+    super(conn, accessibleWalkerSpec);
+    this.targetActor = targetActor;
+    this.refMap = new Map();
+    this._loadedSheets = new WeakMap();
+    this.setA11yServiceGetter();
+    this.onPick = this.onPick.bind(this);
+    this.onHovered = this.onHovered.bind(this);
+    this._preventContentEvent = this._preventContentEvent.bind(this);
+    this.onKey = this.onKey.bind(this);
+    this.onFocusIn = this.onFocusIn.bind(this);
+    this.onFocusOut = this.onFocusOut.bind(this);
+    this.onHighlighterEvent = this.onHighlighterEvent.bind(this);
+  }
+
+  get highlighter() {
+    if (!this._highlighter) {
+      this._highlighter = new CustomHighlighterActor(
+        this,
+        "AccessibleHighlighter"
+      );
+
+      this.manage(this._highlighter);
+      this._highlighter.on("highlighter-event", this.onHighlighterEvent);
+    }
+
+    return this._highlighter;
+  }
+
+  get tabbingOrderHighlighter() {
+    if (!this._tabbingOrderHighlighter) {
+      this._tabbingOrderHighlighter = new CustomHighlighterActor(
+        this,
+        "TabbingOrderHighlighter"
+      );
+
+      this.manage(this._tabbingOrderHighlighter);
+    }
+
+    return this._tabbingOrderHighlighter;
+  }
+
+  setA11yServiceGetter() {
+    DevToolsUtils.defineLazyGetter(this, "a11yService", () => {
+      Services.obs.addObserver(this, "accessible-event");
+      return Cc["@mozilla.org/accessibilityService;1"].getService(
+        Ci.nsIAccessibilityService
+      );
+    });
+  }
+
+  get rootWin() {
+    return this.targetActor && this.targetActor.window;
+  }
+
+  get rootDoc() {
+    return this.targetActor && this.targetActor.window.document;
+  }
+
+  get isXUL() {
+    return isXUL(this.rootWin);
+  }
+
+  get colorMatrix() {
+    if (!this.targetActor.docShell) {
+      return null;
+    }
+
+    const colorMatrix = this.targetActor.docShell.getColorMatrix();
+    if (
+      colorMatrix.length === 0 ||
+      colorMatrix === COLOR_TRANSFORMATION_MATRICES.NONE
+    ) {
+      return null;
+    }
+
+    return colorMatrix;
+  }
+
+  reset() {
+    try {
+      Services.obs.removeObserver(this, "accessible-event");
+    } catch (e) {
+      // Accessible event observer might not have been initialized if a11y
+      // service was never used.
+    }
+
+    this.cancelPick();
+
+    // Clean up accessible actors cache.
+    this.clearRefs();
+
+    this._childrenPromise = null;
+    delete this.a11yService;
+    this.setA11yServiceGetter();
+  }
+
+  /**
+   * Remove existing cache (of accessible actors) from tree.
+   */
+  clearRefs() {
+    for (const actor of this.refMap.values()) {
+      actor.destroy();
+    }
+  }
+
+  destroy() {
+    super.destroy();
+
+    this.reset();
+
+    if (this._highlighter) {
+      this._highlighter.off("highlighter-event", this.onHighlighterEvent);
+      this._highlighter = null;
+    }
+
+    if (this._tabbingOrderHighlighter) {
+      this._tabbingOrderHighlighter = null;
+    }
+
+    this.targetActor = null;
+    this.refMap = null;
+  }
+
+  getRef(rawAccessible) {
+    return this.refMap.get(rawAccessible);
+  }
+
+  addRef(rawAccessible) {
+    let actor = this.refMap.get(rawAccessible);
+    if (actor) {
+      return actor;
+    }
+
+    actor = new AccessibleActor(this, rawAccessible);
+    // Add the accessible actor as a child of this accessible walker actor,
+    // assigning it an actorID.
+    this.manage(actor);
+    this.refMap.set(rawAccessible, actor);
+
+    return actor;
+  }
+
+  /**
+   * Clean up accessible actors cache for a given accessible's subtree.
+   *
+   * @param  {null|nsIAccessible} rawAccessible
+   */
+  purgeSubtree(rawAccessible) {
+    if (!rawAccessible) {
+      return;
+    }
+
+    try {
+      for (
+        let child = rawAccessible.firstChild;
+        child;
+        child = child.nextSibling
+      ) {
+        this.purgeSubtree(child);
+      }
+    } catch (e) {
+      // rawAccessible or its descendants are defunct.
+    }
+
+    const actor = this.getRef(rawAccessible);
+    if (actor) {
+      actor.destroy();
+    }
+  }
+
+  unmanage(actor) {
+    if (actor instanceof AccessibleActor) {
+      this.refMap.delete(actor.rawAccessible);
+    }
+    Actor.prototype.unmanage.call(this, actor);
+  }
+
+  /**
+   * A helper method. Accessibility walker is assumed to have only 1 child which
+   * is the top level document.
+   */
+  async children() {
+    if (this._childrenPromise) {
+      return this._childrenPromise;
+    }
+
+    this._childrenPromise = Promise.all([this.getDocument()]);
+    const children = await this._childrenPromise;
+    this._childrenPromise = null;
+    return children;
+  }
+
+  /**
+   * A promise for a root document accessible actor that only resolves when its
+   * corresponding document accessible object is fully loaded.
+   *
+   * @return {Promise}
+   */
+  getDocument() {
+    if (!this.rootDoc || !this.rootDoc.documentElement) {
+      return this.once("document-ready").then(docAcc => this.addRef(docAcc));
+    }
+
+    if (this.isXUL) {
+      const doc = this.addRef(this.getRawAccessibleFor(this.rootDoc));
+      return Promise.resolve(doc);
+    }
+
+    const doc = this.getRawAccessibleFor(this.rootDoc);
+
+    // For non-visible same-process iframes we don't get a document and
+    // won't get a "document-ready" event.
+    if (!doc && !this.rootWin.windowGlobalChild.isProcessRoot) {
+      // We can ignore such document as there won't be anything to audit in them.
+      return null;
+    }
+
+    if (!doc || isStale(doc)) {
+      return this.once("document-ready").then(docAcc => this.addRef(docAcc));
+    }
+
+    return Promise.resolve(this.addRef(doc));
+  }
+
+  /**
+   * Get an accessible actor for a domnode actor.
+   * @param  {Object} domNode
+   *         domnode actor for which accessible actor is being created.
+   * @return {Promse}
+   *         A promise that resolves when accessible actor is created for a
+   *         domnode actor.
+   */
+  getAccessibleFor(domNode) {
+    // We need to make sure that the document is loaded processed by a11y first.
+    return this.getDocument().then(() => {
+      const rawAccessible = this.getRawAccessibleFor(domNode.rawNode);
+      // Not all DOM nodes have corresponding accessible objects. It's usually
+      // the case where there is no semantics or relevance to the accessibility
+      // client.
+      if (!rawAccessible) {
+        return null;
+      }
+
+      return this.addRef(rawAccessible);
+    });
+  }
+
+  /**
+   * Get a raw accessible object for a raw node.
+   * @param  {DOMNode} rawNode
+   *         Raw node for which accessible object is being retrieved.
+   * @return {nsIAccessible}
+   *         Accessible object for a given DOMNode.
+   */
+  getRawAccessibleFor(rawNode) {
+    // Accessible can only be retrieved iff accessibility service is enabled.
+    if (!Services.appinfo.accessibilityEnabled) {
+      return null;
+    }
+
+    return this.a11yService.getAccessibleFor(rawNode);
+  }
+
+  async getAncestry(accessible) {
+    if (!accessible || accessible.indexInParent === -1) {
+      return [];
+    }
+    const doc = await this.getDocument();
+    if (!doc) {
+      return [];
+    }
+
+    const ancestry = [];
+    if (accessible === doc) {
+      return ancestry;
+    }
+
+    try {
+      let parent = accessible;
+      while (parent && (parent = parent.parentAcc) && parent != doc) {
+        ancestry.push(parent);
+      }
+      ancestry.push(doc);
+    } catch (error) {
+      throw new Error(`Failed to get ancestor for ${accessible}: ${error}`);
+    }
+
+    return ancestry.map(parent => ({
+      accessible: parent,
+      children: parent.children(),
+    }));
+  }
+
+  /**
+   * Run accessibility audit and return relevant ancestries for AccessibleActors
+   * that have non-empty audit checks.
+   *
+   * @param  {Object} options
+   *         Options for running audit, may include:
+   *         - types: Array of audit types to be performed during audit.
+   *
+   * @return {Promise}
+   *         A promise that resolves when the audit is complete and all relevant
+   *         ancestries are calculated.
+   */
+  async audit(options) {
+    const doc = await this.getDocument();
+    if (!doc) {
+      return [];
+    }
+
+    const report = new Map();
+    this._auditProgress = new AuditProgress(this);
+    getAudit(doc, options, report, this._auditProgress);
+    this._auditProgress.setTotal(report.size);
+    await Promise.all(report.values());
+
+    const ancestries = [];
+    for (const [acc, audit] of report.entries()) {
+      // Filter out audits that have no failing checks.
+      if (
+        audit &&
+        Object.values(audit).some(
+          check =>
+            check != null &&
+            !check.error &&
+            [BEST_PRACTICES, FAIL, WARNING].includes(check.score)
+        )
+      ) {
+        ancestries.push(this.getAncestry(acc));
+      }
+    }
+
+    return Promise.all(ancestries);
+  }
+
+  /**
+   * Start accessibility audit. The result of this function will not be an audit
+   * report. Instead, an "audit-event" event will be fired when the audit is
+   * completed or fails.
+   *
+   * @param {Object} options
+   *        Options for running audit, may include:
+   *        - types: Array of audit types to be performed during audit.
+   */
+  startAudit(options) {
+    // Audit is already running, wait for the "audit-event" event.
+    if (this._auditing) {
+      return;
+    }
+
+    this._auditing = this.audit(options)
+      // We do not want to block on audit request, instead fire "audit-event"
+      // event when internal audit is finished or failed.
+      .then(ancestries =>
+        this.emit("audit-event", {
+          type: "completed",
+          ancestries,
+        })
+      )
+      .catch(() => this.emit("audit-event", { type: "error" }))
+      .finally(() => {
+        this._auditing = null;
+        if (this._auditProgress) {
+          this._auditProgress.destroy();
+          this._auditProgress = null;
+        }
+      });
+  }
+
+  onHighlighterEvent(data) {
+    this.emit("highlighter-event", data);
+  }
+
+  /**
+   * Accessible event observer function.
+   *
+   * @param {Ci.nsIAccessibleEvent} subject
+   *                                      accessible event object.
+   */
+  // eslint-disable-next-line complexity
+  observe(subject) {
+    const event = subject.QueryInterface(Ci.nsIAccessibleEvent);
+    const rawAccessible = event.accessible;
+    const accessible = this.getRef(rawAccessible);
+
+    if (rawAccessible instanceof Ci.nsIAccessibleDocument && !accessible) {
+      const rootDocAcc = this.getRawAccessibleFor(this.rootDoc);
+      if (rawAccessible === rootDocAcc && !isStale(rawAccessible)) {
+        this.clearRefs();
+        // If it's a top level document notify listeners about the document
+        // being ready.
+        events.emit(this, "document-ready", rawAccessible);
+      }
+    }
+
+    switch (event.eventType) {
+      case EVENT_STATE_CHANGE:
+        const { state, isEnabled } = event.QueryInterface(
+          Ci.nsIAccessibleStateChangeEvent
+        );
+        const isBusy = state & Ci.nsIAccessibleStates.STATE_BUSY;
+        if (accessible) {
+          // Only propagate state change events for active accessibles.
+          if (isBusy && isEnabled) {
+            if (rawAccessible instanceof Ci.nsIAccessibleDocument) {
+              // Remove existing cache from tree.
+              this.clearRefs();
+            }
+            return;
+          }
+          events.emit(accessible, "states-change", accessible.states);
+        }
+
+        break;
+      case EVENT_NAME_CHANGE:
+        if (accessible) {
+          events.emit(
+            accessible,
+            "name-change",
+            rawAccessible.name,
+            event.DOMNode == this.rootDoc
+              ? undefined
+              : this.getRef(rawAccessible.parent)
+          );
+        }
+        break;
+      case EVENT_VALUE_CHANGE:
+        if (accessible) {
+          events.emit(accessible, "value-change", rawAccessible.value);
+        }
+        break;
+      case EVENT_DESCRIPTION_CHANGE:
+        if (accessible) {
+          events.emit(
+            accessible,
+            "description-change",
+            rawAccessible.description
+          );
+        }
+        break;
+      case EVENT_REORDER:
+        if (accessible) {
+          accessible
+            .children()
+            .forEach(child =>
+              events.emit(child, "index-in-parent-change", child.indexInParent)
+            );
+          events.emit(accessible, "reorder", rawAccessible.childCount);
+        }
+        break;
+      case EVENT_HIDE:
+        if (event.DOMNode == this.rootDoc) {
+          this.clearRefs();
+        } else {
+          this.purgeSubtree(rawAccessible);
+        }
+        break;
+      case EVENT_DEFACTION_CHANGE:
+      case EVENT_ACTION_CHANGE:
+        if (accessible) {
+          events.emit(accessible, "actions-change", accessible.actions);
+        }
+        break;
+      case EVENT_TEXT_CHANGED:
+      case EVENT_TEXT_INSERTED:
+      case EVENT_TEXT_REMOVED:
+        if (accessible) {
+          events.emit(accessible, "text-change");
+          if (NAME_FROM_SUBTREE_RULE_ROLES.has(rawAccessible.role)) {
+            events.emit(
+              accessible,
+              "name-change",
+              rawAccessible.name,
+              event.DOMNode == this.rootDoc
+                ? undefined
+                : this.getRef(rawAccessible.parent)
+            );
+          }
+        }
+        break;
+      case EVENT_DOCUMENT_ATTRIBUTES_CHANGED:
+      case EVENT_OBJECT_ATTRIBUTE_CHANGED:
+      case EVENT_TEXT_ATTRIBUTE_CHANGED:
+        if (accessible) {
+          events.emit(accessible, "attributes-change", accessible.attributes);
+        }
+        break;
+      // EVENT_ACCELERATOR_CHANGE is currently not fired by gecko accessibility.
+      case EVENT_ACCELERATOR_CHANGE:
+        if (accessible) {
+          events.emit(
+            accessible,
+            "shortcut-change",
+            accessible.keyboardShortcut
+          );
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Ensure that nothing interferes with the audit for an accessible object
+   * (CSS, overlays) by load accessibility highlighter style sheet used for
+   * preventing transitions and applying transparency when calculating colour
+   * contrast as well as temporarily hiding accessible highlighter overlay.
+   * @param  {Object} win
+   *         Window where highlighting happens.
+   */
+  async clearStyles(win) {
+    const requests = this._loadedSheets.get(win);
+    if (requests != null) {
+      this._loadedSheets.set(win, requests + 1);
+      return;
+    }
+
+    // Disable potential mouse driven transitions (This is important because accessibility
+    // highlighter temporarily modifies text color related CSS properties. In case where
+    // there are transitions that affect them, there might be unexpected side effects when
+    // taking a snapshot for contrast measurement).
+    loadSheetForBackgroundCalculation(win);
+    this._loadedSheets.set(win, 1);
+    await this.hideHighlighter();
+  }
+
+  /**
+   * Restore CSS and overlays that could've interfered with the audit for an
+   * accessible object by unloading accessibility highlighter style sheet used
+   * for preventing transitions and applying transparency when calculating
+   * colour contrast and potentially restoring accessible highlighter overlay.
+   * @param  {Object} win
+   *         Window where highlighting was happenning.
+   */
+  async restoreStyles(win) {
+    const requests = this._loadedSheets.get(win);
+    if (!requests) {
+      return;
+    }
+
+    if (requests > 1) {
+      this._loadedSheets.set(win, requests - 1);
+      return;
+    }
+
+    await this.showHighlighter();
+    removeSheetForBackgroundCalculation(win);
+    this._loadedSheets.delete(win);
+  }
+
+  async hideHighlighter() {
+    // TODO: Fix this workaround that temporarily removes higlighter bounds
+    // overlay that can interfere with the contrast ratio calculation.
+    if (this._highlighter) {
+      const highlighter = this._highlighter.instance;
+      await highlighter.isReady;
+      highlighter.hideAccessibleBounds();
+    }
+  }
+
+  async showHighlighter() {
+    // TODO: Fix this workaround that temporarily removes higlighter bounds
+    // overlay that can interfere with the contrast ratio calculation.
+    if (this._highlighter) {
+      const highlighter = this._highlighter.instance;
+      await highlighter.isReady;
+      highlighter.showAccessibleBounds();
+    }
+  }
+
+  /**
+   * Public method used to show an accessible object highlighter on the client
+   * side.
+   *
+   * @param  {Object} accessible
+   *         AccessibleActor to be highlighted.
+   * @param  {Object} options
+   *         Object used for passing options. Available options:
+   *         - duration {Number}
+   *                    Duration of time that the highlighter should be shown.
+   * @return {Boolean}
+   *         True if highlighter shows the accessible object.
+   */
+  async highlightAccessible(accessible, options = {}) {
+    this.unhighlight();
+    // Do not highlight if accessible is dead.
+    if (!accessible || accessible.isDefunct || accessible.indexInParent < 0) {
+      return false;
+    }
+
+    this._highlightingAccessible = accessible;
+    const { bounds } = accessible;
+    if (!bounds) {
+      return false;
+    }
+
+    const { DOMNode: rawNode } = accessible.rawAccessible;
+    const audit = await accessible.audit();
+    if (this._highlightingAccessible !== accessible) {
+      return false;
+    }
+
+    const { name, role } = accessible;
+    const { highlighter } = this;
+    await highlighter.instance.isReady;
+    if (this._highlightingAccessible !== accessible) {
+      return false;
+    }
+
+    const shown = highlighter.show(
+      { rawNode },
+      { ...options, ...bounds, name, role, audit, isXUL: this.isXUL }
+    );
+    this._highlightingAccessible = null;
+
+    return shown;
+  }
+
+  /**
+   * Public method used to hide an accessible object highlighter on the client
+   * side.
+   */
+  unhighlight() {
+    if (!this._highlighter) {
+      return;
+    }
+
+    this.highlighter.hide();
+    this._highlightingAccessible = null;
+  }
+
+  /**
+   * Picking state that indicates if picking is currently enabled and, if so,
+   * what the current and hovered accessible objects are.
+   */
+  _isPicking = false;
+  _currentAccessible = null;
+
+  /**
+   * Check is event handling is allowed.
+   */
+  _isEventAllowed({ view }) {
+    return this.rootWin.isChromeWindow || isWindowIncluded(this.rootWin, view);
+  }
+
+  /**
+   * Check if the DOM event received when picking shold be ignored.
+   * @param {Event} event
+   */
+  _ignoreEventWhenPicking(event) {
+    return (
+      !this._isPicking ||
+      // If the DOM event is about a remote frame, only the WalkerActor for that
+      // remote frame target should emit RDP events (hovered/picked/...). And
+      // all other WalkerActor for intermediate iframe and top level document
+      // targets should stay silent.
+      isFrameWithChildTarget(
+        this.targetActor,
+        event.originalTarget || event.target
+      )
+    );
+  }
+
+  _preventContentEvent(event) {
+    if (this._ignoreEventWhenPicking(event)) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    const target = event.originalTarget || event.target;
+    if (target !== this._currentTarget) {
+      this._resetStateAndReleaseTarget();
+      this._currentTarget = target;
+      // We use InspectorUtils to save the original hover content state of the target
+      // element (that includes its hover state). In order to not trigger any visual
+      // changes to the element that depend on its hover state we remove the state while
+      // the element is the most current target of the highlighter.
+      //
+      // TODO: This logic can be removed if/when we can use elementsAtPoint API for
+      // determining topmost DOMNode that corresponds to specific coordinates. We would
+      // then be able to use a highlighter overlay that would prevent all pointer events
+      // to content but still render highlighter for the node/element correctly.
+      this._currentTargetHoverState =
+        InspectorUtils.getContentState(target) & kStateHover;
+      InspectorUtils.removeContentState(target, kStateHover);
+    }
+  }
+
+  /**
+   * Click event handler for when picking is enabled.
+   *
+   * @param  {Object} event
+   *         Current click event.
+   */
+  onPick(event) {
+    if (this._ignoreEventWhenPicking(event)) {
+      return;
+    }
+
+    this._preventContentEvent(event);
+    if (!this._isEventAllowed(event)) {
+      return;
+    }
+
+    // If shift is pressed, this is only a preview click, send the event to
+    // the client, but don't stop picking.
+    if (event.shiftKey) {
+      if (!this._currentAccessible) {
+        this._currentAccessible = this._findAndAttachAccessible(event);
+      }
+      events.emit(this, "picker-accessible-previewed", this._currentAccessible);
+      return;
+    }
+
+    this._unsetPickerEnvironment();
+    this._isPicking = false;
+    if (!this._currentAccessible) {
+      this._currentAccessible = this._findAndAttachAccessible(event);
+    }
+    events.emit(this, "picker-accessible-picked", this._currentAccessible);
+  }
+
+  /**
+   * Hover event handler for when picking is enabled.
+   *
+   * @param  {Object} event
+   *         Current hover event.
+   */
+  async onHovered(event) {
+    if (this._ignoreEventWhenPicking(event)) {
+      return;
+    }
+
+    this._preventContentEvent(event);
+    if (!this._isEventAllowed(event)) {
+      return;
+    }
+
+    const accessible = this._findAndAttachAccessible(event);
+    if (!accessible || this._currentAccessible === accessible) {
+      return;
+    }
+
+    this._currentAccessible = accessible;
+    // Highlight current accessible and by the time we are done, if accessible that was
+    // highlighted is not current any more (user moved the mouse to a new node) highlight
+    // the most current accessible again.
+    const shown = await this.highlightAccessible(accessible);
+    if (this._isPicking && shown && accessible === this._currentAccessible) {
+      events.emit(this, "picker-accessible-hovered", accessible);
+    }
+  }
+
+  /**
+   * Keyboard event handler for when picking is enabled.
+   *
+   * @param  {Object} event
+   *         Current keyboard event.
+   */
+  onKey(event) {
+    if (!this._currentAccessible || this._ignoreEventWhenPicking(event)) {
+      return;
+    }
+
+    this._preventContentEvent(event);
+    if (!this._isEventAllowed(event)) {
+      return;
+    }
+
+    /**
+     * KEY: Action/scope
+     * ENTER/CARRIAGE_RETURN: Picks current accessible
+     * ESC/CTRL+SHIFT+C: Cancels picker
+     */
+    switch (event.keyCode) {
+      // Select the element.
+      case event.DOM_VK_RETURN:
+        this.onPick(event);
+        break;
+      // Cancel pick mode.
+      case event.DOM_VK_ESCAPE:
+        this.cancelPick();
+        events.emit(this, "picker-accessible-canceled");
+        break;
+      case event.DOM_VK_C:
+        if (
+          (IS_OSX && event.metaKey && event.altKey) ||
+          (!IS_OSX && event.ctrlKey && event.shiftKey)
+        ) {
+          this.cancelPick();
+          events.emit(this, "picker-accessible-canceled");
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Picker method that starts picker content listeners.
+   */
+  pick() {
+    if (!this._isPicking) {
+      this._isPicking = true;
+      this._setPickerEnvironment();
+    }
+  }
+
+  /**
+   * This pick method also focuses the highlighter's target window.
+   */
+  pickAndFocus() {
+    this.pick();
+    this.rootWin.focus();
+  }
+
+  attachAccessible(rawAccessible, accessibleDocument) {
+    // If raw accessible object is defunct or detached, no need to cache it and
+    // its ancestry.
+    if (
+      !rawAccessible ||
+      isDefunct(rawAccessible) ||
+      rawAccessible.indexInParent < 0
+    ) {
+      return null;
+    }
+
+    const accessible = this.addRef(rawAccessible);
+    // There is a chance that ancestry lookup can fail if the accessible is in
+    // the detached subtree. At that point the root accessible object would be
+    // defunct and accessing it via parent property will throw.
+    try {
+      let parent = accessible;
+      while (parent && parent.rawAccessible != accessibleDocument) {
+        parent = parent.parentAcc;
+      }
+    } catch (error) {
+      throw new Error(`Failed to get ancestor for ${accessible}: ${error}`);
+    }
+
+    return accessible;
+  }
+
+  /**
+   * Find deepest accessible object that corresponds to the screen coordinates of the
+   * mouse pointer and attach it to the AccessibilityWalker tree.
+   *
+   * @param  {Object} event
+   *         Correspoinding content event.
+   * @return {null|Object}
+   *         Accessible object, if available, that corresponds to a DOM node.
+   */
+  _findAndAttachAccessible(event) {
+    const target = event.originalTarget || event.target;
+    const win = target.ownerGlobal;
+    // This event might be inside a sub-document, so don't use this.rootDoc.
+    const docAcc = this.getRawAccessibleFor(win.document);
+    // If the target is inside a pop-up widget, we need to query the pop-up
+    // Accessible, not the DocAccessible. The DocAccessible can't hit test
+    // inside pop-ups.
+    const popup = win.isChromeWindow ? target.closest("panel") : null;
+    const containerAcc = popup ? this.getRawAccessibleFor(popup) : docAcc;
+    const { devicePixelRatio } = this.rootWin;
+    const rawAccessible = containerAcc.getDeepestChildAtPointInProcess(
+      event.screenX * devicePixelRatio,
+      event.screenY * devicePixelRatio
+    );
+    return this.attachAccessible(rawAccessible, docAcc);
+  }
+
+  /**
+   * Start picker content listeners.
+   */
+  _setPickerEnvironment() {
+    const target = this.targetActor.chromeEventHandler;
+    target.addEventListener("mousemove", this.onHovered, true);
+    target.addEventListener("click", this.onPick, true);
+    target.addEventListener("mousedown", this._preventContentEvent, true);
+    target.addEventListener("mouseup", this._preventContentEvent, true);
+    target.addEventListener("mouseover", this._preventContentEvent, true);
+    target.addEventListener("mouseout", this._preventContentEvent, true);
+    target.addEventListener("mouseleave", this._preventContentEvent, true);
+    target.addEventListener("mouseenter", this._preventContentEvent, true);
+    target.addEventListener("dblclick", this._preventContentEvent, true);
+    target.addEventListener("keydown", this.onKey, true);
+    target.addEventListener("keyup", this._preventContentEvent, true);
+  }
+
+  /**
+   * If content is still alive, stop picker content listeners, reset the hover state for
+   * last target element.
+   */
+  _unsetPickerEnvironment() {
+    const target = this.targetActor.chromeEventHandler;
+
+    if (!target) {
+      return;
+    }
+
+    target.removeEventListener("mousemove", this.onHovered, true);
+    target.removeEventListener("click", this.onPick, true);
+    target.removeEventListener("mousedown", this._preventContentEvent, true);
+    target.removeEventListener("mouseup", this._preventContentEvent, true);
+    target.removeEventListener("mouseover", this._preventContentEvent, true);
+    target.removeEventListener("mouseout", this._preventContentEvent, true);
+    target.removeEventListener("mouseleave", this._preventContentEvent, true);
+    target.removeEventListener("mouseenter", this._preventContentEvent, true);
+    target.removeEventListener("dblclick", this._preventContentEvent, true);
+    target.removeEventListener("keydown", this.onKey, true);
+    target.removeEventListener("keyup", this._preventContentEvent, true);
+
+    this._resetStateAndReleaseTarget();
+  }
+
+  /**
+   * When using accessibility highlighter, we keep track of the most current event pointer
+   * event target. In order to update or release the target, we need to make sure we set
+   * the content state (using InspectorUtils) to its original value.
+   *
+   * TODO: This logic can be removed if/when we can use elementsAtPoint API for
+   * determining topmost DOMNode that corresponds to specific coordinates. We would then
+   * be able to use a highlighter overlay that would prevent all pointer events to content
+   * but still render highlighter for the node/element correctly.
+   */
+  _resetStateAndReleaseTarget() {
+    if (!this._currentTarget) {
+      return;
+    }
+
+    try {
+      if (this._currentTargetHoverState) {
+        InspectorUtils.setContentState(this._currentTarget, kStateHover);
+      }
+    } catch (e) {
+      // DOMNode is already dead.
+    }
+
+    this._currentTarget = null;
+    this._currentTargetState = null;
+  }
+
+  /**
+   * Cacncel picker pick. Remvoe all content listeners and hide the highlighter.
+   */
+  cancelPick() {
+    this.unhighlight();
+
+    if (this._isPicking) {
+      this._unsetPickerEnvironment();
+      this._isPicking = false;
+      this._currentAccessible = null;
+    }
+  }
+
+  /**
+   * Indicates that the tabbing order current active element (focused) is being
+   * tracked.
+   */
+  _isTrackingTabbingOrderFocus = false;
+
+  /**
+   * Current focused element in the tabbing order.
+   */
+  _currentFocusedTabbingOrder = null;
+
+  /**
+   * Focusin event handler for when interacting with tabbing order overlay.
+   *
+   * @param  {Object} event
+   *         Most recent focusin event.
+   */
+  async onFocusIn(event) {
+    if (!this._isTrackingTabbingOrderFocus) {
+      return;
+    }
+
+    const target = event.originalTarget || event.target;
+    if (target === this._currentFocusedTabbingOrder) {
+      return;
+    }
+
+    this._currentFocusedTabbingOrder = target;
+    this.tabbingOrderHighlighter._highlighter.updateFocus({
+      node: target,
+      focused: true,
+    });
+  }
+
+  /**
+   * Focusout event handler for when interacting with tabbing order overlay.
+   *
+   * @param  {Object} event
+   *         Most recent focusout event.
+   */
+  async onFocusOut(event) {
+    if (
+      !this._isTrackingTabbingOrderFocus ||
+      !this._currentFocusedTabbingOrder
+    ) {
+      return;
+    }
+
+    const target = event.originalTarget || event.target;
+    // Sanity check.
+    if (target !== this._currentFocusedTabbingOrder) {
+      console.warn(
+        `focusout target: ${target} does not match current focused element in tabbing order: ${this._currentFocusedTabbingOrder}`
+      );
+    }
+
+    this.tabbingOrderHighlighter._highlighter.updateFocus({
+      node: this._currentFocusedTabbingOrder,
+      focused: false,
+    });
+    this._currentFocusedTabbingOrder = null;
+  }
+
+  /**
+   * Show tabbing order overlay for a given target.
+   *
+   * @param  {Object} elm
+   *         domnode actor to be used as the starting point for generating the
+   *         tabbing order.
+   * @param  {Number} index
+   *         Starting index for the tabbing order.
+   *
+   * @return {JSON}
+   *         Tabbing order information for the last element in the tabbing
+   *         order. It includes a ContentDOMReference for the node and a tabbing
+   *         index. If we are at the end of the tabbing order for the top level
+   *         content document, the ContentDOMReference will be null. If focus
+   *         manager discovered a remote IFRAME, then the ContentDOMReference
+   *         references the IFRAME itself.
+   */
+  showTabbingOrder(elm, index) {
+    // Start track focus related events (only once). `showTabbingOrder` will be
+    // called multiple times for a given target if it contains other remote
+    // targets.
+    if (!this._isTrackingTabbingOrderFocus) {
+      this._isTrackingTabbingOrderFocus = true;
+      const target = this.targetActor.chromeEventHandler;
+      target.addEventListener("focusin", this.onFocusIn, true);
+      target.addEventListener("focusout", this.onFocusOut, true);
+    }
+
+    return this.tabbingOrderHighlighter.show(elm, { index });
+  }
+
+  /**
+   * Hide tabbing order overlay for a given target.
+   */
+  hideTabbingOrder() {
+    if (!this._tabbingOrderHighlighter) {
+      return;
+    }
+
+    this.tabbingOrderHighlighter.hide();
+    if (!this._isTrackingTabbingOrderFocus) {
+      return;
+    }
+
+    this._isTrackingTabbingOrderFocus = false;
+    this._currentFocusedTabbingOrder = null;
+    const target = this.targetActor.chromeEventHandler;
+    if (target) {
+      target.removeEventListener("focusin", this.onFocusIn, true);
+      target.removeEventListener("focusout", this.onFocusOut, true);
+    }
+  }
+}
+
+exports.AccessibleWalkerActor = AccessibleWalkerActor;
diff --git a/devtools/server/actors/accessibility/worker.js b/devtools/server/actors/accessibility/worker.js
new file mode 100644
index 0000000000..75dc78e5b2
--- /dev/null
+++ b/devtools/server/actors/accessibility/worker.js
@@ -0,0 +1,103 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+/**
+ * Import `createTask` to communicate with `devtools/shared/worker`.
+ */
+importScripts("resource://gre/modules/workers/require.js");
+const { createTask } = require("resource://devtools/shared/worker/helper.js");
+
+/**
+ * @see LineGraphWidget.prototype.setDataFromTimestamps in Graphs.js
+ * @param number id
+ * @param array timestamps
+ * @param number interval
+ * @param number duration
+ */
+createTask(self, "getBgRGBA", ({ dataTextBuf, dataBackgroundBuf }) =>
+  getBgRGBA(dataTextBuf, dataBackgroundBuf)
+);
+
+/**
+ * Calculates the luminance of a rgba tuple based on the formula given in
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ *
+ * @param {Array} rgba An array with [r,g,b,a] values.
+ * @return {Number} The calculated luminance.
+ */
+function calculateLuminance(rgba) {
+  for (let i = 0; i < 3; i++) {
+    rgba[i] /= 255;
+    rgba[i] =
+      rgba[i] < 0.03928
+        ? rgba[i] / 12.92
+        : Math.pow((rgba[i] + 0.055) / 1.055, 2.4);
+  }
+  return 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];
+}
+
+/**
+ * Get RGBA or a range of RGBAs for the background pixels under the text. If luminance is
+ * uniform, only return one value of RGBA, otherwise return values that correspond to the
+ * min and max luminances.
+ * @param  {ImageData} dataTextBuf
+ *         pixel data for the accessible object with text visible.
+ * @param  {ImageData} dataBackgroundBuf
+ *         pixel data for the accessible object with transparent text.
+ * @return {Object}
+ *         RGBA or a range of RGBAs with min and max values.
+ */
+function getBgRGBA(dataTextBuf, dataBackgroundBuf) {
+  let min = [0, 0, 0, 1];
+  let max = [255, 255, 255, 1];
+  let minLuminance = 1;
+  let maxLuminance = 0;
+  const luminances = {};
+  const dataText = new Uint8ClampedArray(dataTextBuf);
+  const dataBackground = new Uint8ClampedArray(dataBackgroundBuf);
+
+  let foundDistinctColor = false;
+  for (let i = 0; i < dataText.length; i = i + 4) {
+    const tR = dataText[i];
+    const bgR = dataBackground[i];
+    const tG = dataText[i + 1];
+    const bgG = dataBackground[i + 1];
+    const tB = dataText[i + 2];
+    const bgB = dataBackground[i + 2];
+
+    // Ignore pixels that are the same where pixels that are different between the two
+    // images are assumed to belong to the text within the node.
+    if (tR === bgR && tG === bgG && tB === bgB) {
+      continue;
+    }
+
+    foundDistinctColor = true;
+
+    const bgColor = `rgb(${bgR}, ${bgG}, ${bgB})`;
+    let luminance = luminances[bgColor];
+
+    if (!luminance) {
+      // Calculate luminance for the RGB value and store it to only measure once.
+      luminance = calculateLuminance([bgR, bgG, bgB]);
+      luminances[bgColor] = luminance;
+    }
+
+    if (minLuminance >= luminance) {
+      minLuminance = luminance;
+      min = [bgR, bgG, bgB, 1];
+    }
+
+    if (maxLuminance <= luminance) {
+      maxLuminance = luminance;
+      max = [bgR, bgG, bgB, 1];
+    }
+  }
+
+  if (!foundDistinctColor) {
+    return null;
+  }
+
+  return minLuminance === maxLuminance ? { value: max } : { min, max };
+}