Adding upstream version 124.0.1.upstream/124.0.1

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

30 files changed, 1806 insertions, 0 deletions

diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap
new file mode 100644
index 0000000000..eea9c7ece4
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccessibilityPrefs component: prefs checked 1`] = `"<button class=\\"devtools-button badge toolbar-menu-button prefs\\" title=\\"Configure preferences\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-prefs-menu\\"></button>"`;
+
+exports[`AccessibilityPrefs component: prefs not set by default 1`] = `"<button class=\\"devtools-button badge toolbar-menu-button prefs\\" title=\\"Configure preferences\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-prefs-menu\\"></button>"`;
+
+exports[`AccessibilityPrefs component: toggle pref 1`] = `"<button class=\\"devtools-button badge toolbar-menu-button prefs\\" title=\\"Configure preferences\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-prefs-menu\\"></button>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap
new file mode 100644
index 0000000000..e35558e016
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccessibilityRowValue component: basic render 1`] = `"<span role=\\"presentation\\"><span class=\\"objectBox objectBox-undefined\\">undefined</span></span>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap
new file mode 100644
index 0000000000..8d54471f0b
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccessibilityTreeFilter component: audit all filter filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: audit all filter not filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: audit filter not filtered 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: audit filters filtered 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: audit other filter filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Contrast</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: audit other filter not filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 2`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 3`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 4`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 5`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Keyboard, Text Labels</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 6`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Keyboard, Text Labels</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 7`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Keyboard, Text Labels</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 8`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 9`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 10`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 11`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: render filters after state changes 12`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Text Labels</button></div>"`;
+
+exports[`AccessibilityTreeFilter component: toggle filter 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap
new file mode 100644
index 0000000000..b510bd22d3
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AuditController component: accessible with checks 1`] = `"<span class=\\"child\\" checks=\\"[object Object]\\"></span>"`;
+
+exports[`AuditController component: accessible without checks 1`] = `"<span></span>"`;
+
+exports[`AuditController component: dead accessible actor 1`] = `"<span></span>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap
new file mode 100644
index 0000000000..32564ff6d7
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AuditController component: audit filter filtered contrast checks fail 1`] = `"<span></span>"`;
+
+exports[`AuditController component: audit filter filtered contrast checks fail range 1`] = `"<span></span>"`;
+
+exports[`AuditController component: audit filter filtered contrast checks success 1`] = `""`;
+
+exports[`AuditController component: audit filter filtered no checks 1`] = `""`;
+
+exports[`AuditController component: audit filter filtered unknown checks 1`] = `""`;
+
+exports[`AuditController component: audit filter not filtered 1`] = `"<span></span>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap
new file mode 100644
index 0000000000..a59f03ae0e
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AuditProgressOverlay component: render auditing finishing up 1`] = `"<span id=\\"audit-progress-container\\" role=\\"progressbar\\"></span>"`;
+
+exports[`AuditProgressOverlay component: render auditing initializing 1`] = `"<span id=\\"audit-progress-container\\" role=\\"progressbar\\"></span>"`;
+
+exports[`AuditProgressOverlay component: render auditing progress 1`] = `"<span id=\\"audit-progress-container\\"><progress max=\\"100\\" value=\\"0\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`;
+
+exports[`AuditProgressOverlay component: render auditing progress 2`] = `"<span id=\\"audit-progress-container\\"><progress max=\\"100\\" value=\\"50\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`;
+
+exports[`AuditProgressOverlay component: render auditing progress 3`] = `"<span id=\\"audit-progress-container\\"><progress max=\\"100\\" value=\\"75\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`;
+
+exports[`AuditProgressOverlay component: render not auditing 1`] = `""`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap
new file mode 100644
index 0000000000..324c72105b
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge component: basic render 1`] = `"<span class=\\"audit-badge badge\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"Contrast\\">Contrast</span>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap
new file mode 100644
index 0000000000..5065d172d0
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badges component: contrast ratio fail range render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"Accessibility checks\\"><span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"contrast warning\\">contrast</span></span>"`;
+
+exports[`Badges component: contrast ratio fail render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"Accessibility checks\\"><span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"contrast warning\\">contrast</span></span>"`;
+
+exports[`Badges component: contrast ratio success render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"Accessibility checks\\"></span>"`;
+
+exports[`Badges component: empty checks render 1`] = `""`;
+
+exports[`Badges component: no props render 1`] = `""`;
+
+exports[`Badges component: null checks render 1`] = `""`;
+
+exports[`Badges component: unsupported checks render 1`] = `""`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap
new file mode 100644
index 0000000000..06d9cb60c5
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Check component: basic render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`Check component: basic render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap
new file mode 100644
index 0000000000..f24c7a92ab
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContrastBadge component: error render 1`] = `null`;
+
+exports[`ContrastBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"contrast warning\\">contrast</span>"`;
+
+exports[`ContrastBadge component: success large text render 1`] = `null`;
+
+exports[`ContrastBadge component: success range render 1`] = `null`;
+
+exports[`ContrastBadge component: success render 1`] = `null`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap
new file mode 100644
index 0000000000..d7e8c1ebdb
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisplayTabbingOrder component: default render 1`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`;
+
+exports[`DisplayTabbingOrder component: displaying tabbing order render/update 1`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`;
+
+exports[`DisplayTabbingOrder component: displaying tabbing order render/update 2`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`;
+
+exports[`DisplayTabbingOrder component: toggle tabbing order overlay 1`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap
new file mode 100644
index 0000000000..f1d9bc5c76
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KeyboardBadge component: error render 1`] = `null`;
+
+exports[`KeyboardBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for keyboard accessibility.\\" aria-label=\\"keyboard\\">keyboard</span>"`;
+
+exports[`KeyboardBadge component: warning render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"WARNING\\" title=\\"Does not meet WCAG standards for keyboard accessibility.\\" aria-label=\\"keyboard\\">keyboard</span>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap
new file mode 100644
index 0000000000..60b66cc6dc
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KeyboardCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`KeyboardCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`KeyboardCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`KeyboardCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap
new file mode 100644
index 0000000000..4f43a73a62
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextLabelBadge component: best practices render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"BEST_PRACTICES\\" title=\\"Does not meet WCAG standards for text alternative.\\" aria-label=\\"text label\\">text label</span>"`;
+
+exports[`TextLabelBadge component: error render 1`] = `null`;
+
+exports[`TextLabelBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for text alternative.\\" aria-label=\\"text label\\">text label</span>"`;
+
+exports[`TextLabelBadge component: warning render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"WARNING\\" title=\\"Does not meet WCAG standards for text alternative.\\" aria-label=\\"text label\\">text label</span>"`;
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap
new file mode 100644
index 0000000000..7a5735f3e0
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextLabelCheck component: BEST_PRACTICES render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" data-score=\\"BEST_PRACTICES\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`TextLabelCheck component: BEST_PRACTICES render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" data-score=\\"BEST_PRACTICES\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`TextLabelCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`TextLabelCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`TextLabelCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+
+exports[`TextLabelCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
diff --git a/devtools/client/accessibility/test/node/components/accessibility-prefs.test.js b/devtools/client/accessibility/test/node/components/accessibility-prefs.test.js
new file mode 100644
index 0000000000..efd247d789
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/accessibility-prefs.test.js
@@ -0,0 +1,107 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+
+const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js");
+const ConnectedAccessibilityPrefsClass = require("resource://devtools/client/accessibility/components/AccessibilityPrefs.js");
+const AccessibilityPrefsClass =
+  ConnectedAccessibilityPrefsClass.WrappedComponent;
+const AccessibilityPrefs = createFactory(ConnectedAccessibilityPrefsClass);
+const {
+  checkMenuItem,
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const {
+  PREFS,
+} = require("resource://devtools/client/accessibility/constants.js");
+
+function checkTogglePrefCheckbox(wrapper, pref) {
+  const prefsInstance = wrapper.find(AccessibilityPrefsClass).instance();
+  prefsInstance.togglePref = jest.fn();
+  pref instanceof Node ? pref.click() : pref.simulate("click");
+  expect(prefsInstance.togglePref.mock.calls.length).toBe(1);
+}
+
+function getMenuItems(wrapper, selector) {
+  const menuButton = wrapper.find(MenuButton);
+  // Focusing on the menu button will trigger rendering of the HTMLTooltip with
+  // the menu list.
+  menuButton.childAt(0).getDOMNode().focus();
+
+  return menuButton
+    .instance()
+    .tooltip.panel.querySelectorAll(`.menuitem ${selector}`);
+}
+
+function checkPrefsState(wrapper, expected) {
+  const prefs = getMenuItems(wrapper, ".pref");
+  for (let i = 0; i < prefs.length; i++) {
+    checkMenuItem(prefs[i], {
+      checked: expected.prefs[i].active,
+      label: expected.prefs[i].text,
+    });
+  }
+  checkMenuItem(getMenuItems(wrapper, ".help")[0], {
+    role: "link",
+    label: "Documentation…",
+  });
+}
+
+describe("AccessibilityPrefs component:", () => {
+  it("prefs not set by default", () => {
+    const store = setupStore();
+    const wrapper = mount(
+      Provider({ store }, AccessibilityPrefs({ toolboxDoc: document }))
+    );
+    const accPrefs = wrapper.find(AccessibilityPrefsClass);
+    const menuButton = accPrefs.childAt(0);
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(accPrefs.children().length).toBe(1);
+    expect(menuButton.is(MenuButton)).toBe(true);
+
+    checkPrefsState(wrapper, {
+      prefs: [{ active: false, text: "Scroll into view" }],
+    });
+  });
+
+  it("prefs checked", () => {
+    const store = setupStore({
+      preloadedState: {
+        ui: {
+          [PREFS.SCROLL_INTO_VIEW]: true,
+        },
+      },
+    });
+    const wrapper = mount(
+      Provider({ store }, AccessibilityPrefs({ toolboxDoc: document }))
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    checkPrefsState(wrapper, {
+      prefs: [{ active: true, text: "Scroll into view" }],
+    });
+  });
+
+  it("toggle pref", () => {
+    const store = setupStore();
+    const wrapper = mount(
+      Provider({ store }, AccessibilityPrefs({ toolboxDoc: document }))
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    for (const pref of getMenuItems(wrapper, ".pref")) {
+      checkTogglePrefCheckbox(wrapper, pref);
+    }
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/accessibility-row-value.test.js b/devtools/client/accessibility/test/node/components/accessibility-row-value.test.js
new file mode 100644
index 0000000000..5e73f0f18f
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/accessibility-row-value.test.js
@@ -0,0 +1,56 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  mockAccessible,
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const Badges = require("resource://devtools/client/accessibility/components/Badges.js");
+const {
+  REPS: { Rep },
+} = require("resource://devtools/client/shared/components/reps/index.js");
+const AuditController = require("resource://devtools/client/accessibility/components/AuditController.js");
+
+const AccessibilityRowValueClass = require("resource://devtools/client/accessibility/components/AccessibilityRowValue.js");
+const AccessibilityRowValue = createFactory(AccessibilityRowValueClass);
+
+describe("AccessibilityRowValue component:", () => {
+  it("basic render", () => {
+    const store = setupStore({
+      preloadedState: { ui: { supports: {} } },
+    });
+    const wrapper = mount(
+      Provider(
+        { store },
+        AccessibilityRowValue({
+          member: { object: mockAccessible() },
+        })
+      )
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    const rowValue = wrapper.find(AccessibilityRowValueClass);
+    expect(rowValue.children().length).toBe(1);
+    const container = rowValue.childAt(0);
+    expect(container.type()).toBe("span");
+    expect(container.prop("role")).toBe("presentation");
+    expect(container.children().length).toBe(2);
+    expect(container.childAt(0).type()).toBe(Rep);
+    const controller = container.childAt(1);
+    expect(controller.type()).toBe(AuditController);
+    expect(controller.children().length).toBe(1);
+    expect(controller.childAt(0).type()).toBe(Badges);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/accessibility-tree-filter.test.js b/devtools/client/accessibility/test/node/components/accessibility-tree-filter.test.js
new file mode 100644
index 0000000000..af37a8318d
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/accessibility-tree-filter.test.js
@@ -0,0 +1,437 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+
+const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js");
+const ConnectedAccessibilityTreeFilterClass = require("resource://devtools/client/accessibility/components/AccessibilityTreeFilter.js");
+const AccessibilityTreeFilterClass =
+  ConnectedAccessibilityTreeFilterClass.WrappedComponent;
+const AccessibilityTreeFilter = createFactory(
+  ConnectedAccessibilityTreeFilterClass
+);
+const {
+  checkMenuItem,
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const {
+  AUDIT,
+  AUDITING,
+  FILTERS,
+  FILTER_TOGGLE,
+} = require("resource://devtools/client/accessibility/constants.js");
+
+function checkToggleFilterCheckbox(wrapper, filter) {
+  const filterInstance = wrapper.find(AccessibilityTreeFilterClass).instance();
+  filterInstance.toggleFilter = jest.fn();
+  filter.click();
+  expect(filterInstance.toggleFilter.mock.calls.length).toBe(1);
+}
+
+function getMenuItems(wrapper, selector) {
+  const menuButton = wrapper.find(MenuButton);
+  // Focusing on the menu button will trigger rendering of the HTMLTooltip with
+  // the menu list.
+  menuButton.childAt(0).getDOMNode().focus();
+
+  return menuButton
+    .instance()
+    .tooltip.panel.querySelectorAll(`.menuitem ${selector}`);
+}
+
+function checkFiltersState(wrapper, expected) {
+  const filters = getMenuItems(wrapper, ".filter");
+  for (let i = 0; i < filters.length; i++) {
+    checkMenuItem(filters[i], {
+      checked: expected.filters[i].active,
+      label: expected.filters[i].text,
+      disabled: expected.filters[i].disabled,
+    });
+  }
+}
+
+describe("AccessibilityTreeFilter component:", () => {
+  it("audit filter not filtered", () => {
+    const store = setupStore();
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    const accTreeFilter = wrapper.find(AccessibilityTreeFilterClass);
+    const toolbar = accTreeFilter.childAt(0);
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(accTreeFilter.children().length).toBe(1);
+    expect(toolbar.is("div")).toBe(true);
+    expect(toolbar.prop("role")).toBe("group");
+
+    checkFiltersState(wrapper, {
+      filters: [
+        { active: true, disabled: false, text: "None" },
+        { active: false, disabled: false, text: "All Issues" },
+        {
+          active: false,
+          disabled: false,
+          text: "Contrast",
+        },
+        {
+          active: false,
+          disabled: false,
+          text: "Keyboard",
+        },
+        {
+          active: false,
+          disabled: false,
+          text: "Text Labels",
+        },
+      ],
+    });
+  });
+
+  it("audit filters filtered", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          filters: {
+            [FILTERS.ALL]: true,
+            [FILTERS.CONTRAST]: true,
+            [FILTERS.KEYBOARD]: true,
+            [FILTERS.TEXT_LABEL]: true,
+          },
+          auditing: [],
+        },
+      },
+    });
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    checkFiltersState(wrapper, {
+      filters: [
+        { active: false, disabled: false },
+        { active: true, disabled: false },
+        { active: true, disabled: false },
+        { active: true, disabled: false },
+        { active: true, disabled: false },
+      ],
+    });
+  });
+
+  it("audit all filter not filtered auditing", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          filters: {
+            [FILTERS.ALL]: false,
+          },
+          auditing: [FILTERS.ALL],
+        },
+      },
+    });
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    checkFiltersState(wrapper, {
+      filters: [
+        { active: true, disabled: false, text: "None" },
+        { active: false, disabled: true, text: "All Issues" },
+      ],
+    });
+  });
+
+  it("audit other filter not filtered auditing", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          filters: {
+            [FILTERS.ALL]: false,
+            [FILTERS.CONTRAST]: false,
+            [FILTERS.KEYBOARD]: false,
+            [FILTERS.TEXT_LABEL]: false,
+          },
+          auditing: [FILTERS.CONTRAST],
+        },
+      },
+    });
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    checkFiltersState(wrapper, {
+      filters: [
+        { active: true, disabled: true },
+        { active: false, disabled: false },
+        { active: false, disabled: true },
+        { active: false, disabled: false },
+        { active: false, disabled: false },
+      ],
+    });
+  });
+
+  it("audit all filter filtered auditing", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          filters: {
+            [FILTERS.ALL]: true,
+          },
+          auditing: [FILTERS.ALL],
+        },
+      },
+    });
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    const filters = getMenuItems(wrapper, ".filter");
+    expect(wrapper.html()).toMatchSnapshot();
+    checkMenuItem(filters[1], { checked: true, disabled: true });
+  });
+
+  it("audit other filter filtered auditing", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          filters: {
+            [FILTERS.ALL]: false,
+            [FILTERS.CONTRAST]: true,
+            [FILTERS.KEYBOARD]: false,
+            [FILTERS.TEXT_LABEL]: false,
+          },
+          auditing: [FILTERS.CONTRAST],
+        },
+      },
+    });
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    checkFiltersState(wrapper, {
+      filters: [
+        { active: false, disabled: true },
+        { active: false, disabled: false },
+        { active: true, disabled: true },
+        { active: false, disabled: false },
+        { active: false, disabled: false },
+      ],
+    });
+  });
+
+  it("toggle filter", () => {
+    const store = setupStore();
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    const filters = getMenuItems(wrapper, ".filter");
+
+    expect(wrapper.html()).toMatchSnapshot();
+    for (const filter of filters) {
+      checkToggleFilterCheckbox(wrapper, filter);
+    }
+  });
+
+  it("render filters after state changes", () => {
+    const store = setupStore();
+    const wrapper = mount(
+      Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document }))
+    );
+    const tests = [
+      {
+        expected: {
+          filters: [
+            { active: true, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: AUDITING,
+          auditing: Object.values(FILTERS),
+        },
+        expected: {
+          filters: [
+            { active: true, disabled: true },
+            { active: false, disabled: true },
+            { active: false, disabled: true },
+            { active: false, disabled: true },
+            { active: false, disabled: true },
+          ],
+        },
+      },
+      {
+        action: {
+          type: AUDIT,
+          response: [],
+        },
+        expected: {
+          filters: [
+            { active: true, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: FILTER_TOGGLE,
+          filter: FILTERS.ALL,
+        },
+        expected: {
+          filters: [
+            { active: false, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: FILTER_TOGGLE,
+          filter: FILTERS.CONTRAST,
+        },
+        expected: {
+          filters: [
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: AUDITING,
+          auditing: [FILTERS.CONTRAST],
+        },
+        expected: {
+          filters: [
+            { active: false, disabled: true },
+            { active: false, disabled: false },
+            { active: false, disabled: true },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: AUDIT,
+          response: [],
+        },
+        expected: {
+          filters: [
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: FILTER_TOGGLE,
+          filter: FILTERS.CONTRAST,
+        },
+        expected: {
+          filters: [
+            { active: false, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+            { active: true, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: FILTER_TOGGLE,
+          filter: FILTERS.NONE,
+        },
+        expected: {
+          filters: [
+            { active: true, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: AUDITING,
+          auditing: [FILTERS.TEXT_LABEL],
+        },
+        expected: {
+          filters: [
+            { active: true, disabled: true },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: true },
+          ],
+        },
+      },
+      {
+        action: {
+          type: AUDIT,
+          response: [],
+        },
+        expected: {
+          filters: [
+            { active: true, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+          ],
+        },
+      },
+      {
+        action: {
+          type: FILTER_TOGGLE,
+          filter: FILTERS.TEXT_LABEL,
+        },
+        expected: {
+          filters: [
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: false, disabled: false },
+            { active: true, disabled: false },
+          ],
+        },
+      },
+    ];
+
+    for (const test of tests) {
+      const { action, expected } = test;
+      if (action) {
+        store.dispatch(action);
+        wrapper.update();
+      }
+
+      expect(wrapper.html()).toMatchSnapshot();
+      checkFiltersState(wrapper, expected);
+    }
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/audit-controller.test.js b/devtools/client/accessibility/test/node/components/audit-controller.test.js
new file mode 100644
index 0000000000..ad8ba3ee2b
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/audit-controller.test.js
@@ -0,0 +1,91 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  span,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const AuditController = createFactory(
+  require("resource://devtools/client/accessibility/components/AuditController.js")
+);
+const {
+  mockAccessible,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+describe("AuditController component:", () => {
+  it("dead accessible actor", () => {
+    const accessibleFront = mockAccessible();
+    const wrapper = mount(
+      AuditController(
+        {
+          accessibleFront,
+        },
+        span()
+      )
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find("span").length).toBe(1);
+    expect(wrapper.find("span").first().props()).toMatchObject({
+      checks: undefined,
+    });
+
+    const instance = wrapper.instance();
+    expect(accessibleFront.on.mock.calls.length).toBe(1);
+    expect(accessibleFront.off.mock.calls.length).toBe(1);
+    expect(accessibleFront.on.mock.calls[0]).toEqual([
+      "audited",
+      instance.onAudited,
+    ]);
+    expect(accessibleFront.off.mock.calls[0]).toEqual([
+      "audited",
+      instance.onAudited,
+    ]);
+  });
+
+  it("accessible without checks", () => {
+    const accessibleFront = mockAccessible({
+      actorID: "1",
+    });
+    const wrapper = mount(
+      AuditController(
+        {
+          accessibleFront,
+        },
+        span()
+      )
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(accessibleFront.audit.mock.calls.length).toBe(1);
+    expect(accessibleFront.on.mock.calls.length).toBe(1);
+    expect(accessibleFront.off.mock.calls.length).toBe(0);
+  });
+
+  it("accessible with checks", () => {
+    const checks = { foo: "bar" };
+    const accessibleFront = mockAccessible({
+      actorID: "1",
+      checks,
+    });
+    const wrapper = mount(
+      AuditController(
+        {
+          accessibleFront,
+        },
+        span({ className: "child" })
+      )
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.state("checks")).toMatchObject(checks);
+    expect(wrapper.find(".child").prop("checks")).toMatchObject(checks);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/audit-filter.test.js b/devtools/client/accessibility/test/node/components/audit-filter.test.js
new file mode 100644
index 0000000000..a38efa12ae
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/audit-filter.test.js
@@ -0,0 +1,153 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  span,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+
+const ConnectedAuditFilterClass = require("resource://devtools/client/accessibility/components/AuditFilter.js");
+const AuditFilterClass = ConnectedAuditFilterClass.WrappedComponent;
+const AuditFilter = createFactory(ConnectedAuditFilterClass);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+const {
+  FILTERS,
+} = require("resource://devtools/client/accessibility/constants.js");
+
+const {
+  accessibility: { SCORES },
+} = require("resource://devtools/shared/constants.js");
+
+describe("AuditController component:", () => {
+  it("audit filter not filtered", () => {
+    const store = setupStore();
+
+    const wrapper = mount(Provider({ store }, AuditFilter({}, span())));
+    expect(wrapper.html()).toMatchSnapshot();
+
+    const filter = wrapper.find(AuditFilterClass);
+    expect(filter.children().length).toBe(1);
+    expect(filter.childAt(0).is("span")).toBe(true);
+  });
+
+  it("audit filter filtered no checks", () => {
+    const store = setupStore({
+      preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } },
+    });
+
+    const wrapper = mount(Provider({ store }, AuditFilter({}, span())));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("audit filter filtered unknown checks", () => {
+    const store = setupStore({
+      preloadedState: { audit: { filters: { tbd: true } } },
+    });
+
+    const wrapper = mount(Provider({ store }, AuditFilter({}, span())));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("audit filter filtered contrast checks success", () => {
+    const store = setupStore({
+      preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } },
+    });
+
+    const wrapper = mount(
+      Provider(
+        { store },
+        AuditFilter(
+          {
+            checks: {
+              CONTRAST: {
+                value: 5.11,
+                color: [255, 0, 0, 1],
+                backgroundColor: [255, 255, 255, 1],
+                isLargeText: false,
+                score: SCORES.AA,
+              },
+            },
+          },
+          span()
+        )
+      )
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("audit filter filtered contrast checks fail", () => {
+    const store = setupStore({
+      preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } },
+    });
+
+    const CONTRAST = {
+      value: 3.1,
+      color: [255, 0, 0, 1],
+      backgroundColor: [255, 255, 255, 1],
+      isLargeText: false,
+      score: SCORES.FAIL,
+    };
+
+    const wrapper = mount(
+      Provider(
+        { store },
+        AuditFilter(
+          {
+            checks: { CONTRAST },
+          },
+          span()
+        )
+      )
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    const filter = wrapper.find(AuditFilterClass);
+    expect(filter.children().length).toBe(1);
+    expect(filter.childAt(0).is("span")).toBe(true);
+  });
+
+  it("audit filter filtered contrast checks fail range", () => {
+    const store = setupStore({
+      preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } },
+    });
+
+    const CONTRAST = {
+      min: 1.19,
+      max: 1.39,
+      color: [128, 128, 128, 1],
+      backgroundColorMin: [219, 106, 116, 1],
+      backgroundColorMax: [156, 145, 211, 1],
+      isLargeText: false,
+      score: SCORES.FAIL,
+    };
+
+    const wrapper = mount(
+      Provider(
+        { store },
+        AuditFilter(
+          {
+            checks: { CONTRAST },
+          },
+          span()
+        )
+      )
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    const filter = wrapper.find(AuditFilterClass);
+    expect(filter.children().length).toBe(1);
+    expect(filter.childAt(0).is("span")).toBe(true);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/audit-progress-overlay.test.js b/devtools/client/accessibility/test/node/components/audit-progress-overlay.test.js
new file mode 100644
index 0000000000..8de5cf3ed8
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/audit-progress-overlay.test.js
@@ -0,0 +1,148 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const {
+  accessibility: { AUDIT_TYPE },
+} = require("resource://devtools/shared/constants.js");
+const {
+  AUDIT_PROGRESS,
+} = require("resource://devtools/client/accessibility/constants.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+const ConnectedAuditProgressOverlayClass = require("resource://devtools/client/accessibility/components/AuditProgressOverlay.js");
+const AuditProgressOverlayClass =
+  ConnectedAuditProgressOverlayClass.WrappedComponent;
+const AuditProgressOverlay = createFactory(ConnectedAuditProgressOverlayClass);
+
+function testTextProgressBar(store, expectedLocalizedStringId) {
+  const wrapper = mount(
+    Provider(
+      { store },
+      LocalizationProvider({ bundles: [] }, AuditProgressOverlay())
+    )
+  );
+  expect(wrapper.html()).toMatchSnapshot();
+
+  const overlay = wrapper.find(AuditProgressOverlayClass);
+  expect(overlay.children().length).toBe(1);
+
+  const localized = overlay.childAt(0);
+  expect(localized.prop("id")).toBe(expectedLocalizedStringId);
+  expect(localized.prop("attrs")["aria-valuetext"]).toBe(true);
+
+  const overlayText = localized.childAt(0);
+  expect(overlayText.type()).toBe("span");
+  expect(overlayText.prop("id")).toBe("audit-progress-container");
+  expect(overlayText.prop("role")).toBe("progressbar");
+}
+
+function testProgress(wrapper, percentage) {
+  const progress = wrapper.find("progress");
+  expect(progress.prop("max")).toBe(100);
+  expect(progress.prop("value")).toBe(percentage);
+  expect(progress.hasClass("audit-progress-progressbar")).toBe(true);
+  expect(progress.prop("aria-labelledby")).toBe("audit-progress-container");
+}
+
+describe("AuditProgressOverlay component:", () => {
+  it("render not auditing", () => {
+    const store = setupStore();
+    const wrapper = mount(
+      Provider(
+        { store },
+        LocalizationProvider({ bundles: [] }, AuditProgressOverlay())
+      )
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("render auditing initializing", () => {
+    const store = setupStore({
+      preloadedState: { audit: { auditing: [AUDIT_TYPE.CONTRAST] } },
+    });
+
+    testTextProgressBar(store, "accessibility-progress-initializing");
+  });
+
+  it("render auditing progress", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          auditing: [AUDIT_TYPE.CONTRAST],
+          progress: { total: 5, percentage: 0 },
+        },
+      },
+    });
+
+    const wrapper = mount(
+      Provider(
+        { store },
+        LocalizationProvider({ bundles: [] }, AuditProgressOverlay())
+      )
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+
+    const overlay = wrapper.find(AuditProgressOverlayClass);
+    expect(overlay.children().length).toBe(1);
+
+    const overlayContainer = overlay.childAt(0);
+    expect(overlayContainer.type()).toBe("span");
+    expect(overlayContainer.prop("id")).toBe("audit-progress-container");
+    expect(overlayContainer.children().length).toBe(2);
+
+    const localized = overlayContainer.childAt(0);
+    expect(localized.prop("id")).toBe("accessibility-progress-progressbar");
+    expect(localized.prop("$nodeCount")).toBe(5);
+    expect(overlayContainer.childAt(1).type()).toBe("progress");
+
+    testProgress(wrapper, 0);
+
+    store.dispatch({
+      type: AUDIT_PROGRESS,
+      progress: { total: 5, percentage: 50 },
+    });
+    wrapper.update();
+
+    expect(wrapper.html()).toMatchSnapshot();
+    testProgress(wrapper, 50);
+
+    store.dispatch({
+      type: AUDIT_PROGRESS,
+      progress: { total: 5, percentage: 75 },
+    });
+    wrapper.update();
+
+    expect(wrapper.html()).toMatchSnapshot();
+    testProgress(wrapper, 75);
+  });
+
+  it("render auditing finishing up", () => {
+    const store = setupStore({
+      preloadedState: {
+        audit: {
+          auditing: [AUDIT_TYPE.CONTRAST],
+          progress: { total: 5, percentage: 100 },
+        },
+      },
+    });
+
+    testTextProgressBar(store, "accessibility-progress-finishing");
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/badge.test.js b/devtools/client/accessibility/test/node/components/badge.test.js
new file mode 100644
index 0000000000..4285d1adb5
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/badge.test.js
@@ -0,0 +1,42 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const BadgeClass = require("resource://devtools/client/accessibility/components/Badge.js");
+const Badge = createFactory(BadgeClass);
+
+describe("Badge component:", () => {
+  const label = "Contrast";
+  const tooltip = "Does not meet WCAG standards for accessible text.";
+  const props = { label, tooltip };
+
+  it("basic render", () => {
+    const store = setupStore();
+    const wrapper = mount(Provider({ store }, Badge(props)));
+    expect(wrapper.html()).toMatchSnapshot();
+
+    const badge = wrapper.find(BadgeClass);
+    expect(badge.children().length).toBe(1);
+    expect(
+      badge.find(`span[aria-label="${label}"][title="${tooltip}"]`)
+    ).toHaveLength(1);
+
+    const badgeText = badge.childAt(0);
+    expect(badgeText.hasClass("audit-badge")).toBe(true);
+    expect(badgeText.hasClass("badge")).toBe(true);
+    expect(badgeText.text()).toBe(label);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/badges.test.js b/devtools/client/accessibility/test/node/components/badges.test.js
new file mode 100644
index 0000000000..c98e4602ac
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/badges.test.js
@@ -0,0 +1,114 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const Badge = require("resource://devtools/client/accessibility/components/Badge.js");
+const Badges = createFactory(
+  require("resource://devtools/client/accessibility/components/Badges.js")
+);
+const ContrastBadge = require("resource://devtools/client/accessibility/components/ContrastBadge.js");
+
+const {
+  accessibility: { SCORES },
+} = require("resource://devtools/shared/constants.js");
+
+describe("Badges component:", () => {
+  const store = setupStore();
+
+  it("no props render", () => {
+    const wrapper = mount(Provider({ store }, Badges()));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("null checks render", () => {
+    const wrapper = mount(Provider({ store }, Badges({ checks: null })));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("empty checks render", () => {
+    const wrapper = mount(Provider({ store }, Badges({ checks: {} })));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("unsupported checks render", () => {
+    const wrapper = mount(Provider({ store }, Badges({ checks: { tbd: {} } })));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("contrast ratio success render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        Badges({
+          checks: {
+            CONTRAST: {
+              value: 5.11,
+              color: [255, 0, 0, 1],
+              backgroundColor: [255, 255, 255, 1],
+              isLargeText: false,
+              score: SCORES.AA,
+            },
+          },
+        })
+      )
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("contrast ratio fail render", () => {
+    const CONTRAST = {
+      value: 3.1,
+      color: [255, 0, 0, 1],
+      backgroundColor: [255, 255, 255, 1],
+      isLargeText: false,
+      score: SCORES.FAIL,
+    };
+    const wrapper = mount(
+      Provider({ store }, Badges({ checks: { CONTRAST } }))
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find(Badge).length).toBe(1);
+    expect(wrapper.find(ContrastBadge).length).toBe(1);
+    expect(wrapper.find(ContrastBadge).first().props()).toMatchObject(CONTRAST);
+  });
+
+  it("contrast ratio fail range render", () => {
+    const CONTRAST = {
+      min: 1.19,
+      max: 1.39,
+      color: [128, 128, 128, 1],
+      backgroundColorMin: [219, 106, 116, 1],
+      backgroundColorMax: [156, 145, 211, 1],
+      isLargeText: false,
+      score: SCORES.FAIL,
+    };
+    const wrapper = mount(
+      Provider({ store }, Badges({ checks: { CONTRAST } }))
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find(Badge).length).toBe(1);
+    expect(wrapper.find(ContrastBadge).length).toBe(1);
+    expect(wrapper.find(ContrastBadge).first().props()).toMatchObject(CONTRAST);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/check.test.js b/devtools/client/accessibility/test/node/components/check.test.js
new file mode 100644
index 0000000000..ef024ea0ab
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/check.test.js
@@ -0,0 +1,50 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const CheckClass = require("resource://devtools/client/accessibility/components/Check.js");
+const Check = createFactory(CheckClass);
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+const {
+  accessibility: {
+    AUDIT_TYPE: { TEXT_LABEL },
+    ISSUE_TYPE: {
+      [TEXT_LABEL]: { AREA_NO_NAME_FROM_ALT },
+    },
+    SCORES: { FAIL },
+  },
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  testCheck,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+describe("Check component:", () => {
+  const props = {
+    id: "accessibility-text-label-header",
+    issue: AREA_NO_NAME_FROM_ALT,
+    score: FAIL,
+    getAnnotation: jest.fn(),
+  };
+
+  it("basic render", () => {
+    const wrapper = mount(LocalizationProvider({ bundles: [] }, Check(props)));
+    expect(wrapper.html()).toMatchSnapshot();
+
+    testCheck(wrapper.childAt(0), {
+      issue: AREA_NO_NAME_FROM_ALT,
+      score: FAIL,
+    });
+    expect(props.getAnnotation.mock.calls.length).toBe(1);
+    expect(props.getAnnotation.mock.calls[0]).toEqual([AREA_NO_NAME_FROM_ALT]);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/contrast-badge.test.js b/devtools/client/accessibility/test/node/components/contrast-badge.test.js
new file mode 100644
index 0000000000..c96134b834
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/contrast-badge.test.js
@@ -0,0 +1,96 @@
+/* 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 { shallow, mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const Badge = require("resource://devtools/client/accessibility/components/Badge.js");
+const ContrastBadgeClass = require("resource://devtools/client/accessibility/components/ContrastBadge.js");
+const ContrastBadge = createFactory(ContrastBadgeClass);
+
+const {
+  accessibility: { SCORES },
+} = require("resource://devtools/shared/constants.js");
+
+describe("ContrastBadge component:", () => {
+  const store = setupStore();
+
+  it("error render", () => {
+    const wrapper = shallow(ContrastBadge({ error: true }));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("success render", () => {
+    const wrapper = shallow(
+      ContrastBadge({
+        value: 5.11,
+        isLargeText: false,
+        score: SCORES.AA,
+      })
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("success range render", () => {
+    const wrapper = shallow(
+      ContrastBadge({
+        min: 5.11,
+        max: 6.25,
+        isLargeText: false,
+        score: SCORES.AA,
+      })
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("success large text render", () => {
+    const wrapper = shallow(
+      ContrastBadge({
+        value: 3.77,
+        isLargeText: true,
+        score: SCORES.AA,
+      })
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("fail render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        ContrastBadge({
+          value: 3.77,
+          isLargeText: false,
+          score: SCORES.FAIL,
+        })
+      )
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.children().length).toBe(1);
+    const contrastBadge = wrapper.find(ContrastBadgeClass);
+    const badge = contrastBadge.childAt(0);
+    expect(badge.type()).toBe(Badge);
+    expect(badge.props()).toMatchObject({
+      label: "contrast",
+      tooltip: "Does not meet WCAG standards for accessible text.",
+    });
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js b/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js
new file mode 100644
index 0000000000..65952a10e5
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js
@@ -0,0 +1,91 @@
+/* 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 { mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+const {
+  UPDATE_DISPLAY_TABBING_ORDER,
+} = require("resource://devtools/client/accessibility/constants.js");
+
+const ConnectedDisplayTabbingOrderClass = require("resource://devtools/client/accessibility/components/DisplayTabbingOrder.js");
+const DisplayTabbingOrderClass =
+  ConnectedDisplayTabbingOrderClass.WrappedComponent;
+const DisplayTabbingOrder = createFactory(ConnectedDisplayTabbingOrderClass);
+
+function testCheckbox(wrapper, expected) {
+  expect(wrapper.html()).toMatchSnapshot();
+  const displayTabbingOrder = wrapper.find(DisplayTabbingOrderClass);
+  expect(displayTabbingOrder.children().length).toBe(1);
+
+  // Label checks
+  const label = displayTabbingOrder.childAt(0);
+  expect(label.hasClass("accessibility-tabbing-order")).toBe(true);
+  expect(label.hasClass("devtools-checkbox-label")).toBe(true);
+  expect(label.prop("title")).toBe(
+    "Show tabbing order of elements and their tabbing index."
+  );
+  expect(label.text()).toBe("Show Tabbing Order");
+  expect(label.children().length).toBe(1);
+
+  // Checkbox checks
+  const checkbox = label.childAt(0);
+  expect(checkbox.prop("checked")).toBe(expected.checked);
+  expect(checkbox.prop("disabled")).toBe(!!expected.disabled);
+}
+
+describe("DisplayTabbingOrder component:", () => {
+  it("default render", () => {
+    const store = setupStore();
+    const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
+
+    testCheckbox(wrapper, { checked: false });
+  });
+
+  it("toggle tabbing order overlay", () => {
+    const store = setupStore();
+    const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
+
+    expect(wrapper.html()).toMatchSnapshot();
+    const displayTabbingOrderInstance = wrapper
+      .find(DisplayTabbingOrderClass)
+      .instance();
+    displayTabbingOrderInstance.onChange = jest.fn();
+    displayTabbingOrderInstance.forceUpdate();
+    const checkbox = wrapper.find("input");
+    checkbox.simulate("change");
+    expect(displayTabbingOrderInstance.onChange.mock.calls.length).toBe(1);
+  });
+
+  it("displaying tabbing order render/update", () => {
+    const store = setupStore({
+      preloadedState: {
+        ui: {
+          tabbingOrderDisplayed: true,
+        },
+      },
+    });
+    const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
+
+    testCheckbox(wrapper, { checked: true });
+
+    store.dispatch({
+      type: UPDATE_DISPLAY_TABBING_ORDER,
+      tabbingOrderDisplayed: false,
+    });
+    wrapper.update();
+
+    testCheckbox(wrapper, { checked: false });
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/keyboard-badge.test.js b/devtools/client/accessibility/test/node/components/keyboard-badge.test.js
new file mode 100644
index 0000000000..ae462dd29e
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/keyboard-badge.test.js
@@ -0,0 +1,73 @@
+/* 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 { shallow, mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const Badge = require("resource://devtools/client/accessibility/components/Badge.js");
+const KeyboardBadgeClass = require("resource://devtools/client/accessibility/components/KeyboardBadge.js");
+const KeyboardBadge = createFactory(KeyboardBadgeClass);
+const {
+  accessibility: { SCORES },
+} = require("resource://devtools/shared/constants.js");
+
+function testBadge(wrapper) {
+  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.children().length).toBe(1);
+  const keyboardBadge = wrapper.find(KeyboardBadgeClass);
+  const badge = keyboardBadge.childAt(0);
+  expect(badge.type()).toBe(Badge);
+  expect(badge.props()).toMatchObject({
+    label: "keyboard",
+    tooltip: "Does not meet WCAG standards for keyboard accessibility.",
+  });
+}
+
+describe("KeyboardBadge component:", () => {
+  const store = setupStore();
+
+  it("error render", () => {
+    const wrapper = shallow(KeyboardBadge({ error: true }));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("fail render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        KeyboardBadge({
+          score: SCORES.FAIL,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+
+  it("warning render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        KeyboardBadge({
+          score: SCORES.WARNING,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/keyboard-check.test.js b/devtools/client/accessibility/test/node/components/keyboard-check.test.js
new file mode 100644
index 0000000000..d0f16d0bb8
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/keyboard-check.test.js
@@ -0,0 +1,47 @@
+/* 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 { mount } = require("enzyme");
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const KeyboardCheckClass = require("resource://devtools/client/accessibility/components/KeyboardCheck.js");
+const KeyboardCheck = createFactory(KeyboardCheckClass);
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+const {
+  testCustomCheck,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const {
+  accessibility: {
+    AUDIT_TYPE: { KEYBOARD },
+    ISSUE_TYPE: {
+      [KEYBOARD]: { INTERACTIVE_NO_ACTION, FOCUSABLE_NO_SEMANTICS },
+    },
+    SCORES: { FAIL, WARNING },
+  },
+} = require("resource://devtools/shared/constants.js");
+
+describe("KeyboardCheck component:", () => {
+  const testProps = [
+    { score: FAIL, issue: INTERACTIVE_NO_ACTION },
+    { score: WARNING, issue: FOCUSABLE_NO_SEMANTICS },
+  ];
+
+  for (const props of testProps) {
+    it(`${props.score} render`, () => {
+      const wrapper = mount(
+        LocalizationProvider({ bundles: [] }, KeyboardCheck(props))
+      );
+
+      const keyboardCheck = wrapper.find(KeyboardCheckClass);
+      testCustomCheck(keyboardCheck, props);
+    });
+  }
+});
diff --git a/devtools/client/accessibility/test/node/components/text-label-badge.test.js b/devtools/client/accessibility/test/node/components/text-label-badge.test.js
new file mode 100644
index 0000000000..39510c0e92
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/text-label-badge.test.js
@@ -0,0 +1,86 @@
+/* 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 { shallow, mount } = require("enzyme");
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const {
+  setupStore,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const Badge = require("resource://devtools/client/accessibility/components/Badge.js");
+const TextLabelBadgeClass = require("resource://devtools/client/accessibility/components/TextLabelBadge.js");
+const TextLabelBadge = createFactory(TextLabelBadgeClass);
+const {
+  accessibility: { SCORES },
+} = require("resource://devtools/shared/constants.js");
+
+function testBadge(wrapper) {
+  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.children().length).toBe(1);
+  const textLabelBadge = wrapper.find(TextLabelBadgeClass);
+  const badge = textLabelBadge.childAt(0);
+  expect(badge.type()).toBe(Badge);
+  expect(badge.props()).toMatchObject({
+    label: "text label",
+    tooltip: "Does not meet WCAG standards for text alternative.",
+  });
+}
+
+describe("TextLabelBadge component:", () => {
+  const store = setupStore();
+
+  it("error render", () => {
+    const wrapper = shallow(TextLabelBadge({ error: true }));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("fail render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        TextLabelBadge({
+          score: SCORES.FAIL,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+
+  it("warning render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        TextLabelBadge({
+          score: SCORES.WARNING,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+
+  it("best practices render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        TextLabelBadge({
+          score: SCORES.BEST_PRACTICES,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+});
diff --git a/devtools/client/accessibility/test/node/components/text-label-check.test.js b/devtools/client/accessibility/test/node/components/text-label-check.test.js
new file mode 100644
index 0000000000..38a56ba3ce
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/text-label-check.test.js
@@ -0,0 +1,52 @@
+/* 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 { mount } = require("enzyme");
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const TextLabelCheckClass = require("resource://devtools/client/accessibility/components/TextLabelCheck.js");
+const TextLabelCheck = createFactory(TextLabelCheckClass);
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+const {
+  testCustomCheck,
+} = require("resource://devtools/client/accessibility/test/node/helpers.js");
+
+const {
+  accessibility: {
+    AUDIT_TYPE: { TEXT_LABEL },
+    ISSUE_TYPE: {
+      [TEXT_LABEL]: {
+        AREA_NO_NAME_FROM_ALT,
+        DIALOG_NO_NAME,
+        FORM_NO_VISIBLE_NAME,
+      },
+    },
+    SCORES: { BEST_PRACTICES, FAIL, WARNING },
+  },
+} = require("resource://devtools/shared/constants.js");
+
+describe("TextLabelCheck component:", () => {
+  const testProps = [
+    { issue: AREA_NO_NAME_FROM_ALT, score: FAIL },
+    { issue: FORM_NO_VISIBLE_NAME, score: WARNING },
+    { issue: DIALOG_NO_NAME, score: BEST_PRACTICES },
+  ];
+
+  for (const props of testProps) {
+    it(`${props.score} render`, () => {
+      const wrapper = mount(
+        LocalizationProvider({ bundles: [] }, TextLabelCheck(props))
+      );
+
+      const textLabelCheck = wrapper.find(TextLabelCheckClass);
+      testCustomCheck(textLabelCheck, props);
+    });
+  }
+});