From 7c2e56b7510ba212ee0300d0916dca405429844c Mon Sep 17 00:00:00 2001
From: Vinh <vinh@vinh.tech>
Date: Sat, 23 Nov 2019 02:10:51 +0700
Subject: [PATCH] [CORL-719] A11y runtime checks using react-axe (#2725)

* feature: use react-axe and fix some a11y issues in stream

* fix: adapt snapshots

* chore: fix axe warnings in auth and account bundle

* chore: improve accessibility in install bundle

* chore: add some comments
---
 package-lock.json                             |   41 +
 package.json                                  |    2 +
 src/core/client/account/index.html            |    2 +-
 src/core/client/account/index.tsx             |    3 +
 src/core/client/account/routes/NotFound.tsx   |    6 +-
 .../download/Download/DownloadDescription.tsx |    2 +-
 .../download/Download/DownloadRoute.tsx       |   12 +-
 .../routes/email/Confirm/ConfirmRoute.tsx     |   16 +-
 .../Unsubscribe/UnsubscribeRoute.tsx          |   16 +-
 .../routes/password/Reset/ResetRoute.tsx      |   16 +-
 .../__snapshots__/confirmEmail.spec.tsx.snap  |    8 +-
 .../__snapshots__/resetPassword.spec.tsx.snap |    8 +-
 .../unsubscribeNotifications.spec.tsx.snap    |    8 +-
 src/core/client/admin/index.html              |    2 +-
 src/core/client/admin/index.tsx               |    3 +
 src/core/client/auth-callback/index.html      |    2 +-
 .../client/auth/components/Header/Bar.tsx     |    2 +-
 .../client/auth/components/Header/SubBar.tsx  |    2 +-
 .../Header/__snapshots__/Bar.spec.tsx.snap    |    4 +-
 .../Header/__snapshots__/SubBar.spec.tsx.snap |    4 +-
 src/core/client/auth/components/Main.tsx      |    4 +-
 .../__snapshots__/Main.spec.tsx.snap          |    4 +-
 src/core/client/auth/hooks/useResizePopup.ts  |   48 +-
 src/core/client/auth/index.html               |    2 +-
 src/core/client/auth/index.tsx                |    3 +
 .../addEmailAddress.spec.tsx.snap             |    8 +-
 .../createPassword.spec.tsx.snap              |    8 +-
 .../createUsername.spec.tsx.snap              |    8 +-
 .../forgotPassword.spec.tsx.snap              |   12 +-
 .../test/__snapshots__/signIn.spec.tsx.snap   |   32 +-
 .../test/__snapshots__/signUp.spec.tsx.snap   |   64 +-
 src/core/client/count/index.html              |    2 +-
 src/core/client/embed/index.html              |    2 +-
 .../framework/helpers/potentiallyInjectAxe.ts |   62 +
 src/core/client/install/App/App.tsx           |    4 +-
 src/core/client/install/App/MainBar.tsx       |    4 +-
 .../App/__snapshots__/App.spec.tsx.snap       |    4 +-
 .../install/App/steps/AddOrganizationStep.tsx |   15 +-
 .../App/steps/CreateYourAccountStep.tsx       |   20 +-
 .../App/steps/PermittedDomainsStep.tsx        |    5 +-
 .../install/App/steps/SelectLanguageStep.tsx  |   11 +-
 src/core/client/install/index.html            |    2 +-
 src/core/client/install/index.tsx             |    3 +
 src/core/client/stream/App/App.tsx            |   60 +-
 .../App/__snapshots__/App.spec.tsx.snap       |   59 +-
 src/core/client/stream/index.html             |    2 +-
 src/core/client/stream/index.tsx              |   10 +-
 .../Comments/Comment/CommentContainer.tsx     |    4 +-
 .../ModerationDropdown/CaretContainer.tsx     |    3 +-
 .../PermalinkButton/PermalinkPopover.tsx      |   17 +-
 .../Username/UsernameWithPopoverContainer.tsx |   29 +-
 .../CommentContainer.spec.tsx.snap            |  165 ++-
 .../FeaturedCommentContainer.tsx              |    4 +-
 .../PostCommentForm/PostCommentFormFake.tsx   |    2 +-
 .../PostCommentFormFake.spec.tsx.snap         |    4 +-
 .../MessageBoxConfig/MessageBoxConfig.tsx     |   20 +-
 .../Profile/CommentHistory/CommentHistory.tsx |    6 +-
 .../CommentHistory.spec.tsx.snap              |    3 +
 .../DeleteAccount/Pages/ConfirmPage.tsx       |   27 +-
 .../NotificationSettingsContainer.tsx         |    6 +-
 .../renderFeaturedStream.spec.tsx.snap        |  861 ++++++------
 .../__snapshots__/permalinkView.spec.tsx.snap |   40 +-
 ...permalinkViewLoadMoreParents.spec.tsx.snap |   32 +-
 .../__snapshots__/editComment.spec.tsx.snap   |   32 +-
 .../__snapshots__/loadMore.spec.tsx.snap      |   16 +-
 .../__snapshots__/postComment.spec.tsx.snap   |    8 +-
 .../postLocalReply.spec.tsx.snap              |   64 +-
 .../__snapshots__/postReply.spec.tsx.snap     |   16 +-
 .../renderCommunityGuidelines.spec.tsx.snap   |   20 +-
 .../renderMessageBox.spec.tsx.snap            |    4 +-
 .../__snapshots__/renderReplies.spec.tsx.snap |   32 +-
 .../__snapshots__/renderStream.spec.tsx.snap  | 1189 +++++++++--------
 .../showAllReplies.spec.tsx.snap              |    8 +-
 .../showConversation.spec.tsx.snap            |    8 +-
 .../__snapshots__/sortStream.spec.tsx.snap    |   16 +-
 .../__snapshots__/account.spec.tsx.snap       |  793 +++++------
 .../__snapshots__/myComments.spec.tsx.snap    |    1 +
 .../ui/components/Tooltip/TooltipButton.tsx   |    3 +
 src/locales/en-US/stream.ftl                  |    9 +
 79 files changed, 2211 insertions(+), 1848 deletions(-)
 create mode 100644 src/core/client/framework/helpers/potentiallyInjectAxe.ts

diff --git a/package-lock.json b/package-lock.json
index a912a81e9..6d1a9a28c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4193,6 +4193,25 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-axe": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/react-axe/-/react-axe-3.1.0.tgz",
+      "integrity": "sha512-zBQGSlWVwiMiKmDsFS5+2uO5tt1M2fdD3mTkOAA4EwV2uWrzi02d5NMhLZtxpyaCWtwz5xNLO4INotoWZUAg0A==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "axe-core": "3.2.2"
+      },
+      "dependencies": {
+        "axe-core": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.2.2.tgz",
+          "integrity": "sha512-gAy4kMSPpuRJV3mwictJqlg5LhE84Vw2CydKdC4tvrLhR6+G3KW51zbL/vYujcLA2jvWOq3HMHrVeNuw+mrLVA==",
+          "dev": true
+        }
+      }
+    },
     "@types/react-copy-to-clipboard": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.6.tgz",
@@ -6197,6 +6216,12 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
       "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w=="
     },
+    "axe-core": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.4.0.tgz",
+      "integrity": "sha512-5C0OdgxPv/DrQguO6Taj5F1dY5OlkWg4SVmZIVABFYKWlnAc5WTLPzG+xJSgIwf2fmY+NiNGiZXhXx2qT0u/9Q==",
+      "dev": true
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -28379,6 +28404,16 @@
         }
       }
     },
+    "react-axe": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-axe/-/react-axe-3.3.0.tgz",
+      "integrity": "sha512-JoxU2jcTla37U6MtqIoYnGaRQcAHkNm9JxTjx2wcEgFm8Zd2A2vo9eboxcmpLjklXDKJwJNbyDo2Jcbbme6xwA==",
+      "dev": true,
+      "requires": {
+        "axe-core": "^3.3.2",
+        "requestidlecallback": "^0.3.0"
+      }
+    },
     "react-codemirror2": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-5.1.0.tgz",
@@ -30678,6 +30713,12 @@
         "tough-cookie": "^2.3.3"
       }
     },
+    "requestidlecallback": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",
+      "integrity": "sha1-b7dOBzP5DfP6pIOPn2oqX5t0KsU=",
+      "dev": true
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/package.json b/package.json
index e6c538942..9b2937d0d 100644
--- a/package.json
+++ b/package.json
@@ -208,6 +208,7 @@
     "@types/permit": "^0.2.1",
     "@types/prop-types": "^15.5.8",
     "@types/react": "^16.8.15",
+    "@types/react-axe": "^3.1.0",
     "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dom": "^16.8.4",
     "@types/react-helmet": "^5.0.10",
@@ -320,6 +321,7 @@
     "pym.js": "^1.3.2",
     "raw-loader": "^0.5.1",
     "react": "^16.9.0-alpha.0",
+    "react-axe": "^3.3.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^9.0.0",
     "react-dom": "^16.9.0-alpha.0",
diff --git a/src/core/client/account/index.html b/src/core/client/account/index.html
index 9d6ffd78f..6f23b8f89 100644
--- a/src/core/client/account/index.html
+++ b/src/core/client/account/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Account</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
   </head>
 
   <body>
diff --git a/src/core/client/account/index.tsx b/src/core/client/account/index.tsx
index b8198709b..a2c2cae04 100644
--- a/src/core/client/account/index.tsx
+++ b/src/core/client/account/index.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import potentiallyInjectAxe from "coral-framework/helpers/potentiallyInjectAxe";
 import { createManaged } from "coral-framework/lib/bootstrap";
 
 import App from "./App";
@@ -11,6 +12,8 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";
 
 async function main() {
+  // Potentially inject react-axe for runtime a11y checks.
+  await potentiallyInjectAxe();
   const ManagedCoralContextProvider = await createManaged({
     initLocalState,
     localesData,
diff --git a/src/core/client/account/routes/NotFound.tsx b/src/core/client/account/routes/NotFound.tsx
index 15c6aa43f..e6c76557f 100644
--- a/src/core/client/account/routes/NotFound.tsx
+++ b/src/core/client/account/routes/NotFound.tsx
@@ -3,8 +3,10 @@ import React, { FunctionComponent } from "react";
 import { HorizontalGutter, Typography } from "coral-ui/components";
 
 const NotFound: FunctionComponent = () => (
-  <HorizontalGutter>
-    <Typography variant="heading3">Not Found</Typography>
+  <HorizontalGutter container="main">
+    <Typography variant="heading3" container="h1">
+      Not Found
+    </Typography>
   </HorizontalGutter>
 );
 
diff --git a/src/core/client/account/routes/download/Download/DownloadDescription.tsx b/src/core/client/account/routes/download/Download/DownloadDescription.tsx
index 0d197ae10..c7ca596d8 100644
--- a/src/core/client/account/routes/download/Download/DownloadDescription.tsx
+++ b/src/core/client/account/routes/download/Download/DownloadDescription.tsx
@@ -10,7 +10,7 @@ const DownloadDescription: FunctionComponent = () => {
   return (
     <HorizontalGutter size="double">
       <Localized id="download-landingPage-title">
-        <div className={styles.title}>Download Your Comment History</div>
+        <h1 className={styles.title}>Download Your Comment History</h1>
       </Localized>
       <div className={styles.content}>
         <div className={styles.section}>
diff --git a/src/core/client/account/routes/download/Download/DownloadRoute.tsx b/src/core/client/account/routes/download/Download/DownloadRoute.tsx
index 518077f85..01b03b440 100644
--- a/src/core/client/account/routes/download/Download/DownloadRoute.tsx
+++ b/src/core/client/account/routes/download/Download/DownloadRoute.tsx
@@ -32,35 +32,35 @@ const DownloadRoute: FunctionComponent<Props> = ({ token }) => {
 
   if (state === "UNCHECKED") {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <HorizontalGutter size="double">
             <Loading />
           </HorizontalGutter>
         </div>
-      </div>
+      </main>
     );
   }
   if (state !== "VALID" || error) {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <HorizontalGutter size="double">
             <DownloadDescription />
             <Sorry />
           </HorizontalGutter>
         </div>
-      </div>
+      </main>
     );
   }
 
   return (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <DownloadDescription />
         <DownloadForm token={token!} />
       </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx b/src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx
index 8efd5bb3a..704be370c 100644
--- a/src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx
+++ b/src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx
@@ -35,36 +35,36 @@ const ConfirmRoute: React.FunctionComponent<Props> = ({ token }) => {
 
   if (state === "UNCHECKED") {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <Loading />
         </div>
-      </div>
+      </main>
     );
   }
 
   if (state !== "VALID" || error) {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <Sorry reason={error} />
         </div>
-      </div>
+      </main>
     );
   }
 
   return !finished ? (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <ConfirmForm token={token!} onSuccess={onSuccess} />
       </div>
-    </div>
+    </main>
   ) : (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <Success />
       </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx b/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx
index 41c029362..9375784bc 100644
--- a/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx
+++ b/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx
@@ -35,36 +35,36 @@ const UnsubscribeRoute: React.FunctionComponent<Props> = ({ token }) => {
 
   if (state === "UNCHECKED") {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <Loading />
         </div>
-      </div>
+      </main>
     );
   }
 
   if (state !== "VALID" || error) {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <Sorry reason={error} />
         </div>
-      </div>
+      </main>
     );
   }
 
   return !finished ? (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <UnsubscribeForm token={token!} onSuccess={onSuccess} />
       </div>
-    </div>
+    </main>
   ) : (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <Success />
       </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/src/core/client/account/routes/password/Reset/ResetRoute.tsx b/src/core/client/account/routes/password/Reset/ResetRoute.tsx
index d12870272..9b4f2e6a6 100644
--- a/src/core/client/account/routes/password/Reset/ResetRoute.tsx
+++ b/src/core/client/account/routes/password/Reset/ResetRoute.tsx
@@ -35,36 +35,36 @@ const ResetRoute: React.FunctionComponent<Props> = ({ token }) => {
 
   if (state === "UNCHECKED") {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <Loading />
         </div>
-      </div>
+      </main>
     );
   }
 
   if (state !== "VALID" || error) {
     return (
-      <div className={styles.container}>
+      <main className={styles.container}>
         <div className={styles.root}>
           <Sorry reason={error} />
         </div>
-      </div>
+      </main>
     );
   }
 
   return !finished ? (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <ResetPasswordForm token={token!} onSuccess={onSuccess} />
       </div>
-    </div>
+    </main>
   ) : (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <div className={styles.root}>
         <Success />
       </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
index e917f7090..320dbb64f 100644
--- a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
+++ b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`renders form 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div
+    <main
       className="ConfirmRoute-container"
     >
       <div
@@ -58,7 +58,7 @@ exports[`renders form 1`] = `
           </div>
         </form>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
@@ -73,7 +73,7 @@ exports[`renders missing confirm token 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div
+    <main
       className="ConfirmRoute-container"
     >
       <div
@@ -100,7 +100,7 @@ exports[`renders missing confirm token 1`] = `
           </div>
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
diff --git a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
index bbb759170..a152928d3 100644
--- a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+++ b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`renders form 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div
+    <main
       className="ResetRoute-container"
     >
       <div
@@ -115,7 +115,7 @@ Make sure it is unique and be sure to keep it secure.
           </form>
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
@@ -130,7 +130,7 @@ exports[`renders missing reset token 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div
+    <main
       className="ResetRoute-container"
     >
       <div
@@ -157,7 +157,7 @@ exports[`renders missing reset token 1`] = `
           </div>
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
diff --git a/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap b/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
index ceee687be..00c741c19 100644
--- a/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
+++ b/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`renders form 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div
+    <main
       className="UnsubscribeRoute-container"
     >
       <div
@@ -48,7 +48,7 @@ exports[`renders form 1`] = `
           </form>
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
@@ -63,7 +63,7 @@ exports[`renders missing confirm token 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div
+    <main
       className="UnsubscribeRoute-container"
     >
       <div
@@ -90,7 +90,7 @@ exports[`renders missing confirm token 1`] = `
           </div>
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
diff --git a/src/core/client/admin/index.html b/src/core/client/admin/index.html
index 13fb0a90e..5afbbefbd 100644
--- a/src/core/client/admin/index.html
+++ b/src/core/client/admin/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Admin</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
   </head>
 
   <body>
diff --git a/src/core/client/admin/index.tsx b/src/core/client/admin/index.tsx
index 50eac4933..be4826989 100644
--- a/src/core/client/admin/index.tsx
+++ b/src/core/client/admin/index.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import potentiallyInjectAxe from "coral-framework/helpers/potentiallyInjectAxe";
 import { createManaged } from "coral-framework/lib/bootstrap";
 
 import App from "./App";
@@ -12,6 +13,8 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";
 
 async function main() {
+  // Potentially inject react-axe for runtime a11y checks.
+  await potentiallyInjectAxe();
   const ManagedCoralContextProvider = await createManaged({
     initLocalState,
     localesData,
diff --git a/src/core/client/auth-callback/index.html b/src/core/client/auth-callback/index.html
index 53c5d6e00..e18bf8a91 100644
--- a/src/core/client/auth-callback/index.html
+++ b/src/core/client/auth-callback/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Auth Callback</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
   </head>
 
   <body></body>
diff --git a/src/core/client/auth/components/Header/Bar.tsx b/src/core/client/auth/components/Header/Bar.tsx
index a3c16eee8..14c4a7f35 100644
--- a/src/core/client/auth/components/Header/Bar.tsx
+++ b/src/core/client/auth/components/Header/Bar.tsx
@@ -10,7 +10,7 @@ export interface BarProps {
 
 const Bar: FunctionComponent<BarProps> = props => (
   <Flex className={styles.root} alignItems="center" justifyContent="center">
-    <div>{props.children}</div>
+    <header>{props.children}</header>
   </Flex>
 );
 
diff --git a/src/core/client/auth/components/Header/SubBar.tsx b/src/core/client/auth/components/Header/SubBar.tsx
index 652c6fe28..51405a79d 100644
--- a/src/core/client/auth/components/Header/SubBar.tsx
+++ b/src/core/client/auth/components/Header/SubBar.tsx
@@ -10,7 +10,7 @@ export interface SubBarProps {
 
 const SubBar: FunctionComponent<SubBarProps> = props => (
   <Flex className={styles.root} alignItems="center" justifyContent="center">
-    <div>{props.children}</div>
+    <nav>{props.children}</nav>
   </Flex>
 );
 
diff --git a/src/core/client/auth/components/Header/__snapshots__/Bar.spec.tsx.snap b/src/core/client/auth/components/Header/__snapshots__/Bar.spec.tsx.snap
index c7d359668..febeb8e31 100644
--- a/src/core/client/auth/components/Header/__snapshots__/Bar.spec.tsx.snap
+++ b/src/core/client/auth/components/Header/__snapshots__/Bar.spec.tsx.snap
@@ -6,8 +6,8 @@ exports[`renders correctly 1`] = `
   className="Bar-root"
   justifyContent="center"
 >
-  <div>
+  <header>
     Hello World
-  </div>
+  </header>
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/auth/components/Header/__snapshots__/SubBar.spec.tsx.snap b/src/core/client/auth/components/Header/__snapshots__/SubBar.spec.tsx.snap
index 0884035c5..a815dab38 100644
--- a/src/core/client/auth/components/Header/__snapshots__/SubBar.spec.tsx.snap
+++ b/src/core/client/auth/components/Header/__snapshots__/SubBar.spec.tsx.snap
@@ -6,8 +6,8 @@ exports[`renders correctly 1`] = `
   className="SubBar-root"
   justifyContent="center"
 >
-  <div>
+  <nav>
     Hello World
-  </div>
+  </nav>
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/auth/components/Main.tsx b/src/core/client/auth/components/Main.tsx
index 91547e0d5..263165e64 100644
--- a/src/core/client/auth/components/Main.tsx
+++ b/src/core/client/auth/components/Main.tsx
@@ -13,9 +13,9 @@ const Main: FunctionComponent<MainProps> = ({
   className,
   ...rest
 }) => (
-  <div {...rest} className={cn(styles.root, className)}>
+  <main {...rest} className={cn(styles.root, className)}>
     {children}
-  </div>
+  </main>
 );
 
 export default Main;
diff --git a/src/core/client/auth/components/__snapshots__/Main.spec.tsx.snap b/src/core/client/auth/components/__snapshots__/Main.spec.tsx.snap
index 0ffccaefc..1bba33f3d 100644
--- a/src/core/client/auth/components/__snapshots__/Main.spec.tsx.snap
+++ b/src/core/client/auth/components/__snapshots__/Main.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
+<main
   className="Main-root"
 >
   Hello World
-</div>
+</main>
 `;
diff --git a/src/core/client/auth/hooks/useResizePopup.ts b/src/core/client/auth/hooks/useResizePopup.ts
index d607dc3f2..916ca0387 100644
--- a/src/core/client/auth/hooks/useResizePopup.ts
+++ b/src/core/client/auth/hooks/useResizePopup.ts
@@ -1,47 +1,37 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 import { useResizeObserver } from "coral-framework/hooks";
 
 import resizePopup from "../dom/resizePopup";
 
 export default function useResizePopup() {
-  const [polling, setPolling] = useState(true);
-  const [pollTimeout, setPollTimeout] = useState<NodeJS.Timer | null>(null);
+  const pollTimeout = useRef<any>();
 
-  const pollPopupHeight = useCallback(
-    (interval = 200) => {
-      if (!polling) {
-        return;
-      }
-
-      // Save the reference to the browser timeout we create.
-      setPollTimeout(
-        // Create the timeout to fire after the interval.
-        setTimeout(() => {
-          // Using requestAnimationFrame, resize the popup, and reschedule the
-          // resize timeout again in another interval.
-          window.requestAnimationFrame(() => {
-            resizePopup();
-            pollPopupHeight(interval);
-          });
-        }, interval)
-      );
-    },
-    [pollTimeout, setPollTimeout, polling]
-  );
+  const pollPopupHeight = useCallback((interval = 200) => {
+    // Save the reference to the browser timeout we create.
+    pollTimeout.current =
+      // Create the timeout to fire after the interval.
+      setTimeout(() => {
+        // Using requestAnimationFrame, resize the popup, and reschedule the
+        // resize timeout again in another interval.
+        window.requestAnimationFrame(() => {
+          resizePopup();
+          pollPopupHeight(interval);
+        });
+      }, interval);
+  }, []);
 
   useEffect(() => {
     // Poll for popup height changes.
     pollPopupHeight();
 
     return () => {
-      if (pollTimeout) {
-        clearTimeout(pollTimeout);
-        setPollTimeout(null);
-        setPolling(false);
+      if (pollTimeout.current) {
+        clearTimeout(pollTimeout.current);
+        pollTimeout.current = null;
       }
     };
-  }, [setPollTimeout, setPolling]);
+  }, []);
 
   const ref = useResizeObserver(() => {
     resizePopup();
diff --git a/src/core/client/auth/index.html b/src/core/client/auth/index.html
index aaecfbc6e..f68dcd82a 100644
--- a/src/core/client/auth/index.html
+++ b/src/core/client/auth/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Auth</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
   </head>
 
   <body>
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index b8198709b..a2c2cae04 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import potentiallyInjectAxe from "coral-framework/helpers/potentiallyInjectAxe";
 import { createManaged } from "coral-framework/lib/bootstrap";
 
 import App from "./App";
@@ -11,6 +12,8 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";
 
 async function main() {
+  // Potentially inject react-axe for runtime a11y checks.
+  await potentiallyInjectAxe();
   const ManagedCoralContextProvider = await createManaged({
     initLocalState,
     localesData,
diff --git a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
index 04623482e..7e7bd3fe8 100644
--- a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
@@ -352,15 +352,15 @@ exports[`renders addEmailAddress view 1`] = `
       <div
         className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <header>
           <h1
             className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
             Add Email Address
           </h1>
-        </div>
+        </header>
       </div>
-      <div
+      <main
         className="Main-root"
         data-testid="addEmailAddress-main"
       >
@@ -513,7 +513,7 @@ Your email address will be used to:
             </button>
           </div>
         </form>
-      </div>
+      </main>
     </div>
   </div>
 </div>
diff --git a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
index e636685ba..1cb265bad 100644
--- a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
@@ -108,15 +108,15 @@ exports[`renders createPassword view 1`] = `
       <div
         className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <header>
           <h1
             className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
             Create Password
           </h1>
-        </div>
+        </header>
       </div>
-      <div
+      <main
         className="Main-root"
         data-testid="createPassword-main"
       >
@@ -203,7 +203,7 @@ we require users to create a password.
             </button>
           </div>
         </form>
-      </div>
+      </main>
     </div>
   </div>
 </div>
diff --git a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
index bcdbbb6d3..a0828ef8c 100644
--- a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
@@ -84,15 +84,15 @@ exports[`renders createUsername view 1`] = `
       <div
         className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <header>
           <h1
             className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
             Create Username
           </h1>
-        </div>
+        </header>
       </div>
-      <div
+      <main
         className="Main-root"
         data-testid="createUsername-main"
       >
@@ -155,7 +155,7 @@ exports[`renders createUsername view 1`] = `
             </button>
           </div>
         </form>
-      </div>
+      </main>
     </div>
   </div>
 </div>
diff --git a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
index 5d70b5d3d..76f7fa9c8 100644
--- a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
@@ -9,18 +9,18 @@ exports[`renders forgot password view 1`] = `
       <div
         className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <header>
           <h1
             className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
             Forgot Password?
           </h1>
-        </div>
+        </header>
       </div>
       <div
         className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <nav>
           <div
             className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
           >
@@ -32,9 +32,9 @@ exports[`renders forgot password view 1`] = `
               Go back to sign in page
             </a>
           </div>
-        </div>
+        </nav>
       </div>
-      <div
+      <main
         className="Main-root"
         data-testid="forgotPassword-main"
       >
@@ -93,7 +93,7 @@ reset your password.
             </button>
           </div>
         </form>
-      </div>
+      </main>
     </div>
   </div>
 </div>
diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index 7eb8169e6..60d85b0c2 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -275,7 +275,7 @@ exports[`accepts valid email 1`] = `
 `;
 
 exports[`auth configuration renders all auth enabled 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signIn-main"
 >
@@ -492,11 +492,11 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </button>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`auth configuration renders only some social login enabled 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signIn-main"
 >
@@ -564,7 +564,7 @@ exports[`auth configuration renders only some social login enabled 1`] = `
       </button>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`checks for invalid email 1`] = `
@@ -726,7 +726,7 @@ exports[`renders sign in view 1`] = `
       <div
         className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <header>
           <h1
             className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
@@ -737,12 +737,12 @@ exports[`renders sign in view 1`] = `
           >
             to join the conversation
           </h1>
-        </div>
+        </header>
       </div>
       <div
         className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <nav>
           <div
             className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
           >
@@ -757,9 +757,9 @@ exports[`renders sign in view 1`] = `
               Sign Up
             </a>
           </div>
-        </div>
+        </nav>
       </div>
-      <div
+      <main
         className="Main-root"
         data-testid="signIn-main"
       >
@@ -891,7 +891,7 @@ exports[`renders sign in view 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           />
         </div>
-      </div>
+      </main>
     </div>
   </div>
 </div>
@@ -904,7 +904,7 @@ exports[`renders sign in view with error 1`] = `
   <div
     className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <header>
       <h1
         className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
       >
@@ -915,12 +915,12 @@ exports[`renders sign in view with error 1`] = `
       >
         to join the conversation
       </h1>
-    </div>
+    </header>
   </div>
   <div
     className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <nav>
       <div
         className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
       >
@@ -935,9 +935,9 @@ exports[`renders sign in view with error 1`] = `
           Sign Up
         </a>
       </div>
-    </div>
+    </nav>
   </div>
-  <div
+  <main
     className="Main-root"
     data-testid="signIn-main"
   >
@@ -1076,7 +1076,7 @@ exports[`renders sign in view with error 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       />
     </div>
-  </div>
+  </main>
 </div>
 `;
 
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 3a7ecc9e0..5cbb89693 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`accepts correct password 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -180,11 +180,11 @@ exports[`accepts correct password 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`accepts valid email 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -363,11 +363,11 @@ exports[`accepts valid email 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`accepts valid username 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -546,11 +546,11 @@ exports[`accepts valid username 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`auth configuration renders all auth enabled 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -788,11 +788,11 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </button>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`auth configuration renders only some social login enabled 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -860,11 +860,11 @@ exports[`auth configuration renders only some social login enabled 1`] = `
       </button>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`checks for invalid characters in username 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -1056,11 +1056,11 @@ exports[`checks for invalid characters in username 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`checks for invalid email 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -1252,11 +1252,11 @@ exports[`checks for invalid email 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`checks for too long username 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -1448,11 +1448,11 @@ exports[`checks for too long username 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`checks for too short password 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -1644,11 +1644,11 @@ exports[`checks for too short password 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`checks for too short username 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -1840,7 +1840,7 @@ exports[`checks for too short username 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`renders sign up form 1`] = `
@@ -1852,7 +1852,7 @@ exports[`renders sign up form 1`] = `
       <div
         className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <header>
           <h1
             className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
@@ -1863,12 +1863,12 @@ exports[`renders sign up form 1`] = `
           >
             to join the conversation
           </h1>
-        </div>
+        </header>
       </div>
       <div
         className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div>
+        <nav>
           <div
             className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
           >
@@ -1883,9 +1883,9 @@ exports[`renders sign up form 1`] = `
               Sign In
             </a>
           </div>
-        </div>
+        </nav>
       </div>
-      <div
+      <main
         className="Main-root"
         data-testid="signUp-main"
       >
@@ -2038,14 +2038,14 @@ exports[`renders sign up form 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           />
         </div>
-      </div>
+      </main>
     </div>
   </div>
 </div>
 `;
 
 exports[`shows error when submitting empty form 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -2237,11 +2237,11 @@ exports[`shows error when submitting empty form 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`shows server error 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -2401,11 +2401,11 @@ exports[`shows server error 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`submits form successfully 1`] = `
-<div
+<main
   className="Main-root"
   data-testid="signUp-main"
 >
@@ -2558,5 +2558,5 @@ exports[`submits form successfully 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
-</div>
+</main>
 `;
diff --git a/src/core/client/count/index.html b/src/core/client/count/index.html
index f69377825..ad987ecfd 100644
--- a/src/core/client/count/index.html
+++ b/src/core/client/count/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Count</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
     <link rel="canonical" href="http://localhost:8080/" />
   </head>
 
diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html
index 3bd2327e9..838c62c34 100644
--- a/src/core/client/embed/index.html
+++ b/src/core/client/embed/index.html
@@ -4,7 +4,7 @@
     <title>Coral 5.0 – Embed Stream</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
     <style>
       body {
         margin: 0;
diff --git a/src/core/client/framework/helpers/potentiallyInjectAxe.ts b/src/core/client/framework/helpers/potentiallyInjectAxe.ts
new file mode 100644
index 000000000..696ad0624
--- /dev/null
+++ b/src/core/client/framework/helpers/potentiallyInjectAxe.ts
@@ -0,0 +1,62 @@
+import bowser from "bowser";
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { parseQuery } from "coral-common/utils";
+import { areWeInIframe } from "coral-framework/utils";
+
+function extractQuery(href: string) {
+  const query = href.split("?")[1];
+  if (!query) {
+    return null;
+  }
+  // Remove hash and return.
+  return query.split("#")[0];
+}
+
+/**
+ * Injects react-axe for runtime a11y checks under certain conditions:
+ *   - During development
+ *   - Not on mobile
+ *   - `axe` has been added to the url query.
+ *
+ * @param href url to check for the `axe` property.
+ */
+export default async function potentiallyInjectAxe(
+  href = window.location.href
+) {
+  if (process.env.NODE_ENV !== "development" || bowser.mobile) {
+    // Only in development and skip mobile as it doesn't work there.
+    return;
+  }
+  const query = extractQuery(href);
+  if (!query || !("axe" in parseQuery(query))) {
+    // Because axe slows down React rendering considerably it is
+    // only included when "axe" is set in the url query.
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log("Injecting react-axe");
+  const axe = (await import("react-axe")).default;
+  axe(React, ReactDOM, 1000, {
+    rules: [
+      {
+        id: "page-has-heading-one",
+        enabled: !areWeInIframe(),
+      },
+      {
+        id: "html-has-lang",
+        // This is injected by the server and irrelevant during development.
+        enabled: false,
+      },
+      {
+        id: "label",
+        // TODO: The Markdown Editor uses CodeMirror which does not fully comply to a11y yet,
+        // this would hide the error.
+        // selector:
+        //  'input, select, textarea:not([style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"])',
+      },
+    ],
+  });
+}
diff --git a/src/core/client/install/App/App.tsx b/src/core/client/install/App/App.tsx
index 250e279ab..110a67224 100644
--- a/src/core/client/install/App/App.tsx
+++ b/src/core/client/install/App/App.tsx
@@ -39,9 +39,9 @@ const App: FunctionComponent = () => {
   return (
     <div className={styles.root}>
       <MainBar />
-      <div className={styles.container}>
+      <main className={styles.container}>
         <AppState state={state} error={error} />
-      </div>
+      </main>
     </div>
   );
 };
diff --git a/src/core/client/install/App/MainBar.tsx b/src/core/client/install/App/MainBar.tsx
index 80c2e9baa..2613260bf 100644
--- a/src/core/client/install/App/MainBar.tsx
+++ b/src/core/client/install/App/MainBar.tsx
@@ -6,13 +6,13 @@ import styles from "./MainBar.css";
 
 const MainBar = () => {
   return (
-    <div className={styles.root}>
+    <header className={styles.root}>
       <div className={styles.container}>
         <Typography variant="heading1" className={styles.title}>
           Coral
         </Typography>
       </div>
-    </div>
+    </header>
   );
 };
 
diff --git a/src/core/client/install/App/__snapshots__/App.spec.tsx.snap b/src/core/client/install/App/__snapshots__/App.spec.tsx.snap
index 226293a37..28f253859 100644
--- a/src/core/client/install/App/__snapshots__/App.spec.tsx.snap
+++ b/src/core/client/install/App/__snapshots__/App.spec.tsx.snap
@@ -5,13 +5,13 @@ exports[`renders correctly 1`] = `
   className="App-root"
 >
   <MainBar />
-  <div
+  <main
     className="App-container"
   >
     <AppState
       error={null}
       state="loading"
     />
-  </div>
+  </main>
 </div>
 `;
diff --git a/src/core/client/install/App/steps/AddOrganizationStep.tsx b/src/core/client/install/App/steps/AddOrganizationStep.tsx
index c74bdbcbc..26224868c 100644
--- a/src/core/client/install/App/steps/AddOrganizationStep.tsx
+++ b/src/core/client/install/App/steps/AddOrganizationStep.tsx
@@ -83,7 +83,9 @@ class AddOrganizationStep extends React.Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-addOrganization-orgName">
-                      <InputLabel>Organization Name</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Organization Name
+                      </InputLabel>
                     </Localized>
                     <Localized
                       id="install-addOrganization-orgNameTextField"
@@ -94,6 +96,7 @@ class AddOrganizationStep extends React.Component<Props> {
                         color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
@@ -109,7 +112,9 @@ class AddOrganizationStep extends React.Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-addOrganization-orgEmail">
-                      <InputLabel>Organization Contact Email</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Organization Contact Email
+                      </InputLabel>
                     </Localized>
                     <Localized
                       id="install-addOrganization-orgEmailTextField"
@@ -123,6 +128,7 @@ class AddOrganizationStep extends React.Component<Props> {
                         autoCapitalize="off"
                         autoCorrect="off"
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
@@ -138,7 +144,9 @@ class AddOrganizationStep extends React.Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-addOrganization-orgURL">
-                      <InputLabel>Organization URL</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Organization URL
+                      </InputLabel>
                     </Localized>
                     <Localized
                       id="install-addOrganization-orgURLDescription"
@@ -159,6 +167,7 @@ class AddOrganizationStep extends React.Component<Props> {
                         color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
diff --git a/src/core/client/install/App/steps/CreateYourAccountStep.tsx b/src/core/client/install/App/steps/CreateYourAccountStep.tsx
index a14aee7b9..d19189f33 100644
--- a/src/core/client/install/App/steps/CreateYourAccountStep.tsx
+++ b/src/core/client/install/App/steps/CreateYourAccountStep.tsx
@@ -79,7 +79,9 @@ class CreateYourAccountStep extends Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-createYourAccount-email">
-                      <InputLabel>Email</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Email
+                      </InputLabel>
                     </Localized>
                     <Localized
                       id="install-createYourAccount-emailTextField"
@@ -93,6 +95,7 @@ class CreateYourAccountStep extends Component<Props> {
                         autoCapitalize="off"
                         autoCorrect="off"
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
@@ -108,7 +111,9 @@ class CreateYourAccountStep extends Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-createYourAccount-username">
-                      <InputLabel>Username</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Username
+                      </InputLabel>
                     </Localized>
                     <Localized id="install-createYourAccount-usernameDescription">
                       <InputDescription>
@@ -127,6 +132,7 @@ class CreateYourAccountStep extends Component<Props> {
                         autoCapitalize="off"
                         autoCorrect="off"
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
@@ -142,7 +148,9 @@ class CreateYourAccountStep extends Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-createYourAccount-password">
-                      <InputLabel>Password</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Password
+                      </InputLabel>
                     </Localized>
                     <Localized id="install-createYourAccount-passwordDescription">
                       <InputDescription>
@@ -159,6 +167,7 @@ class CreateYourAccountStep extends Component<Props> {
                         color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
@@ -174,7 +183,9 @@ class CreateYourAccountStep extends Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-createYourAccount-confirmPassword">
-                      <InputLabel>Confirm Password</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Confirm Password
+                      </InputLabel>
                     </Localized>
                     <Localized
                       id="install-createYourAccount-confirmPasswordTextField"
@@ -186,6 +197,7 @@ class CreateYourAccountStep extends Component<Props> {
                         color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
diff --git a/src/core/client/install/App/steps/PermittedDomainsStep.tsx b/src/core/client/install/App/steps/PermittedDomainsStep.tsx
index d98699b8b..b5c3975ae 100644
--- a/src/core/client/install/App/steps/PermittedDomainsStep.tsx
+++ b/src/core/client/install/App/steps/PermittedDomainsStep.tsx
@@ -85,7 +85,9 @@ class PermittedDomainsStep extends Component<Props> {
                 {({ input, meta }) => (
                   <FormField>
                     <Localized id="install-permittedDomains-permittedDomains">
-                      <InputLabel>Permitted Domains</InputLabel>
+                      <InputLabel container={<label htmlFor={input.name} />}>
+                        Permitted Domains
+                      </InputLabel>
                     </Localized>
                     <Localized id="install-permittedDomains-permittedDomainsDescription">
                       <InputDescription>
@@ -101,6 +103,7 @@ class PermittedDomainsStep extends Component<Props> {
                         color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        id={input.name}
                         {...input}
                       />
                     </Localized>
diff --git a/src/core/client/install/App/steps/SelectLanguageStep.tsx b/src/core/client/install/App/steps/SelectLanguageStep.tsx
index fe6ba9353..d2f86752a 100644
--- a/src/core/client/install/App/steps/SelectLanguageStep.tsx
+++ b/src/core/client/install/App/steps/SelectLanguageStep.tsx
@@ -73,9 +73,16 @@ const SelectLanguageStep: FunctionComponent<Props> = props => {
               {({ input, meta }) => (
                 <FormField>
                   <Localized id="install-selectLanguage-language">
-                    <InputLabel>Language</InputLabel>
+                    <InputLabel container={<label htmlFor={input.name} />}>
+                      Language
+                    </InputLabel>
                   </Localized>
-                  <LocaleField disabled={submitting} fullWidth {...input} />
+                  <LocaleField
+                    disabled={submitting}
+                    fullWidth
+                    id={input.name}
+                    {...input}
+                  />
                   <ValidationMessage meta={meta} fullWidth />
                 </FormField>
               )}
diff --git a/src/core/client/install/index.html b/src/core/client/install/index.html
index b1854c5a7..b637397f0 100644
--- a/src/core/client/install/index.html
+++ b/src/core/client/install/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Install</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
   </head>
 
   <body>
diff --git a/src/core/client/install/index.tsx b/src/core/client/install/index.tsx
index 8dc1d63c5..a148a8fde 100644
--- a/src/core/client/install/index.tsx
+++ b/src/core/client/install/index.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import potentiallyInjectAxe from "coral-framework/helpers/potentiallyInjectAxe";
 import { createManaged } from "coral-framework/lib/bootstrap";
 
 import App from "./App";
@@ -11,6 +12,8 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";
 
 async function main() {
+  // Potentially inject react-axe for runtime a11y checks.
+  await potentiallyInjectAxe();
   const ManagedCoralContextProvider = await createManaged({
     localesData,
     initLocalState,
diff --git a/src/core/client/stream/App/App.tsx b/src/core/client/stream/App/App.tsx
index eb288c3ad..252f79d05 100644
--- a/src/core/client/stream/App/App.tsx
+++ b/src/core/client/stream/App/App.tsx
@@ -2,7 +2,12 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import CLASSES from "coral-stream/classes";
-import { HorizontalGutter, TabContent, TabPane } from "coral-ui/components";
+import {
+  AriaInfo,
+  HorizontalGutter,
+  TabContent,
+  TabPane,
+} from "coral-ui/components";
 
 import Comments from "../tabs/Comments";
 import Configure from "../tabs/Configure";
@@ -20,30 +25,35 @@ export interface AppProps {
 const App: FunctionComponent<AppProps> = props => {
   return (
     <HorizontalGutter className={cn(CLASSES.app, styles.root)}>
-      <TabBarQuery />
-      <TabContent activeTab={props.activeTab} className={styles.tabContent}>
-        <TabPane
-          className={CLASSES.commentsTabPane.$root}
-          tabID="COMMENTS"
-          data-testid="current-tab-pane"
-        >
-          <Comments />
-        </TabPane>
-        <TabPane
-          className={CLASSES.myProfileTabPane.$root}
-          tabID="PROFILE"
-          data-testid="current-tab-pane"
-        >
-          <Profile />
-        </TabPane>
-        <TabPane
-          className={CLASSES.configureTabPane.$root}
-          tabID="CONFIGURE"
-          data-testid="current-tab-pane"
-        >
-          <Configure />
-        </TabPane>
-      </TabContent>
+      <nav>
+        <AriaInfo component="h2">Navigation</AriaInfo>
+        <TabBarQuery />
+      </nav>
+      <main>
+        <TabContent activeTab={props.activeTab} className={styles.tabContent}>
+          <TabPane
+            className={CLASSES.commentsTabPane.$root}
+            tabID="COMMENTS"
+            data-testid="current-tab-pane"
+          >
+            <Comments />
+          </TabPane>
+          <TabPane
+            className={CLASSES.myProfileTabPane.$root}
+            tabID="PROFILE"
+            data-testid="current-tab-pane"
+          >
+            <Profile />
+          </TabPane>
+          <TabPane
+            className={CLASSES.configureTabPane.$root}
+            tabID="CONFIGURE"
+            data-testid="current-tab-pane"
+          >
+            <Configure />
+          </TabPane>
+        </TabContent>
+      </main>
     </HorizontalGutter>
   );
 };
diff --git a/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
index b8ec81cef..82159a7a4 100644
--- a/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
+++ b/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
@@ -4,32 +4,41 @@ exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   className="coral coral-stream App-root"
 >
-  <withContext(withLocalStateContainer(TabBarQuery)) />
-  <TabContent
-    activeTab="COMMENTS"
-    className="App-tabContent"
-  >
-    <TabPane
-      className="coral coral-comments"
-      data-testid="current-tab-pane"
-      tabID="COMMENTS"
+  <nav>
+    <ForwardRef(forwardRef)
+      component="h2"
     >
-      <CommentsPane />
-    </TabPane>
-    <TabPane
-      className="coral coral-myProfile"
-      data-testid="current-tab-pane"
-      tabID="PROFILE"
+      Navigation
+    </ForwardRef(forwardRef)>
+    <withContext(withLocalStateContainer(TabBarQuery)) />
+  </nav>
+  <main>
+    <TabContent
+      activeTab="COMMENTS"
+      className="App-tabContent"
     >
-      <withContext(withLocalStateContainer(ProfileQuery)) />
-    </TabPane>
-    <TabPane
-      className="coral coral-configure"
-      data-testid="current-tab-pane"
-      tabID="CONFIGURE"
-    >
-      <withContext(withLocalStateContainer(ConfigureQuery)) />
-    </TabPane>
-  </TabContent>
+      <TabPane
+        className="coral coral-comments"
+        data-testid="current-tab-pane"
+        tabID="COMMENTS"
+      >
+        <CommentsPane />
+      </TabPane>
+      <TabPane
+        className="coral coral-myProfile"
+        data-testid="current-tab-pane"
+        tabID="PROFILE"
+      >
+        <withContext(withLocalStateContainer(ProfileQuery)) />
+      </TabPane>
+      <TabPane
+        className="coral coral-configure"
+        data-testid="current-tab-pane"
+        tabID="CONFIGURE"
+      >
+        <withContext(withLocalStateContainer(ConfigureQuery)) />
+      </TabPane>
+    </TabContent>
+  </main>
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/stream/index.html b/src/core/client/stream/index.html
index b94082ab1..79adf6c91 100644
--- a/src/core/client/stream/index.html
+++ b/src/core/client/stream/index.html
@@ -4,7 +4,7 @@
     <title>Coral - Stream</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
   </head>
 
   <body>
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 12769072c..cad01cf0d 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -2,6 +2,7 @@ import { Child as PymChild } from "pym.js";
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import potentiallyInjectAxe from "coral-framework/helpers/potentiallyInjectAxe";
 import { createManaged } from "coral-framework/lib/bootstrap";
 
 import AppContainer from "./App";
@@ -12,12 +13,15 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";
 
 async function main() {
+  const pym = new PymChild({
+    polling: 100,
+  });
+  // Potentially inject react-axe for runtime a11y checks.
+  await potentiallyInjectAxe(pym.parentUrl);
   const ManagedCoralContextProvider = await createManaged({
     initLocalState,
     localesData,
-    pym: new PymChild({
-      polling: 100,
-    }),
+    pym,
   });
 
   const Index: FunctionComponent = () => (
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
index 976666ce5..c6f00af02 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
@@ -270,8 +270,8 @@ export class CommentContainer extends Component<Props, State> {
                   <>
                     <UsernameWithPopoverContainer
                       className={CLASSES.comment.topBar.username}
+                      comment={comment}
                       viewer={viewer}
-                      user={comment.author}
                     />
                     <UserTagsContainer
                       className={CLASSES.comment.topBar.userTag}
@@ -426,7 +426,6 @@ const enhanced = withContext(({ eventEmitter }) => ({ eventEmitter }))(
           fragment CommentContainer_comment on Comment {
             id
             author {
-              ...UsernameWithPopoverContainer_user
               id
               username
             }
@@ -456,6 +455,7 @@ const enhanced = withContext(({ eventEmitter }) => ({ eventEmitter }))(
             ...RejectedTombstoneContainer_comment
             ...AuthorBadgesContainer_comment
             ...UserTagsContainer_comment
+            ...UsernameWithPopoverContainer_comment
           }
         `,
         settings: graphql`
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
index 98569969d..002a66815 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
@@ -22,7 +22,7 @@ interface Props {
 }
 
 const CaretContainer: FunctionComponent<Props> = props => {
-  const popoverID = `comments-moderationMenu`;
+  const popoverID = `comments-moderationMenu-${props.comment.id}`;
   return (
     <Localized
       id="comments-moderationDropdown-popover"
@@ -71,6 +71,7 @@ const CaretContainer: FunctionComponent<Props> = props => {
 const enhanced = withFragmentContainer<Props>({
   comment: graphql`
     fragment CaretContainer_comment on Comment {
+      id
       ...ModerationDropdownContainer_comment
     }
   `,
diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx
index 9151b460a..aaee7042c 100644
--- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx
@@ -1,4 +1,5 @@
 import cn from "classnames";
+import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useEffect } from "react";
 
 import { CopyButton } from "coral-framework/components";
@@ -33,11 +34,17 @@ const PermalinkPopover: FunctionComponent<Props> = ({
       itemGutter="half"
       className={cn(styles.root, CLASSES.sharePopover.$root)}
     >
-      <TextField
-        defaultValue={permalinkURL}
-        className={styles.textField}
-        readOnly
-      />
+      <Localized
+        id="comments-permalinkPopover-permalinkToComment"
+        attrs={{ "aria-label": true }}
+      >
+        <TextField
+          defaultValue={permalinkURL}
+          className={styles.textField}
+          aria-label="Permalink to button"
+          readOnly
+        />
+      </Localized>
       <CopyButton
         onClick={onButtonClick}
         text={permalinkURL}
diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx
index 20ae02b98..dcf43509f 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx
@@ -5,20 +5,23 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { BaseButton, ClickOutside, Popover } from "coral-ui/components";
 
-import { UsernameWithPopoverContainer_user as UserData } from "coral-stream/__generated__/UsernameWithPopoverContainer_user.graphql";
-import { UsernameWithPopoverContainer_viewer as ViewerData } from "coral-stream/__generated__/UsernameWithPopoverContainer_viewer.graphql";
+import { UsernameWithPopoverContainer_comment } from "coral-stream/__generated__/UsernameWithPopoverContainer_comment.graphql";
+import { UsernameWithPopoverContainer_viewer } from "coral-stream/__generated__/UsernameWithPopoverContainer_viewer.graphql";
 
 import UserPopoverContainer from "../UserPopover";
 import Username from "./Username";
 
 interface Props {
-  user: UserData;
-  viewer: ViewerData | null;
+  comment: UsernameWithPopoverContainer_comment;
+  viewer: UsernameWithPopoverContainer_viewer | null;
   className?: string;
 }
 
 const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
-  const popoverID = `username-popover`;
+  const popoverID = `username-popover-${props.comment.id}`;
+  if (!props.comment.author) {
+    return null;
+  }
   return (
     <Localized id="comments-userPopover" attrs={{ description: true }}>
       <Popover
@@ -28,7 +31,7 @@ const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
         body={({ toggleVisibility }) => (
           <ClickOutside onClickOutside={toggleVisibility}>
             <UserPopoverContainer
-              user={props.user}
+              user={props.comment.author!}
               viewer={props.viewer}
               onDismiss={toggleVisibility}
             />
@@ -42,7 +45,7 @@ const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
             ref={ref}
             className={props.className}
           >
-            <Username>{props.user.username}</Username>
+            <Username>{props.comment.author!.username}</Username>
           </BaseButton>
         )}
       </Popover>
@@ -56,10 +59,14 @@ const enhanced = withFragmentContainer<Props>({
       ...UserPopoverContainer_viewer
     }
   `,
-  user: graphql`
-    fragment UsernameWithPopoverContainer_user on User {
-      username
-      ...UserPopoverContainer_user
+  comment: graphql`
+    fragment UsernameWithPopoverContainer_comment on Comment {
+      id
+      author {
+        id
+        username
+        ...UserPopoverContainer_user
+      }
     }
   `,
 })(UsernameWithPopoverContainer);
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
index 934f9ca29..927cac806 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
@@ -110,11 +110,26 @@ exports[`hide reply button 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": "Marvin",
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
@@ -300,11 +315,26 @@ exports[`renders body only 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": null,
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": null,
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
@@ -490,11 +520,26 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": "Marvin",
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
@@ -680,11 +725,26 @@ exports[`renders disabled reply when story is closed 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": "Marvin",
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
@@ -878,11 +938,30 @@ exports[`renders in reply to 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": "Marvin",
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": Object {
+                  "author": Object {
+                    "username": "ParentAuthor",
+                  },
+                },
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
@@ -1076,11 +1155,26 @@ exports[`renders username and body 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": "Marvin",
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
@@ -1281,11 +1375,26 @@ exports[`shows conversation link 1`] = `
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
             className="coral coral-username coral-comment-username"
-            user={
+            comment={
               Object {
-                "badges": Array [],
-                "id": "author-id",
-                "username": "Marvin",
+                "author": Object {
+                  "badges": Array [],
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "deleted": false,
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
               }
             }
             viewer={null}
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
index 1e16777a6..075a6736e 100644
--- a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
@@ -72,7 +72,7 @@ const FeaturedCommentContainer: FunctionComponent<Props> = props => {
         {comment.author && (
           <UsernameWithPopoverContainer
             className={CLASSES.featuredComment.authorBar.username}
-            user={comment.author}
+            comment={comment}
             viewer={viewer}
           />
         )}
@@ -164,7 +164,6 @@ const enhanced = withSetCommentIDMutation(
       fragment FeaturedCommentContainer_comment on Comment {
         id
         author {
-          ...UsernameWithPopoverContainer_user
           id
           username
         }
@@ -177,6 +176,7 @@ const enhanced = withSetCommentIDMutation(
         createdAt
         lastViewerAction
         replyCount
+        ...UsernameWithPopoverContainer_comment
         ...ReactionButtonContainer_comment
         ...UserTagsContainer_comment
       }
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
index b0308f8b4..35b900698 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
@@ -39,7 +39,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
         />
       )}
       <HorizontalGutter className={styles.root}>
-        <div aria-hidden="true">
+        <div>
           <Localized
             id="comments-postCommentFormFake-rte"
             attrs={{ placeholder: true }}
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
index 439d48375..80a46e0a3 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
@@ -11,9 +11,7 @@ exports[`renders correctly 1`] = `
   <ForwardRef(forwardRef)
     className="PostCommentFormFake-root"
   >
-    <div
-      aria-hidden="true"
-    >
+    <div>
       <Localized
         attrs={
           Object {
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
index c616b2cec..99455caf1 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
@@ -17,6 +17,7 @@ import {
 } from "coral-stream/common/MessageBox";
 import Spinner from "coral-stream/common/Spinner";
 import {
+  AriaInfo,
   HorizontalGutter,
   Icon,
   TileOption,
@@ -104,36 +105,53 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
                             value="question_answer"
                           >
                             <Icon size="md">question_answer</Icon>
+                            <Localized id="configure-messageBox-iconConversation">
+                              <AriaInfo>Conversation</AriaInfo>
+                            </Localized>
                           </TileOption>
                           <TileOption
                             className={CLASSES.configureMessageBox.option}
                             value="today"
                           >
                             <Icon size="md">today</Icon>
+                            <Localized id="configure-messageBox-iconDate">
+                              <AriaInfo>Date</AriaInfo>
+                            </Localized>
                           </TileOption>
                           <TileOption
                             className={CLASSES.configureMessageBox.option}
                             value="help_outline"
                           >
                             <Icon size="md">help_outline</Icon>
+                            <Localized id="configure-messageBox-iconHelp">
+                              <AriaInfo>Help</AriaInfo>
+                            </Localized>
                           </TileOption>
                           <TileOption
                             className={CLASSES.configureMessageBox.option}
                             value="warning"
                           >
                             <Icon size="md">warning</Icon>
+                            <Localized id="configure-messageBox-iconWarning">
+                              <AriaInfo>Warning</AriaInfo>
+                            </Localized>
                           </TileOption>
                           <TileOption
                             className={CLASSES.configureMessageBox.option}
                             value="chat_bubble_outline"
                           >
                             <Icon size="md">chat_bubble_outline</Icon>
+                            <Localized id="configure-messageBox-iconChatBubble">
+                              <AriaInfo>Chat Bubble</AriaInfo>
+                            </Localized>
                           </TileOption>
                           <TileOption
                             className={CLASSES.configureMessageBox.option}
                             value=""
                           >
-                            No Icon
+                            <Localized id="configure-messageBox-noIcon">
+                              <span>No Icon</span>
+                            </Localized>
                           </TileOption>
                         </TileSelector>
                       </HorizontalGutter>
diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
index 6909b141f..30ae6f409 100644
--- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
+++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
@@ -28,7 +28,11 @@ interface CommentHistoryProps {
 
 const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
   return (
-    <HorizontalGutter size="double" data-testid="profile-commentHistory">
+    <HorizontalGutter
+      size="double"
+      id="coral-profile-commentHistory-log"
+      data-testid="profile-commentHistory"
+    >
       {props.comments.length < 1 && (
         <Flex
           direction="column"
diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap b/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap
index 0f9873574..c85192fb8 100644
--- a/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`has more disables load more 1`] = `
 <ForwardRef(forwardRef)
   data-testid="profile-commentHistory"
+  id="coral-profile-commentHistory-log"
   size="double"
 >
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -44,6 +45,7 @@ exports[`has more disables load more 1`] = `
 exports[`has more renders correctly 1`] = `
 <ForwardRef(forwardRef)
   data-testid="profile-commentHistory"
+  id="coral-profile-commentHistory-log"
   size="double"
 >
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -85,6 +87,7 @@ exports[`has more renders correctly 1`] = `
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   data-testid="profile-commentHistory"
+  id="coral-profile-commentHistory-log"
   size="double"
 >
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
index adfeca37d..cafe511ad 100644
--- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
+++ b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
@@ -139,7 +139,18 @@ const ConfirmPage: FunctionComponent<Props> = ({
               data-testid="confirm-page-form"
             >
               <HorizontalGutter>
-                <TextField fullWidth disabled readOnly value="delete" />
+                <Localized
+                  id="profile-account-deleteAccount-pages-phrase"
+                  attrs={{ "aria-label": true }}
+                >
+                  <TextField
+                    fullWidth
+                    disabled
+                    readOnly
+                    value="delete"
+                    aria-label=""
+                  />
+                </Localized>
                 <FormField>
                   <Field
                     name="confirmation"
@@ -151,7 +162,9 @@ const ConfirmPage: FunctionComponent<Props> = ({
                     {({ input, meta }) => (
                       <FormField>
                         <Localized id="profile-account-deleteAccount-pages-confirmPhraseLabel">
-                          <InputLabel>
+                          <InputLabel
+                            container={<label htmlFor={input.name} />}
+                          >
                             To confirm, type phrase below:
                           </InputLabel>
                         </Localized>
@@ -161,7 +174,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                           data-testid="confirm-page-confirmation"
                           disabled={submitting}
                           color={colorFromMeta(meta)}
-                          autoComplete="confirmation"
+                          autoComplete="off"
                           {...input}
                         />
                         <FieldValidationMessage fullWidth meta={meta} />
@@ -174,7 +187,11 @@ const ConfirmPage: FunctionComponent<Props> = ({
                     {({ input, meta }) => (
                       <FormField>
                         <Localized id="profile-account-deleteAccount-pages-confirmPasswordLabel">
-                          <InputLabel>Enter your password:</InputLabel>
+                          <InputLabel
+                            container={<label htmlFor={input.name} />}
+                          >
+                            Enter your password:
+                          </InputLabel>
                         </Localized>
                         <PasswordField
                           fullWidth
@@ -182,7 +199,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                           data-testid="confirm-page-password"
                           disabled={submitting}
                           color={colorFromMeta(meta)}
-                          autoComplete="password"
+                          autoComplete="off"
                           {...input}
                         />
                         <FieldValidationMessage fullWidth meta={meta} />
diff --git a/src/core/client/stream/tabs/Profile/Settings/NotificationSettingsContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/NotificationSettingsContainer.tsx
index 5975ea30b..8b8ee1b0d 100644
--- a/src/core/client/stream/tabs/Profile/Settings/NotificationSettingsContainer.tsx
+++ b/src/core/client/stream/tabs/Profile/Settings/NotificationSettingsContainer.tsx
@@ -131,7 +131,10 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                     <FormField>
                       <Flex alignItems="center" itemGutter>
                         <Localized id="profile-account-notifications-sendNotifications">
-                          <Typography variant="bodyCopyBold">
+                          <Typography
+                            variant="bodyCopyBold"
+                            container={<label htmlFor="digestFrequency" />}
+                          >
                             Send Notifications:
                           </Typography>
                         </Localized>
@@ -141,6 +144,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                               {({ input }) => (
                                 <SelectField
                                   id={input.name}
+                                  aria-label=""
                                   {...input}
                                   disabled={
                                     !values.onReply &&
diff --git a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
index c6c31dd23..6652e439c 100644
--- a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
@@ -4,317 +4,356 @@ exports[`renders comment stream 1`] = `
 <div
   className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
 >
-  <ul
-    className="TabBar-root TabBar-primary coral coral-tabBar"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+  <nav>
+    <h2
+      className="AriaInfo-root"
     >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent coral coral-comments"
-    data-testid="current-tab-pane"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="Box-root HorizontalGutter-root StreamContainer-root coral coral-unauthenticated HorizontalGutter-double"
+      Navigation
+    </h2>
+    <ul
+      className="TabBar-root TabBar-primary coral coral-tabBar"
+      role="tablist"
     >
-      <div
-        className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+      <li
+        className="Tab-root"
+        id="tab-COMMENTS"
+        role="presentation"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
-          data-color="primary"
-          data-variant="underlined"
+          aria-controls="tabPane-COMMENTS"
+          aria-selected={true}
+          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
           onTouchEnd={[Function]}
+          role="tab"
           type="button"
         >
-          Sign in
+          <span>
+            Comments
+          </span>
         </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
-          data-color="primary"
-          data-variant="outlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <section
+      aria-labelledby="tab-COMMENTS"
+      className="App-tabContent coral coral-comments"
+      data-testid="current-tab-pane"
+      id="tabPane-COMMENTS"
+      role="tabpanel"
+    >
       <div
-        className="coral coral-createComment"
+        className="Box-root HorizontalGutter-root StreamContainer-root coral coral-unauthenticated HorizontalGutter-double"
       >
         <div
-          className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
         >
-          <div
-            aria-hidden="true"
-          >
-            <div>
-              <div
-                className="$root content placeholder toolbar"
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  className="RTE-contentEditableContainer"
-                >
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable coral coral-rte-content RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                </div>
-                <div
-                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </i>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </i>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </i>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
             data-color="primary"
-            data-variant="filled"
+            data-variant="underlined"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
-            type="submit"
+            type="button"
           >
-            Sign in and Join the Conversation
+            Sign in
+          </button>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
+            data-color="primary"
+            data-variant="outlined"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Register
           </button>
         </div>
-      </div>
-      <div
-        className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
-      >
         <div
-          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          className="coral coral-createComment"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
-          >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              value="CREATED_AT_DESC"
-            >
-              <option
-                value="CREATED_AT_DESC"
-              >
-                Newest
-              </option>
-              <option
-                value="CREATED_AT_ASC"
-              >
-                Oldest
-              </option>
-              <option
-                value="REPLIES_DESC"
-              >
-                Most Replies
-              </option>
-              <option
-                value="REACTION_DESC"
-              >
-                Most Respected
-              </option>
-            </select>
-            <span
-              aria-hidden={true}
-              className="SelectField-afterWrapper undefined"
-            >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
-          </span>
-        </div>
-        <ul
-          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
-        >
-          <li
-            className="Tab-root"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
+          <div
+            className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
           >
+            <div>
+              <div>
+                <div
+                  className="$root content placeholder toolbar"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                >
+                  <div
+                    className="RTE-contentEditableContainer"
+                  >
+                    <div
+                      aria-placeholder="Post a comment"
+                      className="RTE-contentEditable coral coral-rte-content RTE-content"
+                      contentEditable={true}
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "",
+                        }
+                      }
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onCut={[Function]}
+                      onFocus={[Function]}
+                      onInput={[Function]}
+                      onKeyDown={[Function]}
+                      onPaste={[Function]}
+                      onSelect={[Function]}
+                    />
+                    <div
+                      aria-hidden="true"
+                      className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
+                    >
+                      Post a comment
+                    </div>
+                  </div>
+                  <div
+                    className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </i>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </i>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
             <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={false}
-              className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+              data-color="primary"
+              data-variant="filled"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
-              role="tab"
-              type="button"
+              type="submit"
             >
-              <div
-                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-              >
-                <span>
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    2
-                  </span>
-                </span>
-              </div>
+              Sign in and Join the Conversation
             </button>
-          </li>
-        </ul>
-        <section
-          aria-labelledby="tab-FEATURED_COMMENTS"
-          className="coral coral-featuredComments"
-          id="tabPane-FEATURED_COMMENTS"
-          role="tabpanel"
+          </div>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
         >
           <div
-            aria-live="polite"
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
-            data-testid="comments-featuredComments-log"
-            id="comments-featuredComments-log"
-            role="log"
+            className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          >
+            <label
+              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+              htmlFor="coral-comments-sortMenu"
+            >
+              Sort By
+            </label>
+            <span
+              className="SelectField-root"
+            >
+              <select
+                className="SelectField-select undefined"
+                id="coral-comments-sortMenu"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                value="CREATED_AT_DESC"
+              >
+                <option
+                  value="CREATED_AT_DESC"
+                >
+                  Newest
+                </option>
+                <option
+                  value="CREATED_AT_ASC"
+                >
+                  Oldest
+                </option>
+                <option
+                  value="REPLIES_DESC"
+                >
+                  Most Replies
+                </option>
+                <option
+                  value="REACTION_DESC"
+                >
+                  Most Respected
+                </option>
+              </select>
+              <span
+                aria-hidden={true}
+                className="SelectField-afterWrapper undefined"
+              >
+                <i
+                  aria-hidden="true"
+                  className="Icon-root Icon-sm"
+                >
+                  expand_more
+                </i>
+              </span>
+            </span>
+          </div>
+          <ul
+            className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
+            role="tablist"
+          >
+            <li
+              className="Tab-root"
+              id="tab-ALL_COMMENTS"
+              role="presentation"
+            >
+              <button
+                aria-controls="tabPane-ALL_COMMENTS"
+                aria-selected={false}
+                className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                role="tab"
+                type="button"
+              >
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+                >
+                  <span>
+                    All Comments
+                  </span>
+                  <span
+                    className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
+                  >
+                    <span
+                      className="Counter-text"
+                    >
+                      2
+                    </span>
+                  </span>
+                </div>
+              </button>
+            </li>
+          </ul>
+          <section
+            aria-labelledby="tab-FEATURED_COMMENTS"
+            className="coral coral-featuredComments"
+            id="tabPane-FEATURED_COMMENTS"
+            role="tabpanel"
           >
             <div
-              className="coral coral-featuredComment FeaturedCommentContainer-root"
-              data-testid="featuredComment-comment-0"
+              aria-live="polite"
+              className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
+              data-testid="comments-featuredComments-log"
+              id="comments-featuredComments-log"
+              role="log"
             >
               <div
-                className="HTMLContent-root coral coral-content coral-featuredComment-content"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
+                className="coral coral-featuredComment FeaturedCommentContainer-root"
+                data-testid="featuredComment-comment-0"
               >
                 <div
-                  className="Popover-root"
+                  className="HTMLContent-root coral coral-content coral-featuredComment-content"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
                 >
+                  <div
+                    className="Popover-root"
+                  >
+                    <button
+                      aria-controls="username-popover-comment-0"
+                      className="BaseButton-root coral coral-username coral-comment-username"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span
+                        className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
+                      >
+                        Markus
+                      </span>
+                    </button>
+                    <div
+                      aria-hidden={true}
+                      aria-labelledby="username-popover-comment-0-ariainfo"
+                      id="username-popover-comment-0"
+                      role="dialog"
+                    >
+                      <div
+                        className="AriaInfo-root"
+                        id="username-popover-comment-0-ariainfo"
+                      >
+                        A popover with more user information
+                      </div>
+                    </div>
+                  </div>
+                  <span
+                    className="Box-root Box-ml-1"
+                  />
                   <button
-                    aria-controls="username-popover"
-                    className="BaseButton-root coral coral-username coral-comment-username"
+                    className="BaseButton-root Timestamp-root"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -323,111 +362,23 @@ exports[`renders comment stream 1`] = `
                     onTouchEnd={[Function]}
                     type="button"
                   >
-                    <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
+                    <time
+                      className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
                     >
-                      Markus
-                    </span>
+                      2018-07-06T18:24:00.000Z
+                    </time>
                   </button>
-                  <div
-                    aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
-                    role="dialog"
-                  >
-                    <div
-                      className="AriaInfo-root"
-                      id="username-popover-ariainfo"
-                    >
-                      A popover with more user information
-                    </div>
-                  </div>
                 </div>
-                <span
-                  className="Box-root Box-ml-1"
-                />
-                <button
-                  className="BaseButton-root Timestamp-root"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <time
-                    className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
-                  >
-                    2018-07-06T18:24:00.000Z
-                  </time>
-                </button>
-              </div>
-              <div
-                className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
-                  data-color="primary"
-                  data-variant="textUnderlined"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Respect
-                  </span>
-                </button>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                >
-                  <div>
-                    <a
-                      className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
-                      href="http://localhost/stories/story-with-featured-comments?commentID=comment-0"
-                      onClick={[Function]}
-                    >
-                      <span>
-                        Go to Conversation
-                      </span>
-                      <span
-                        className="FeaturedCommentContainer-gotoArrow"
-                      >
-                        &gt;
-                      </span>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="coral coral-featuredComment FeaturedCommentContainer-root"
-              data-testid="featuredComment-comment-1"
-            >
-              <div
-                className="HTMLContent-root coral coral-content coral-featuredComment-content"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
-              >
-                <div
-                  className="Popover-root"
+                  className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
                 >
                   <button
-                    aria-controls="username-popover"
-                    className="BaseButton-root coral coral-username coral-comment-username"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
+                    data-color="primary"
+                    data-variant="textUnderlined"
+                    disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -436,94 +387,150 @@ exports[`renders comment stream 1`] = `
                     onTouchEnd={[Function]}
                     type="button"
                   >
-                    <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
-                    >
-                      Lukas
+                    <span>
+                      Respect
                     </span>
                   </button>
                   <div
-                    aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
-                    role="dialog"
+                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
                   >
-                    <div
-                      className="AriaInfo-root"
-                      id="username-popover-ariainfo"
-                    >
-                      A popover with more user information
+                    <div>
+                      <a
+                        className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
+                        href="http://localhost/stories/story-with-featured-comments?commentID=comment-0"
+                        onClick={[Function]}
+                      >
+                        <span>
+                          Go to Conversation
+                        </span>
+                        <span
+                          className="FeaturedCommentContainer-gotoArrow"
+                        >
+                          &gt;
+                        </span>
+                      </a>
                     </div>
                   </div>
                 </div>
-                <span
-                  className="Box-root Box-ml-1"
-                />
-                <button
-                  className="BaseButton-root Timestamp-root"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <time
-                    className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
-                  >
-                    2018-07-06T18:24:00.000Z
-                  </time>
-                </button>
               </div>
               <div
-                className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
+                className="coral coral-featuredComment FeaturedCommentContainer-root"
+                data-testid="featuredComment-comment-1"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
-                  data-color="primary"
-                  data-variant="textUnderlined"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Respect
-                  </span>
-                </button>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                  className="HTMLContent-root coral coral-content coral-featuredComment-content"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
                 >
-                  <div>
-                    <a
-                      className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
-                      href="http://localhost/stories/story-with-featured-comments?commentID=comment-1"
+                  <div
+                    className="Popover-root"
+                  >
+                    <button
+                      aria-controls="username-popover-comment-1"
+                      className="BaseButton-root coral coral-username coral-comment-username"
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      <span>
-                        Go to Conversation
-                      </span>
                       <span
-                        className="FeaturedCommentContainer-gotoArrow"
+                        className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                       >
-                        &gt;
+                        Lukas
                       </span>
-                    </a>
+                    </button>
+                    <div
+                      aria-hidden={true}
+                      aria-labelledby="username-popover-comment-1-ariainfo"
+                      id="username-popover-comment-1"
+                      role="dialog"
+                    >
+                      <div
+                        className="AriaInfo-root"
+                        id="username-popover-comment-1-ariainfo"
+                      >
+                        A popover with more user information
+                      </div>
+                    </div>
+                  </div>
+                  <span
+                    className="Box-root Box-ml-1"
+                  />
+                  <button
+                    className="BaseButton-root Timestamp-root"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <time
+                      className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </button>
+                </div>
+                <div
+                  className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
+                >
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
+                    data-color="primary"
+                    data-variant="textUnderlined"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Respect
+                    </span>
+                  </button>
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                  >
+                    <div>
+                      <a
+                        className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
+                        href="http://localhost/stories/story-with-featured-comments?commentID=comment-1"
+                        onClick={[Function]}
+                      >
+                        <span>
+                          Go to Conversation
+                        </span>
+                        <span
+                          className="FeaturedCommentContainer-gotoArrow"
+                        >
+                          &gt;
+                        </span>
+                      </a>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </main>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
index b5f9e2762..b0abd70c6 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
@@ -134,7 +134,7 @@ exports[`renders permalink view 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-1"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -152,13 +152,13 @@ exports[`renders permalink view 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-1-ariainfo"
+                                id="username-popover-comment-1"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-1-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
@@ -362,7 +362,7 @@ exports[`renders permalink view 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-2"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -380,13 +380,13 @@ exports[`renders permalink view 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-2-ariainfo"
+                                id="username-popover-comment-2"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-2-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
@@ -588,7 +588,7 @@ exports[`renders permalink view 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-with-replies"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -606,13 +606,13 @@ exports[`renders permalink view 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-with-replies-ariainfo"
+                                id="username-popover-comment-with-replies"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-with-replies-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
@@ -810,7 +810,7 @@ exports[`renders permalink view 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-3"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -828,13 +828,13 @@ exports[`renders permalink view 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-3-ariainfo"
+                                id="username-popover-comment-3"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-3-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
@@ -1048,7 +1048,7 @@ exports[`renders permalink view 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-4"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -1066,13 +1066,13 @@ exports[`renders permalink view 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-4-ariainfo"
+                                id="username-popover-comment-4"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-4-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
index 289285596..9e9fe76ac 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -175,7 +175,7 @@ exports[`renders conversation thread 1`] = `
                         className="Popover-root"
                       >
                         <button
-                          aria-controls="username-popover"
+                          aria-controls="username-popover-comment-0"
                           className="BaseButton-root coral coral-username coral-comment-username"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -193,13 +193,13 @@ exports[`renders conversation thread 1`] = `
                         </button>
                         <div
                           aria-hidden={true}
-                          aria-labelledby="username-popover-ariainfo"
-                          id="username-popover"
+                          aria-labelledby="username-popover-comment-0-ariainfo"
+                          id="username-popover-comment-0"
                           role="dialog"
                         >
                           <div
                             className="AriaInfo-root"
-                            id="username-popover-ariainfo"
+                            id="username-popover-comment-0-ariainfo"
                           >
                             A popover with more user information
                           </div>
@@ -416,7 +416,7 @@ exports[`shows more of this conversation 1`] = `
                         className="Popover-root"
                       >
                         <button
-                          aria-controls="username-popover"
+                          aria-controls="username-popover-comment-1"
                           className="BaseButton-root coral coral-username coral-comment-username"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -434,13 +434,13 @@ exports[`shows more of this conversation 1`] = `
                         </button>
                         <div
                           aria-hidden={true}
-                          aria-labelledby="username-popover-ariainfo"
-                          id="username-popover"
+                          aria-labelledby="username-popover-comment-1-ariainfo"
+                          id="username-popover-comment-1"
                           role="dialog"
                         >
                           <div
                             className="AriaInfo-root"
-                            id="username-popover-ariainfo"
+                            id="username-popover-comment-1-ariainfo"
                           >
                             A popover with more user information
                           </div>
@@ -644,7 +644,7 @@ exports[`shows more of this conversation 1`] = `
                         className="Popover-root"
                       >
                         <button
-                          aria-controls="username-popover"
+                          aria-controls="username-popover-comment-from-staff-0"
                           className="BaseButton-root coral coral-username coral-comment-username"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -662,13 +662,13 @@ exports[`shows more of this conversation 1`] = `
                         </button>
                         <div
                           aria-hidden={true}
-                          aria-labelledby="username-popover-ariainfo"
-                          id="username-popover"
+                          aria-labelledby="username-popover-comment-from-staff-0-ariainfo"
+                          id="username-popover-comment-from-staff-0"
                           role="dialog"
                         >
                           <div
                             className="AriaInfo-root"
-                            id="username-popover-ariainfo"
+                            id="username-popover-comment-from-staff-0-ariainfo"
                           >
                             A popover with more user information
                           </div>
@@ -875,7 +875,7 @@ exports[`shows more of this conversation 1`] = `
                         className="Popover-root"
                       >
                         <button
-                          aria-controls="username-popover"
+                          aria-controls="username-popover-comment-0"
                           className="BaseButton-root coral coral-username coral-comment-username"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -893,13 +893,13 @@ exports[`shows more of this conversation 1`] = `
                         </button>
                         <div
                           aria-hidden={true}
-                          aria-labelledby="username-popover-ariainfo"
-                          id="username-popover"
+                          aria-labelledby="username-popover-comment-0-ariainfo"
+                          id="username-popover-comment-0"
                           role="dialog"
                         >
                           <div
                             className="AriaInfo-root"
-                            id="username-popover-ariainfo"
+                            id="username-popover-comment-0-ariainfo"
                           >
                             A popover with more user information
                           </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
index 082d16f60..c6b5fb2a0 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`cancel edit 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-with-replies"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -49,13 +49,13 @@ exports[`cancel edit 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-with-replies-ariainfo"
+                    id="username-popover-comment-with-replies"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-with-replies-ariainfo"
                     >
                       A popover with more user information
                     </div>
@@ -845,7 +845,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-with-replies"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -863,13 +863,13 @@ exports[`edit a comment: render comment with edit button 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-with-replies-ariainfo"
+                    id="username-popover-comment-with-replies"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-with-replies-ariainfo"
                     >
                       A popover with more user information
                     </div>
@@ -1089,7 +1089,7 @@ exports[`edit a comment: server response 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-with-replies"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1107,13 +1107,13 @@ exports[`edit a comment: server response 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-with-replies-ariainfo"
+                    id="username-popover-comment-with-replies"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-with-replies-ariainfo"
                     >
                       A popover with more user information
                     </div>
@@ -1342,7 +1342,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-with-replies"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1360,13 +1360,13 @@ exports[`shows expiry message: edit form closed 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-with-replies-ariainfo"
+                    id="username-popover-comment-with-replies"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-with-replies-ariainfo"
                     >
                       A popover with more user information
                     </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
index 623554754..6a179dbab 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`renders comment stream with load more button 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-0"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -59,13 +59,13 @@ exports[`renders comment stream with load more button 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-0-ariainfo"
+                        id="username-popover-comment-0"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-0-ariainfo"
                         >
                           A popover with more user information
                         </div>
@@ -252,7 +252,7 @@ exports[`renders comment stream with load more button 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-1"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -270,13 +270,13 @@ exports[`renders comment stream with load more button 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-1-ariainfo"
+                        id="username-popover-comment-1"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-1-ariainfo"
                         >
                           A popover with more user information
                         </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
index e84160728..ed330a840 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`post a comment: optimistic response 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-uuid-0"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -49,13 +49,13 @@ exports[`post a comment: optimistic response 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-uuid-0-ariainfo"
+                    id="username-popover-uuid-0"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-uuid-0-ariainfo"
                     >
                       A popover with more user information
                     </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
index 602a35a57..1b34daf7e 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`post a reply: open reply form 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-with-deepest-replies-5"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -49,13 +49,13 @@ exports[`post a reply: open reply form 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-with-deepest-replies-5-ariainfo"
+                    id="username-popover-comment-with-deepest-replies-5"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-with-deepest-replies-5-ariainfo"
                     >
                       A popover with more user information
                     </div>
@@ -476,7 +476,7 @@ exports[`post a reply: optimistic response 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-uuid-0"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -494,13 +494,13 @@ exports[`post a reply: optimistic response 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-uuid-0-ariainfo"
+                        id="username-popover-uuid-0"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-uuid-0-ariainfo"
                         >
                           A popover with more user information
                         </div>
@@ -740,7 +740,7 @@ exports[`renders comment stream 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-with-deepest-replies"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -758,13 +758,13 @@ exports[`renders comment stream 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-with-deepest-replies-ariainfo"
+                        id="username-popover-comment-with-deepest-replies"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-with-deepest-replies-ariainfo"
                         >
                           A popover with more user information
                         </div>
@@ -975,7 +975,7 @@ exports[`renders comment stream 1`] = `
                           className="Popover-root"
                         >
                           <button
-                            aria-controls="username-popover"
+                            aria-controls="username-popover-comment-with-deepest-replies-1"
                             className="BaseButton-root coral coral-username coral-comment-username"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -993,13 +993,13 @@ exports[`renders comment stream 1`] = `
                           </button>
                           <div
                             aria-hidden={true}
-                            aria-labelledby="username-popover-ariainfo"
-                            id="username-popover"
+                            aria-labelledby="username-popover-comment-with-deepest-replies-1-ariainfo"
+                            id="username-popover-comment-with-deepest-replies-1"
                             role="dialog"
                           >
                             <div
                               className="AriaInfo-root"
-                              id="username-popover-ariainfo"
+                              id="username-popover-comment-with-deepest-replies-1-ariainfo"
                             >
                               A popover with more user information
                             </div>
@@ -1237,7 +1237,7 @@ exports[`renders comment stream 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-with-deepest-replies-2"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -1255,13 +1255,13 @@ exports[`renders comment stream 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-with-deepest-replies-2-ariainfo"
+                                id="username-popover-comment-with-deepest-replies-2"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-with-deepest-replies-2-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
@@ -1499,7 +1499,7 @@ exports[`renders comment stream 1`] = `
                                   className="Popover-root"
                                 >
                                   <button
-                                    aria-controls="username-popover"
+                                    aria-controls="username-popover-comment-with-deepest-replies-3"
                                     className="BaseButton-root coral coral-username coral-comment-username"
                                     onBlur={[Function]}
                                     onClick={[Function]}
@@ -1517,13 +1517,13 @@ exports[`renders comment stream 1`] = `
                                   </button>
                                   <div
                                     aria-hidden={true}
-                                    aria-labelledby="username-popover-ariainfo"
-                                    id="username-popover"
+                                    aria-labelledby="username-popover-comment-with-deepest-replies-3-ariainfo"
+                                    id="username-popover-comment-with-deepest-replies-3"
                                     role="dialog"
                                   >
                                     <div
                                       className="AriaInfo-root"
-                                      id="username-popover-ariainfo"
+                                      id="username-popover-comment-with-deepest-replies-3-ariainfo"
                                     >
                                       A popover with more user information
                                     </div>
@@ -1761,7 +1761,7 @@ exports[`renders comment stream 1`] = `
                                       className="Popover-root"
                                     >
                                       <button
-                                        aria-controls="username-popover"
+                                        aria-controls="username-popover-comment-with-deepest-replies-4"
                                         className="BaseButton-root coral coral-username coral-comment-username"
                                         onBlur={[Function]}
                                         onClick={[Function]}
@@ -1779,13 +1779,13 @@ exports[`renders comment stream 1`] = `
                                       </button>
                                       <div
                                         aria-hidden={true}
-                                        aria-labelledby="username-popover-ariainfo"
-                                        id="username-popover"
+                                        aria-labelledby="username-popover-comment-with-deepest-replies-4-ariainfo"
+                                        id="username-popover-comment-with-deepest-replies-4"
                                         role="dialog"
                                       >
                                         <div
                                           className="AriaInfo-root"
-                                          id="username-popover-ariainfo"
+                                          id="username-popover-comment-with-deepest-replies-4-ariainfo"
                                         >
                                           A popover with more user information
                                         </div>
@@ -2023,7 +2023,7 @@ exports[`renders comment stream 1`] = `
                                           className="Popover-root"
                                         >
                                           <button
-                                            aria-controls="username-popover"
+                                            aria-controls="username-popover-comment-with-deepest-replies-5"
                                             className="BaseButton-root coral coral-username coral-comment-username"
                                             onBlur={[Function]}
                                             onClick={[Function]}
@@ -2041,13 +2041,13 @@ exports[`renders comment stream 1`] = `
                                           </button>
                                           <div
                                             aria-hidden={true}
-                                            aria-labelledby="username-popover-ariainfo"
-                                            id="username-popover"
+                                            aria-labelledby="username-popover-comment-with-deepest-replies-5-ariainfo"
+                                            id="username-popover-comment-with-deepest-replies-5"
                                             role="dialog"
                                           >
                                             <div
                                               className="AriaInfo-root"
-                                              id="username-popover-ariainfo"
+                                              id="username-popover-comment-with-deepest-replies-5-ariainfo"
                                             >
                                               A popover with more user information
                                             </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
index 8d1c17df2..0679a304b 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`post a reply: open reply form 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-0"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -49,13 +49,13 @@ exports[`post a reply: open reply form 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-0-ariainfo"
+                    id="username-popover-comment-0"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-0-ariainfo"
                     >
                       A popover with more user information
                     </div>
@@ -432,7 +432,7 @@ exports[`post a reply: optimistic response 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-uuid-0"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -450,13 +450,13 @@ exports[`post a reply: optimistic response 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-uuid-0-ariainfo"
+                        id="username-popover-uuid-0"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-uuid-0-ariainfo"
                         >
                           A popover with more user information
                         </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
index 1d17e7490..a2a02456b 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
@@ -64,9 +64,7 @@ exports[`renders comment stream with community guidelines 1`] = `
       <div
         className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
       >
-        <div
-          aria-hidden="true"
-        >
+        <div>
           <div>
             <div
               className="$root content placeholder toolbar"
@@ -311,7 +309,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-0"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -329,13 +327,13 @@ exports[`renders comment stream with community guidelines 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-0-ariainfo"
+                                id="username-popover-comment-0"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-0-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
@@ -522,7 +520,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                               className="Popover-root"
                             >
                               <button
-                                aria-controls="username-popover"
+                                aria-controls="username-popover-comment-1"
                                 className="BaseButton-root coral coral-username coral-comment-username"
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -540,13 +538,13 @@ exports[`renders comment stream with community guidelines 1`] = `
                               </button>
                               <div
                                 aria-hidden={true}
-                                aria-labelledby="username-popover-ariainfo"
-                                id="username-popover"
+                                aria-labelledby="username-popover-comment-1-ariainfo"
+                                id="username-popover-comment-1"
                                 role="dialog"
                               >
                                 <div
                                   className="AriaInfo-root"
-                                  id="username-popover-ariainfo"
+                                  id="username-popover-comment-1-ariainfo"
                                 >
                                   A popover with more user information
                                 </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
index 8847ea661..dd1c3171f 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -601,9 +601,7 @@ exports[`renders message box when not logged in 1`] = `
       <div
         className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
       >
-        <div
-          aria-hidden="true"
-        >
+        <div>
           <div>
             <div
               className="$root content placeholder toolbar"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
index aaa390f16..ff9f73418 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`renders reply list 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-with-replies"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -58,13 +58,13 @@ exports[`renders reply list 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-with-replies-ariainfo"
+                        id="username-popover-comment-with-replies"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-with-replies-ariainfo"
                         >
                           A popover with more user information
                         </div>
@@ -283,7 +283,7 @@ exports[`renders reply list 1`] = `
                           className="Popover-root"
                         >
                           <button
-                            aria-controls="username-popover"
+                            aria-controls="username-popover-comment-3"
                             className="BaseButton-root coral coral-username coral-comment-username"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -301,13 +301,13 @@ exports[`renders reply list 1`] = `
                           </button>
                           <div
                             aria-hidden={true}
-                            aria-labelledby="username-popover-ariainfo"
-                            id="username-popover"
+                            aria-labelledby="username-popover-comment-3-ariainfo"
+                            id="username-popover-comment-3"
                             role="dialog"
                           >
                             <div
                               className="AriaInfo-root"
-                              id="username-popover-ariainfo"
+                              id="username-popover-comment-3-ariainfo"
                             >
                               A popover with more user information
                             </div>
@@ -521,7 +521,7 @@ exports[`renders reply list 1`] = `
                           className="Popover-root"
                         >
                           <button
-                            aria-controls="username-popover"
+                            aria-controls="username-popover-comment-4"
                             className="BaseButton-root coral coral-username coral-comment-username"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -539,13 +539,13 @@ exports[`renders reply list 1`] = `
                           </button>
                           <div
                             aria-hidden={true}
-                            aria-labelledby="username-popover-ariainfo"
-                            id="username-popover"
+                            aria-labelledby="username-popover-comment-4-ariainfo"
+                            id="username-popover-comment-4"
                             role="dialog"
                           >
                             <div
                               className="AriaInfo-root"
-                              id="username-popover-ariainfo"
+                              id="username-popover-comment-4-ariainfo"
                             >
                               A popover with more user information
                             </div>
@@ -761,7 +761,7 @@ exports[`renders reply list 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-5"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -779,13 +779,13 @@ exports[`renders reply list 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-5-ariainfo"
+                        id="username-popover-comment-5"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-5-ariainfo"
                         >
                           A popover with more user information
                         </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
index 40a10878c..297c368b5 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -4,331 +4,371 @@ exports[`renders comment stream 1`] = `
 <div
   className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
 >
-  <ul
-    className="TabBar-root TabBar-primary coral coral-tabBar"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+  <nav>
+    <h2
+      className="AriaInfo-root"
     >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent coral coral-comments"
-    data-testid="current-tab-pane"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="Box-root HorizontalGutter-root StreamContainer-root coral coral-unauthenticated HorizontalGutter-double"
+      Navigation
+    </h2>
+    <ul
+      className="TabBar-root TabBar-primary coral coral-tabBar"
+      role="tablist"
     >
-      <div
-        className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+      <li
+        className="Tab-root"
+        id="tab-COMMENTS"
+        role="presentation"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
-          data-color="primary"
-          data-variant="underlined"
+          aria-controls="tabPane-COMMENTS"
+          aria-selected={true}
+          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
           onTouchEnd={[Function]}
+          role="tab"
           type="button"
         >
-          Sign in
+          <span>
+            Comments
+          </span>
         </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
-          data-color="primary"
-          data-variant="outlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <section
+      aria-labelledby="tab-COMMENTS"
+      className="App-tabContent coral coral-comments"
+      data-testid="current-tab-pane"
+      id="tabPane-COMMENTS"
+      role="tabpanel"
+    >
       <div
-        className="coral coral-createComment"
+        className="Box-root HorizontalGutter-root StreamContainer-root coral coral-unauthenticated HorizontalGutter-double"
       >
         <div
-          className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
         >
-          <div
-            aria-hidden="true"
-          >
-            <div>
-              <div
-                className="$root content placeholder toolbar"
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  className="RTE-contentEditableContainer"
-                >
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable coral coral-rte-content RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                </div>
-                <div
-                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </i>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </i>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </i>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
             data-color="primary"
-            data-variant="filled"
+            data-variant="underlined"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
-            type="submit"
+            type="button"
           >
-            Sign in and Join the Conversation
+            Sign in
+          </button>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
+            data-color="primary"
+            data-variant="outlined"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Register
           </button>
         </div>
-      </div>
-      <div
-        className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
-      >
         <div
-          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          className="coral coral-createComment"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
-          >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              value="CREATED_AT_DESC"
-            >
-              <option
-                value="CREATED_AT_DESC"
-              >
-                Newest
-              </option>
-              <option
-                value="CREATED_AT_ASC"
-              >
-                Oldest
-              </option>
-              <option
-                value="REPLIES_DESC"
-              >
-                Most Replies
-              </option>
-              <option
-                value="REACTION_DESC"
-              >
-                Most Respected
-              </option>
-            </select>
-            <span
-              aria-hidden={true}
-              className="SelectField-afterWrapper undefined"
-            >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
-          </span>
-        </div>
-        <ul
-          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
-        >
-          <li
-            className="Tab-root"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
+          <div
+            className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
           >
+            <div>
+              <div>
+                <div
+                  className="$root content placeholder toolbar"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                >
+                  <div
+                    className="RTE-contentEditableContainer"
+                  >
+                    <div
+                      aria-placeholder="Post a comment"
+                      className="RTE-contentEditable coral coral-rte-content RTE-content"
+                      contentEditable={true}
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "",
+                        }
+                      }
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onCut={[Function]}
+                      onFocus={[Function]}
+                      onInput={[Function]}
+                      onKeyDown={[Function]}
+                      onPaste={[Function]}
+                      onSelect={[Function]}
+                    />
+                    <div
+                      aria-hidden="true"
+                      className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
+                    >
+                      Post a comment
+                    </div>
+                  </div>
+                  <div
+                    className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </i>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </i>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
             <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+              data-color="primary"
+              data-variant="filled"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
-              role="tab"
-              type="button"
+              type="submit"
             >
-              <div
-                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-              >
-                <span>
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    2
-                  </span>
-                </span>
-              </div>
+              Sign in and Join the Conversation
             </button>
-          </li>
-        </ul>
-        <section
-          aria-labelledby="tab-ALL_COMMENTS"
-          className="coral coral-allComments"
-          id="tabPane-ALL_COMMENTS"
-          role="tabpanel"
+          </div>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
         >
           <div
-            aria-live="polite"
-            className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
-            data-testid="comments-allComments-log"
-            id="comments-allComments-log"
-            role="log"
+            className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          >
+            <label
+              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+              htmlFor="coral-comments-sortMenu"
+            >
+              Sort By
+            </label>
+            <span
+              className="SelectField-root"
+            >
+              <select
+                className="SelectField-select undefined"
+                id="coral-comments-sortMenu"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                value="CREATED_AT_DESC"
+              >
+                <option
+                  value="CREATED_AT_DESC"
+                >
+                  Newest
+                </option>
+                <option
+                  value="CREATED_AT_ASC"
+                >
+                  Oldest
+                </option>
+                <option
+                  value="REPLIES_DESC"
+                >
+                  Most Replies
+                </option>
+                <option
+                  value="REACTION_DESC"
+                >
+                  Most Respected
+                </option>
+              </select>
+              <span
+                aria-hidden={true}
+                className="SelectField-afterWrapper undefined"
+              >
+                <i
+                  aria-hidden="true"
+                  className="Icon-root Icon-sm"
+                >
+                  expand_more
+                </i>
+              </span>
+            </span>
+          </div>
+          <ul
+            className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
+            role="tablist"
+          >
+            <li
+              className="Tab-root"
+              id="tab-ALL_COMMENTS"
+              role="presentation"
+            >
+              <button
+                aria-controls="tabPane-ALL_COMMENTS"
+                aria-selected={true}
+                className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                role="tab"
+                type="button"
+              >
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+                >
+                  <span>
+                    All Comments
+                  </span>
+                  <span
+                    className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                  >
+                    <span
+                      className="Counter-text"
+                    >
+                      2
+                    </span>
+                  </span>
+                </div>
+              </button>
+            </li>
+          </ul>
+          <section
+            aria-labelledby="tab-ALL_COMMENTS"
+            className="coral coral-allComments"
+            id="tabPane-ALL_COMMENTS"
+            role="tabpanel"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              aria-live="polite"
+              className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
+              data-testid="comments-allComments-log"
+              id="comments-allComments-log"
+              role="log"
             >
               <div
-                className="coral coral-comment"
-                data-testid="comment-comment-0"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  className="coral coral-comment"
+                  data-testid="comment-comment-0"
                 >
                   <div
-                    className="Indent-root"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
                   >
                     <div
-                      className=""
+                      className="Indent-root"
                     >
                       <div
-                        className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
-                        role="article"
+                        className=""
                       >
                         <div
-                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
+                          role="article"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                            className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                             >
                               <div
-                                className="Popover-root"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              >
+                                <div
+                                  className="Popover-root"
+                                >
+                                  <button
+                                    aria-controls="username-popover-comment-0"
+                                    className="BaseButton-root coral coral-username coral-comment-username"
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
+                                    >
+                                      Markus
+                                    </span>
+                                  </button>
+                                  <div
+                                    aria-hidden={true}
+                                    aria-labelledby="username-popover-comment-0-ariainfo"
+                                    id="username-popover-comment-0"
+                                    role="dialog"
+                                  >
+                                    <div
+                                      className="AriaInfo-root"
+                                      id="username-popover-comment-0-ariainfo"
+                                    >
+                                      A popover with more user information
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                               >
                                 <button
-                                  aria-controls="username-popover"
-                                  className="BaseButton-root coral coral-username coral-comment-username"
+                                  className="BaseButton-root Timestamp-root"
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -337,118 +377,44 @@ exports[`renders comment stream 1`] = `
                                   onTouchEnd={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
+                                  <time
+                                    className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
+                                    dateTime="2018-07-06T18:24:00.000Z"
+                                    title="2018-07-06T18:24:00.000Z"
                                   >
-                                    Markus
-                                  </span>
+                                    2018-07-06T18:24:00.000Z
+                                  </time>
                                 </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="username-popover-ariainfo"
-                                  id="username-popover"
-                                  role="dialog"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="username-popover-ariainfo"
-                                  >
-                                    A popover with more user information
-                                  </div>
-                                </div>
                               </div>
                             </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
-                            >
-                              <button
-                                className="BaseButton-root Timestamp-root"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <time
-                                  className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
-                                  dateTime="2018-07-06T18:24:00.000Z"
-                                  title="2018-07-06T18:24:00.000Z"
-                                >
-                                  2018-07-06T18:24:00.000Z
-                                </time>
-                              </button>
+                            <div>
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                              />
                             </div>
                           </div>
-                          <div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
-                            />
-                          </div>
-                        </div>
-                        <div
-                          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-                        >
                           <div
-                            className="HTMLContent-root coral coral-content coral-comment-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "Joining Too",
-                              }
-                            }
-                          />
-                          <div
-                            className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
+                            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              className="HTMLContent-root coral coral-content coral-comment-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "Joining Too",
+                                }
+                              }
+                            />
+                            <div
+                              className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                             >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
-                                data-color="primary"
-                                data-variant="textUnderlined"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
-                                data-active={false}
-                                data-color="primary"
-                                data-variant="textUnderlined"
-                                disabled={false}
-                                id="comments-commentContainer-replyButton-comment-0"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
                               <div
-                                className="Popover-root"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                               >
                                 <button
-                                  aria-controls="permalink-popover-comment-0"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
-                                  data-active={false}
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
                                   data-color="primary"
                                   data-variant="textUnderlined"
+                                  disabled={false}
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -458,213 +424,16 @@ exports[`renders comment stream 1`] = `
                                   type="button"
                                 >
                                   <span>
-                                    Share
+                                    Respect
                                   </span>
                                 </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-0-ariainfo"
-                                  id="permalink-popover-comment-0"
-                                  role="dialog"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-0-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
-                                data-color="error"
-                                data-variant="textUnderlined"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Report
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="coral coral-comment"
-                data-testid="comment-comment-from-staff-0"
-              >
-                <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="Indent-root"
-                  >
-                    <div
-                      className=""
-                    >
-                      <div
-                        className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
-                        role="article"
-                      >
-                        <div
-                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        >
-                          <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
-                          >
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
-                            >
-                              <div
-                                className="Popover-root"
-                              >
                                 <button
-                                  aria-controls="username-popover"
-                                  className="BaseButton-root coral coral-username coral-comment-username"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span
-                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
-                                  >
-                                    Moderator
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="username-popover-ariainfo"
-                                  id="username-popover"
-                                  role="dialog"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="username-popover-ariainfo"
-                                  >
-                                    A popover with more user information
-                                  </div>
-                                </div>
-                              </div>
-                              <span
-                                className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey Tag-uppercase"
-                              >
-                                Staff
-                              </span>
-                            </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
-                            >
-                              <button
-                                className="BaseButton-root Timestamp-root"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <time
-                                  className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
-                                  dateTime="2018-07-06T18:24:00.000Z"
-                                  title="2018-07-06T18:24:00.000Z"
-                                >
-                                  2018-07-06T18:24:00.000Z
-                                </time>
-                              </button>
-                            </div>
-                          </div>
-                          <div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
-                            />
-                          </div>
-                        </div>
-                        <div
-                          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-                        >
-                          <div
-                            className="HTMLContent-root coral coral-content coral-comment-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "Joining Too",
-                              }
-                            }
-                          />
-                          <div
-                            className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
-                          >
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
-                                data-color="primary"
-                                data-variant="textUnderlined"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
-                                data-active={false}
-                                data-color="primary"
-                                data-variant="textUnderlined"
-                                disabled={false}
-                                id="comments-commentContainer-replyButton-comment-from-staff-0"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-from-staff-0"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                                   data-active={false}
                                   data-color="primary"
                                   data-variant="textUnderlined"
+                                  disabled={false}
+                                  id="comments-commentContainer-replyButton-comment-0"
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -674,44 +443,282 @@ exports[`renders comment stream 1`] = `
                                   type="button"
                                 >
                                   <span>
-                                    Share
+                                    Reply
                                   </span>
                                 </button>
                                 <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-from-staff-0-ariainfo"
-                                  id="permalink-popover-comment-from-staff-0"
-                                  role="dialog"
+                                  className="Popover-root"
                                 >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-from-staff-0-ariainfo"
+                                  <button
+                                    aria-controls="permalink-popover-comment-0"
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
+                                    data-active={false}
+                                    data-color="primary"
+                                    data-variant="textUnderlined"
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
                                   >
-                                    A dialog showing a permalink to the comment
+                                    <span>
+                                      Share
+                                    </span>
+                                  </button>
+                                  <div
+                                    aria-hidden={true}
+                                    aria-labelledby="permalink-popover-comment-0-ariainfo"
+                                    id="permalink-popover-comment-0"
+                                    role="dialog"
+                                  >
+                                    <div
+                                      className="AriaInfo-root"
+                                      id="permalink-popover-comment-0-ariainfo"
+                                    >
+                                      A dialog showing a permalink to the comment
+                                    </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
-                                data-color="error"
-                                data-variant="textUnderlined"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                               >
-                                <span>
-                                  Report
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                                  data-color="error"
+                                  data-variant="textUnderlined"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Report
+                                  </span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="coral coral-comment"
+                  data-testid="comment-comment-from-staff-0"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <div
+                      className="Indent-root"
+                    >
+                      <div
+                        className=""
+                      >
+                        <div
+                          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
+                          role="article"
+                        >
+                          <div
+                            className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          >
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                            >
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              >
+                                <div
+                                  className="Popover-root"
+                                >
+                                  <button
+                                    aria-controls="username-popover-comment-from-staff-0"
+                                    className="BaseButton-root coral coral-username coral-comment-username"
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
+                                    >
+                                      Moderator
+                                    </span>
+                                  </button>
+                                  <div
+                                    aria-hidden={true}
+                                    aria-labelledby="username-popover-comment-from-staff-0-ariainfo"
+                                    id="username-popover-comment-from-staff-0"
+                                    role="dialog"
+                                  >
+                                    <div
+                                      className="AriaInfo-root"
+                                      id="username-popover-comment-from-staff-0-ariainfo"
+                                    >
+                                      A popover with more user information
+                                    </div>
+                                  </div>
+                                </div>
+                                <span
+                                  className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey Tag-uppercase"
+                                >
+                                  Staff
                                 </span>
-                              </button>
+                              </div>
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                              >
+                                <button
+                                  className="BaseButton-root Timestamp-root"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <time
+                                    className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
+                                    dateTime="2018-07-06T18:24:00.000Z"
+                                    title="2018-07-06T18:24:00.000Z"
+                                  >
+                                    2018-07-06T18:24:00.000Z
+                                  </time>
+                                </button>
+                              </div>
+                            </div>
+                            <div>
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+                          >
+                            <div
+                              className="HTMLContent-root coral coral-content coral-comment-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "Joining Too",
+                                }
+                              }
+                            />
+                            <div
+                              className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
+                            >
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              >
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                                  data-color="primary"
+                                  data-variant="textUnderlined"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Respect
+                                  </span>
+                                </button>
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
+                                  data-active={false}
+                                  data-color="primary"
+                                  data-variant="textUnderlined"
+                                  disabled={false}
+                                  id="comments-commentContainer-replyButton-comment-from-staff-0"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Reply
+                                  </span>
+                                </button>
+                                <div
+                                  className="Popover-root"
+                                >
+                                  <button
+                                    aria-controls="permalink-popover-comment-from-staff-0"
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
+                                    data-active={false}
+                                    data-color="primary"
+                                    data-variant="textUnderlined"
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
+                                  >
+                                    <span>
+                                      Share
+                                    </span>
+                                  </button>
+                                  <div
+                                    aria-hidden={true}
+                                    aria-labelledby="permalink-popover-comment-from-staff-0-ariainfo"
+                                    id="permalink-popover-comment-from-staff-0"
+                                    role="dialog"
+                                  >
+                                    <div
+                                      className="AriaInfo-root"
+                                      id="permalink-popover-comment-from-staff-0-ariainfo"
+                                    >
+                                      A dialog showing a permalink to the comment
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              >
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                                  data-color="error"
+                                  data-variant="textUnderlined"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Report
+                                  </span>
+                                </button>
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -721,10 +728,10 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </main>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
index 15891d18b..587e0f359 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`renders comment stream 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-1"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -58,13 +58,13 @@ exports[`renders comment stream 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-1-ariainfo"
+                        id="username-popover-comment-1"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-1-ariainfo"
                         >
                           A popover with more user information
                         </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
index bf6bdd9d9..0b1f1601f 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`renders deepest comment with link 1`] = `
                   className="Popover-root"
                 >
                   <button
-                    aria-controls="username-popover"
+                    aria-controls="username-popover-comment-with-deepest-replies-5"
                     className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -49,13 +49,13 @@ exports[`renders deepest comment with link 1`] = `
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-labelledby="username-popover-ariainfo"
-                    id="username-popover"
+                    aria-labelledby="username-popover-comment-with-deepest-replies-5-ariainfo"
+                    id="username-popover-comment-with-deepest-replies-5"
                     role="dialog"
                   >
                     <div
                       className="AriaInfo-root"
-                      id="username-popover-ariainfo"
+                      id="username-popover-comment-with-deepest-replies-5-ariainfo"
                     >
                       A popover with more user information
                     </div>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
index 6b89d9210..dd0d89d57 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`renders app with comment stream 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-2"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -59,13 +59,13 @@ exports[`renders app with comment stream 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-2-ariainfo"
+                        id="username-popover-comment-2"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-2-ariainfo"
                         >
                           A popover with more user information
                         </div>
@@ -252,7 +252,7 @@ exports[`renders app with comment stream 1`] = `
                       className="Popover-root"
                     >
                       <button
-                        aria-controls="username-popover"
+                        aria-controls="username-popover-comment-3"
                         className="BaseButton-root coral coral-username coral-comment-username"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -270,13 +270,13 @@ exports[`renders app with comment stream 1`] = `
                       </button>
                       <div
                         aria-hidden={true}
-                        aria-labelledby="username-popover-ariainfo"
-                        id="username-popover"
+                        aria-labelledby="username-popover-comment-3-ariainfo"
+                        id="username-popover-comment-3"
                         role="dialog"
                       >
                         <div
                           className="AriaInfo-root"
-                          id="username-popover-ariainfo"
+                          id="username-popover-comment-3-ariainfo"
                         >
                           A popover with more user information
                         </div>
diff --git a/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
index f2b7078db..a626efee9 100644
--- a/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
@@ -4,407 +4,454 @@ exports[`renders the empty settings pane 1`] = `
 <div
   className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
 >
-  <ul
-    className="TabBar-root TabBar-primary coral coral-tabBar"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+  <nav>
+    <h2
+      className="AriaInfo-root"
     >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-tab coral-tabBar-comments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
+      Navigation
+    </h2>
+    <ul
+      className="TabBar-root TabBar-primary coral coral-tabBar"
+      role="tablist"
     >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-myProfile"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
+      <li
+        className="Tab-root"
+        id="tab-COMMENTS"
+        role="presentation"
       >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-PROFILE"
-    className="App-tabContent coral coral-myProfile"
-    data-testid="current-tab-pane"
-    id="tabPane-PROFILE"
-    role="tabpanel"
-  >
-    <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+        <button
+          aria-controls="tabPane-COMMENTS"
+          aria-selected={false}
+          className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-tab coral-tabBar-comments"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          role="tab"
+          type="button"
+        >
+          <span>
+            Comments
+          </span>
+        </button>
+      </li>
+      <li
+        className="Tab-root"
+        id="tab-PROFILE"
+        role="presentation"
+      >
+        <button
+          aria-controls="tabPane-PROFILE"
+          aria-selected={true}
+          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-myProfile"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          role="tab"
+          type="button"
+        >
+          <span>
+            My Profile
+          </span>
+        </button>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <section
+      aria-labelledby="tab-PROFILE"
+      className="App-tabContent coral coral-myProfile"
+      data-testid="current-tab-pane"
+      id="tabPane-PROFILE"
+      role="tabpanel"
     >
       <div
-        className="Box-root Flex-root coral coral-viewerBox"
+        className="Box-root HorizontalGutter-root HorizontalGutter-double"
       >
         <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
+          className="Box-root Flex-root coral coral-viewerBox"
         >
           <div
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
+            className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
           >
-            Signed in as 
-            <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+            <div
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
             >
-              Passivo
-            </span>
-            .
+              Signed in as 
+              <span
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+              >
+                Passivo
+              </span>
+              .
+            </div>
+            <div
+              className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
+            >
+              <span>
+                Not you? 
+              </span>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
+                data-color="primary"
+                data-variant="regular"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Sign Out
+              </button>
+            </div>
           </div>
-          <div
-            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarMyProfile"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-MY_COMMENTS"
+            role="presentation"
           >
-            <span>
-              Not you? 
-            </span>
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
-              data-color="primary"
-              data-variant="regular"
+              aria-controls="tabPane-MY_COMMENTS"
+              aria-selected={false}
+              className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              role="tab"
               type="button"
             >
-              Sign Out
+              <span>
+                My comments
+              </span>
             </button>
-          </div>
-        </div>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarMyProfile"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-MY_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-MY_COMMENTS"
-            aria-selected={false}
-            className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
+          </li>
+          <li
+            className="Tab-root"
+            id="tab-NOTIFICATIONS"
+            role="presentation"
           >
-            <span>
-              My comments
-            </span>
-          </button>
-        </li>
-        <li
-          className="Tab-root"
-          id="tab-NOTIFICATIONS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-NOTIFICATIONS"
-            aria-selected={false}
-            className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-notifications"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
+            <button
+              aria-controls="tabPane-NOTIFICATIONS"
+              aria-selected={false}
+              className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-notifications"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <span>
+                Notifications
+              </span>
+            </button>
+          </li>
+          <li
+            className="Tab-root"
+            id="tab-ACCOUNT"
+            role="presentation"
           >
-            <span>
-              Notifications
-            </span>
-          </button>
-        </li>
-        <li
-          className="Tab-root"
-          id="tab-ACCOUNT"
-          role="presentation"
+            <button
+              aria-controls="tabPane-ACCOUNT"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <span>
+                Account
+              </span>
+            </button>
+          </li>
+        </ul>
+        <section
+          aria-labelledby="tab-ACCOUNT"
+          className="coral coral-account"
+          id="tabPane-ACCOUNT"
+          role="tabpanel"
         >
-          <button
-            aria-controls="tabPane-ACCOUNT"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <span>
-              Account
-            </span>
-          </button>
-        </li>
-      </ul>
-      <section
-        aria-labelledby="tab-ACCOUNT"
-        className="coral coral-account"
-        id="tabPane-ACCOUNT"
-        role="tabpanel"
-      >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-        >
-          <h1
-            className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
-          >
-            Manage your account
-          </h1>
           <div
-            className="Box-root HorizontalGutter-root AccountSettingsContainer-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
+            <h1
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+            >
+              Manage your account
+            </h1>
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-spacing-5"
-              data-testid="profile-changeUsername"
+              className="Box-root HorizontalGutter-root AccountSettingsContainer-root HorizontalGutter-full"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignBaseline"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-5"
+                data-testid="profile-changeUsername"
               >
-                <div>
-                  <h1
-                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark coral coral-myUsername"
-                  >
-                    Username
-                  </h1>
-                  <p
-                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Passivo
-                  </p>
-                </div>
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myUsername-editButton"
-                  data-color="primary"
-                  data-variant="outlineFilled"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignBaseline"
                 >
-                  Edit
-                </button>
+                  <div>
+                    <h1
+                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark coral coral-myUsername"
+                    >
+                      Username
+                    </h1>
+                    <p
+                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    >
+                      Passivo
+                    </p>
+                  </div>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myUsername-editButton"
+                    data-color="primary"
+                    data-variant="outlineFilled"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                </div>
               </div>
-            </div>
-            <div
-              className="Box-root HorizontalGutter-root coral coral-myEmail HorizontalGutter-spacing-5"
-              data-testid="profile-changeEmail"
-            >
               <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
+                className="Box-root HorizontalGutter-root coral coral-myEmail HorizontalGutter-spacing-5"
+                data-testid="profile-changeEmail"
               >
-                <div>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
+                >
+                  <div>
+                    <h1
+                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
+                    >
+                      Email
+                    </h1>
+                    <div
+                      className="Box-root Flex-root Flex-flex"
+                    >
+                      <p
+                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                      />
+                      <span>
+                         
+                      </span>
+                      <p
+                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextSecondary coral coral-myEmail-unverified"
+                      >
+                        (Unverified)
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myEmail-editButton"
+                    data-color="primary"
+                    data-variant="outlineFilled"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                </div>
+                <div
+                  className="CallOut-root CallOut-colorRegular coral coral-verifyEmail"
+                >
+                  <div>
+                    <div
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+                    >
+                      <div>
+                        <i
+                          aria-hidden="true"
+                          className="Icon-root Icon-lg"
+                        >
+                          email
+                        </i>
+                      </div>
+                      <div>
+                        <h1
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-gutterBottom"
+                        >
+                          Verify your email address
+                        </h1>
+                        <p
+                          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          An email has been sent to $email to verify your account.
+You must verify your new email address before it can be used
+to sign in to your account or to receive notifications.
+                        </p>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular ChangeEmailContainer-resendButton coral coral-verifyEmail-resendButton"
+                          data-color="primary"
+                          data-variant="regular"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          Resend verification
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="coral coral-myPassword"
+                data-testid="profile-account-changePassword"
+              >
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
+                >
                   <h1
                     className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
                   >
-                    Email
+                    Password
                   </h1>
-                  <div
-                    className="Box-root Flex-root Flex-flex"
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myPassword-editButton"
+                    data-color="primary"
+                    data-variant="outlineFilled"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
                   >
-                    <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                    />
-                    <span>
-                       
-                    </span>
-                    <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextSecondary coral coral-myEmail-unverified"
-                    >
-                      (Unverified)
-                    </p>
-                  </div>
-                </div>
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myEmail-editButton"
-                  data-color="primary"
-                  data-variant="outlineFilled"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  Edit
-                </button>
-              </div>
-              <div
-                className="CallOut-root CallOut-colorRegular coral coral-verifyEmail"
-              >
-                <div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
-                  >
-                    <div>
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-lg"
-                      >
-                        email
-                      </i>
-                    </div>
-                    <div>
-                      <h1
-                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-gutterBottom"
-                      >
-                        Verify your email address
-                      </h1>
-                      <p
-                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                      >
-                        An email has been sent to $email to verify your account.
-You must verify your new email address before it can be used
-to sign in to your account or to receive notifications.
-                      </p>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular ChangeEmailContainer-resendButton coral coral-verifyEmail-resendButton"
-                        data-color="primary"
-                        data-variant="regular"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Resend verification
-                      </button>
-                    </div>
-                  </div>
+                    Edit
+                  </button>
                 </div>
               </div>
-            </div>
-            <div
-              className="coral coral-myPassword"
-              data-testid="profile-account-changePassword"
-            >
               <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
-              >
-                <h1
-                  className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
-                >
-                  Password
-                </h1>
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myPassword-editButton"
-                  data-color="primary"
-                  data-variant="outlineFilled"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  Edit
-                </button>
-              </div>
-            </div>
-            <div
-              className="coral coral-ignoredCommenters"
-              data-testid="profile-account-ignoredCommenters"
-            >
-              <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
-              >
-                <h1
-                  className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
-                >
-                  Ignored Commenters
-                </h1>
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-ignoredComments-manageButton"
-                  data-color="primary"
-                  data-variant="outlineFilled"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  Manage
-                </button>
-              </div>
-            </div>
-            <div
-              className="DownloadCommentsContainer-root coral coral-downloadCommentHistory"
-            >
-              <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
+                className="coral coral-ignoredCommenters"
+                data-testid="profile-account-ignoredCommenters"
               >
                 <div
-                  className="DownloadCommentsContainer-content"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
                 >
                   <h1
-                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DownloadCommentsContainer-title"
+                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
                   >
-                    Download my comment history
+                    Ignored Commenters
                   </h1>
-                  <p
-                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DownloadCommentsContainer-description"
-                  >
-                    You will receive an email with a link to download your comment history.
-You can make 
-                    <strong>
-                      one download request every 14 days.
-                    </strong>
-                  </p>
-                </div>
-                <div>
                   <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-downloadCommentHistory-requestButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-ignoredComments-manageButton"
+                    data-color="primary"
+                    data-variant="outlineFilled"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    Manage
+                  </button>
+                </div>
+              </div>
+              <div
+                className="DownloadCommentsContainer-root coral coral-downloadCommentHistory"
+              >
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
+                >
+                  <div
+                    className="DownloadCommentsContainer-content"
+                  >
+                    <h1
+                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DownloadCommentsContainer-title"
+                    >
+                      Download my comment history
+                    </h1>
+                    <p
+                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DownloadCommentsContainer-description"
+                    >
+                      You will receive an email with a link to download your comment history.
+You can make 
+                      <strong>
+                        one download request every 14 days.
+                      </strong>
+                    </p>
+                  </div>
+                  <div>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-downloadCommentHistory-requestButton"
+                      data-color="primary"
+                      data-variant="outlineFilled"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      Request
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="DeleteAccountContainer-root coral coral-deleteMyAccount"
+              >
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
+                  data-testid="profile-account-deleteAccount"
+                >
+                  <div
+                    className="DeleteAccountContainer-content"
+                  >
+                    <h1
+                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DeleteAccountContainer-title"
+                    >
+                      Delete My Account
+                    </h1>
+                    <p
+                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DeleteAccountContainer-section"
+                    >
+                      Deleting your account will permanently erase your profile and remove
+all your comments from this site.
+                    </p>
+                  </div>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-deleteMyAccount-requestButton"
                     data-color="primary"
                     data-variant="outlineFilled"
                     onBlur={[Function]}
@@ -420,48 +467,10 @@ You can make
                 </div>
               </div>
             </div>
-            <div
-              className="DeleteAccountContainer-root coral coral-deleteMyAccount"
-            >
-              <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
-                data-testid="profile-account-deleteAccount"
-              >
-                <div
-                  className="DeleteAccountContainer-content"
-                >
-                  <h1
-                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DeleteAccountContainer-title"
-                  >
-                    Delete My Account
-                  </h1>
-                  <p
-                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DeleteAccountContainer-section"
-                  >
-                    Deleting your account will permanently erase your profile and remove
-all your comments from this site.
-                  </p>
-                </div>
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-deleteMyAccount-requestButton"
-                  data-color="primary"
-                  data-variant="outlineFilled"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  Request
-                </button>
-              </div>
-            </div>
           </div>
-        </div>
-      </section>
-    </div>
-  </section>
+        </section>
+      </div>
+    </section>
+  </main>
 </div>
 `;
diff --git a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
index 758a978a9..f185e5200 100644
--- a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`renders profile 1`] = `
 <div
   className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="profile-commentHistory"
+  id="coral-profile-commentHistory-log"
 >
   <div
     className="Box-root HorizontalGutter-root HistoryComment-root coral coral-myComment HorizontalGutter-full"
diff --git a/src/core/client/ui/components/Tooltip/TooltipButton.tsx b/src/core/client/ui/components/Tooltip/TooltipButton.tsx
index 1e674e401..7e417aae4 100644
--- a/src/core/client/ui/components/Tooltip/TooltipButton.tsx
+++ b/src/core/client/ui/components/Tooltip/TooltipButton.tsx
@@ -14,6 +14,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
+  "aria-label": string;
 }
 
 const TooltipButton: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const TooltipButton: FunctionComponent<Props> = ({
   className,
   toggleVisibility,
   forwardRef,
+  "aria-label": ariaLabel,
 }) => (
   <BaseButton
     className={cn(styles.button, className)}
@@ -28,6 +30,7 @@ const TooltipButton: FunctionComponent<Props> = ({
       evt.stopPropagation();
       toggleVisibility();
     }}
+    aria-label={ariaLabel}
     ref={forwardRef}
   >
     <Icon color={active ? "primary" : "inherit"}>info</Icon>
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index d81a0303d..9d59c001f 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -58,6 +58,8 @@ comments-loadMore = Load More
 
 comments-permalinkPopover =
   .description = A dialog showing a permalink to the comment
+comments-permalinkPopover-permalinkToComment =
+  .aria-label = Permalink to comment
 comments-permalinkButton-share = Share
 comments-permalinkView-viewFullDiscussion = View Full Discussion
 comments-permalinkView-commentRemovedOrDoesNotExist = This comment has been removed or does not exist.
@@ -263,6 +265,8 @@ profile-account-deleteAccount-pages-deleteButton = Delete my account
 profile-account-deleteAccount-pages-cancel = Cancel
 profile-account-deleteAccount-pages-proceed = Proceed
 profile-account-deleteAccount-pages-done = Done
+profile-account-deleteAccount-pages-phrase =
+  .aria-label = Phrase
 
 profile-account-deleteAccount-pages-descriptionHeader = Delete my account?
 profile-account-deleteAccount-pages-descriptionText =
@@ -412,6 +416,11 @@ configure-messageBox-description =
   announcements relating to the comments on this story.
 configure-messageBox-preview = Preview
 configure-messageBox-selectAnIcon = Select an Icon
+configure-messageBox-iconConversation = Conversation
+configure-messageBox-iconDate = Date
+configure-messageBox-iconHelp = Help
+configure-messageBox-iconWarning = Warning
+configure-messageBox-iconChatBubble = Chat Bubble
 configure-messageBox-noIcon = No Icon
 configure-messageBox-writeAMessage = Write a Message