wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-01 13:00:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-719] A11y runtime checks using react-axe (#2725)

Browse Source 
* 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
This commit is contained in:
Vinh
2019-11-22 19:10:51 +00:00
committed by Wyatt Johnson
parent 4542dbdb43
commit 7c2e56b751
79 changed files with 2211 additions and 1848 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+41
View File
@@ -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",
package.json
+2
View File
@@ -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",
src/core/client/account/index.html
+1 -1
View File
@@ -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>
src/core/client/account/index.tsx
+3
View File
@@ -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,
src/core/client/account/routes/NotFound.tsx
+4 -2
View File
@@ -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>
);
src/core/client/account/routes/download/Download/DownloadDescription.tsx
+1 -1
View File
@@ -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}>
src/core/client/account/routes/download/Download/DownloadRoute.tsx
+6 -6
View File
@@ -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>
);
};
src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx
+8 -8
View File
@@ -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>
);
};
src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx
+8 -8
View File
@@ -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>
);
};
src/core/client/account/routes/password/Reset/ResetRoute.tsx
+8 -8
View File
@@ -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>
);
};
src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
+4 -4
View File
@@ -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>
`;
src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+4 -4
View File
@@ -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>
`;
src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
+4 -4
View File
@@ -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>
`;
src/core/client/admin/index.html
+1 -1
View File
@@ -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>
src/core/client/admin/index.tsx
+3
View File
@@ -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,
src/core/client/auth-callback/index.html
+1 -1
View File
@@ -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>
src/core/client/auth/components/Header/Bar.tsx
+1 -1
View File
@@ -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>
);
src/core/client/auth/components/Header/SubBar.tsx
+1 -1
View File
@@ -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>
);
src/core/client/auth/components/Header/__snapshots__/Bar.spec.tsx.snap
+2 -2
View File
@@ -6,8 +6,8 @@ exports[`renders correctly 1`] = `
className="Bar-root"
justifyContent="center"
>
<div>
<header>
Hello World
</div>
</header>
</ForwardRef(forwardRef)>
`;
src/core/client/auth/components/Header/__snapshots__/SubBar.spec.tsx.snap
+2 -2
View File
@@ -6,8 +6,8 @@ exports[`renders correctly 1`] = `
className="SubBar-root"
justifyContent="center"
>
<div>
<nav>
Hello World
</div>
</nav>
</ForwardRef(forwardRef)>
`;
src/core/client/auth/components/Main.tsx
+2 -2
View File
@@ -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;
src/core/client/auth/components/__snapshots__/Main.spec.tsx.snap
+2 -2
View File
@@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div
<main
className="Main-root"
>
Hello World
</div>
</main>
`;
src/core/client/auth/hooks/useResizePopup.ts
+19 -29
View File
@@ -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();
src/core/client/auth/index.html
+1 -1
View File
@@ -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>
src/core/client/auth/index.tsx
+3
View File
@@ -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,
src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+4 -4
View File
@@ -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>
src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+4 -4
View File
@@ -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>
src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+4 -4
View File
@@ -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>
src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+6 -6
View File
@@ -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>
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+16 -16
View File
@@ -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>
`;
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+32 -32
View File
@@ -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>
`;
src/core/client/count/index.html
+1 -1
View File
@@ -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>
src/core/client/embed/index.html
+1 -1
View File
@@ -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;
src/core/client/framework/helpers/potentiallyInjectAxe.ts
+62
View File
@@ -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;"])',
},
],
});
}
src/core/client/install/App/App.tsx
+2 -2
View File
@@ -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>
);
};
src/core/client/install/App/MainBar.tsx
+2 -2
View File
@@ -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>
);
};
src/core/client/install/App/__snapshots__/App.spec.tsx.snap
+2 -2
View File
@@ -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>
`;
src/core/client/install/App/steps/AddOrganizationStep.tsx
+12 -3
View File
@@ -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>
src/core/client/install/App/steps/CreateYourAccountStep.tsx
+16 -4
View File
@@ -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>
src/core/client/install/App/steps/PermittedDomainsStep.tsx
+4 -1
View File
@@ -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>
src/core/client/install/App/steps/SelectLanguageStep.tsx
+9 -2
View File
@@ -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>
)}
src/core/client/install/index.html
+1 -1
View File
@@ -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>
src/core/client/install/index.tsx
+3
View File
@@ -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,
src/core/client/stream/App/App.tsx
+35 -25
View File
@@ -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>
);
};
src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
+34 -25
View File
@@ -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)>
`;
src/core/client/stream/index.html
+1 -1
View File
@@ -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>
src/core/client/stream/index.tsx
+7 -3
View File
@@ -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 = () => (
src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+2 -2
View File
@@ -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`
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
+2 -1
View File
@@ -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
}
`,
src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx
+12 -5
View File
@@ -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}
src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx
+18 -11
View File
@@ -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);
src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+137 -28
View File
@@ -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}
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
+2 -2
View File
@@ -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
}
src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
+1 -1
View File
@@ -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 }}
src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
+1 -3
View File
@@ -11,9 +11,7 @@ exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="PostCommentFormFake-root"
>
<div
aria-hidden="true"
>
<div>
<Localized
attrs={
Object {
src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
+19 -1
View File
@@ -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>
src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
+5 -1
View File
@@ -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"
src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap
+3
View File
@@ -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)))
src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
+22 -5
View File
@@ -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} />
src/core/client/stream/tabs/Profile/Settings/NotificationSettingsContainer.tsx
+5 -1
View File
@@ -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 &&
src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+434 -427
View File
@@ -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>
`;
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+20 -20
View File
@@ -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>
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+16 -16
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+16 -16
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+8 -8
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+4 -4
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+32 -32
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+8 -8
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+9 -11
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+1 -3
View File
@@ -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"
src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+16 -16
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+598 -591
View File
File diff suppressed because it is too large Load Diff
src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+4 -4
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+4 -4
View File
@@ -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>
src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+8 -8
View File
@@ -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>
src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
+401 -392
View File
@@ -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>
`;
src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
+1
View File
@@ -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"
src/core/client/ui/components/Tooltip/TooltipButton.tsx
+3
View File
@@ -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>
src/locales/en-US/stream.ftl
+9
View File
@@ -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