summaryrefslogtreecommitdiffstats
path: root/devtools/client/accessibility/test/node/components/__snapshots__
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/accessibility/test/node/components/__snapshots__')
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap7
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap3
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap39
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap7
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap13
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap13
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap3
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap15
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap5
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap11
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap9
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap7
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap9
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap9
-rw-r--r--devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap13
15 files changed, 163 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>"`;