Merge pull request #4360 from coralproject/develop

8.5.2

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "8.5.1",
+  "version": "8.5.2",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

client/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigContainer.tsx

@@ -13,7 +13,7 @@ import { AdvancedConfigContainer_settings } from "coral-admin/__generated__/Adva
 import AMPConfig from "./AMPConfig";
 import CommentStreamLiveUpdatesContainer from "./CommentStreamLiveUpdatesContainer";
 import CustomCSSConfig from "./CustomCSSConfig";
-import EmbeddedCommentRepliesConfig from "./EmbeddedCommentRepliesConfig";
+import EmbeddedCommentsConfig from "./EmbeddedCommentsConfig";
 import ForReviewQueueConfig from "./ForReviewQueueConfig";
 import StoryCreationConfig from "./StoryCreationConfig";
 
@@ -31,7 +31,7 @@ const AdvancedConfigContainer: React.FunctionComponent<Props> = ({
   return (
     <HorizontalGutter size="double" data-testid="configure-advancedContainer">
       <CustomCSSConfig disabled={submitting} />
-      <EmbeddedCommentRepliesConfig disabled={submitting} />
+      <EmbeddedCommentsConfig disabled={submitting} />
       <CommentStreamLiveUpdatesContainer
         disabled={submitting}
         settings={settings}
@@ -47,7 +47,7 @@ const enhanced = withFragmentContainer<Props>({
   settings: graphql`
     fragment AdvancedConfigContainer_settings on Settings {
       ...CustomCSSConfig_formValues @relay(mask: false)
-      ...EmbeddedCommentRepliesConfig_formValues @relay(mask: false)
+      ...EmbeddedCommentsConfig_formValues @relay(mask: false)
       ...CommentStreamLiveUpdates_formValues @relay(mask: false)
       ...StoryCreationConfig_formValues @relay(mask: false)
       ...CommentStreamLiveUpdatesContainer_settings

client/src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentsConfig.tsx

@@ -0,0 +1,72 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { FormField, HelperText, Label } from "coral-ui/components/v2";
+
+import ConfigBox from "../../ConfigBox";
+import Header from "../../Header";
+import OnOffField from "../../OnOffField";
+import Subheader from "../../Subheader";
+import AllowedOriginsTextarea from "../Sites/AllowedOriginsTextarea";
+
+// eslint-disable-next-line no-unused-expressions
+graphql`
+  fragment EmbeddedCommentsConfig_formValues on Settings {
+    embeddedComments {
+      allowReplies
+      oEmbedAllowedOrigins
+    }
+  }
+`;
+
+interface Props {
+  disabled: boolean;
+}
+
+const EmbeddedCommentsConfig: FunctionComponent<Props> = ({ disabled }) => (
+  <ConfigBox
+    data-testid="embedded-comments-config"
+    title={
+      <Localized id="configure-advanced-embeddedComments">
+        <Header htmlFor="configure-advanced-embeddedComments">
+          Embedded comments
+        </Header>
+      </Localized>
+    }
+  >
+    <FormField>
+      <Localized id="configure-advanced-embeddedCommentReplies-label">
+        <Label>Allow replies to embedded comments</Label>
+      </Localized>
+      <Localized id="configure-advanced-embeddedCommentReplies-explanation">
+        <HelperText>
+          When enabled, a reply button will appear with each embedded comment to
+          encourage additional discussion on that specific comment or story.
+        </HelperText>
+      </Localized>
+      <OnOffField name="embeddedComments.allowReplies" disabled={disabled} />
+    </FormField>
+    <Localized id="configure-advanced-embeddedComments-subheader">
+      <Subheader>For sites using oEmbed</Subheader>
+    </Localized>
+    <FormField>
+      <Localized id="configure-advanced-oembedAllowedOrigins-label">
+        <Label>oEmbed permitted domains</Label>
+      </Localized>
+      <Localized id="configure-advanced-oembedAllowedOrigins-description">
+        <HelperText>
+          Domains that are permitted to make calls to the oEmbed API (ex.
+          http://localhost:3000, https://staging.domain.com,
+          https://domain.com).
+        </HelperText>
+      </Localized>
+      <AllowedOriginsTextarea
+        name="embeddedComments.oEmbedAllowedOrigins"
+        disabled={disabled}
+      />
+    </FormField>
+  </ConfigBox>
+);
+
+export default EmbeddedCommentsConfig;

client/src/core/client/admin/routes/Configure/sections/Sites/AllowedOriginsTextarea.tsx

@@ -10,12 +10,18 @@ import ValidationMessage from "../../ValidationMessage";
 import styles from "./AllowedOriginsTextarea.css";
 
 interface Props {
+  name: string;
   defaultValue?: ReadonlyArray<string>;
+  disabled?: boolean;
 }
 
-const AllowedOriginsTextarea: FunctionComponent<Props> = ({ defaultValue }) => (
+const AllowedOriginsTextarea: FunctionComponent<Props> = ({
+  name,
+  defaultValue,
+  disabled = false,
+}) => (
   <Field
-    name="allowedOrigins"
+    name={name}
     parse={parseStringList}
     format={formatStringList}
     validate={validateStrictURLList}
@@ -32,6 +38,7 @@ const AllowedOriginsTextarea: FunctionComponent<Props> = ({ defaultValue }) => (
           autoCapitalize="off"
           spellCheck={false}
           fullwidth
+          disabled={disabled}
         />
         <ValidationMessage meta={meta} />
       </>

client/src/core/client/admin/routes/Configure/sections/Sites/CreateSiteForm.tsx

@@ -84,7 +84,7 @@ const CreateSiteForm: FunctionComponent<Props> = ({ onCreate }) => {
                     </HelperText>
                   </Localized>
                 </FormFieldHeader>
-                <AllowedOriginsTextarea />
+                <AllowedOriginsTextarea name="allowedOrigins" />
               </FormField>
               {submitError && (
                 <CallOut fullWidth color="error">

client/src/core/client/admin/routes/Configure/sections/Sites/EditSiteForm.tsx

@@ -90,7 +90,10 @@ const EditSiteForm: FunctionComponent<Props> = ({
                     </HelperText>
                   </Localized>
                 </FormFieldHeader>
-                <AllowedOriginsTextarea defaultValue={site.allowedOrigins} />
+                <AllowedOriginsTextarea
+                  defaultValue={site.allowedOrigins}
+                  name="allowedOrigins"
+                />
               </FormField>
               <FormField>
                 <FormFieldHeader>

client/src/core/client/admin/test/configure/advanced.spec.tsx

@@ -59,7 +59,7 @@ it("renders configure advanced", async () => {
   const { configureContainer } = await createTestRenderer();
   expect(within(configureContainer).getByLabelText("Custom CSS")).toBeDefined();
   expect(
-    within(configureContainer).getByText("Embedded comment replies")
+    within(configureContainer).getByText("Embedded comments")
   ).toBeDefined();
   expect(
     within(configureContainer).getByText("Comment stream live updates")
@@ -223,7 +223,7 @@ it("change embedded comments allow replies", async () => {
   });
 
   const embeddedCommentReplies = within(advancedContainer).getByTestId(
-    "embedded-comment-replies-config"
+    "embedded-comments-config"
   );
 
   const offField = within(embeddedCommentReplies).getByText("Off");
@@ -241,3 +241,43 @@ it("change embedded comments allow replies", async () => {
     expect(resolvers.Mutation!.updateSettings!.called).toBe(true);
   });
 });
+
+it("change oembed permitted domains", async () => {
+  const resolvers = createResolversStub<GQLResolver>({
+    Mutation: {
+      updateSettings: ({ variables }) => {
+        expectAndFail(
+          variables.settings.embeddedComments?.oEmbedAllowedOrigins
+        ).toEqual(["http://localhost:8080"]);
+        return {
+          settings: pureMerge(settings, variables.settings),
+        };
+      },
+    },
+  });
+  const { advancedContainer, saveChangesButton } = await createTestRenderer({
+    resolvers,
+  });
+
+  const oembedAllowedOriginsConfig = within(advancedContainer).getByTestId(
+    "embedded-comments-config"
+  );
+
+  const allowedOriginsTextArea = within(oembedAllowedOriginsConfig).getByRole(
+    "textbox"
+  );
+
+  userEvent.type(allowedOriginsTextArea, "http://");
+
+  userEvent.click(saveChangesButton);
+
+  expect(within(advancedContainer).getByText("Invalid URL"));
+
+  userEvent.type(allowedOriginsTextArea, "localhost:8080");
+
+  userEvent.click(saveChangesButton);
+
+  await waitFor(() => {
+    expect(resolvers.Mutation!.updateSettings!.called).toBe(true);
+  });
+});

client/src/core/client/admin/test/fixtures.ts

@@ -224,6 +224,7 @@ export const settings = createFixture<GQLSettings>({
   emailDomainModeration: [],
   embeddedComments: {
     allowReplies: true,
+    oEmbedAllowedOrigins: [],
   },
   flairBadges: {
     flairBadgesEnabled: false,

client/src/core/client/stream/common/scrollToBeginning.ts

@@ -12,6 +12,8 @@ function scrollToBeginning(
     } else {
       window.scrollTo({ top: getElementWindowTopOffset(window, tab) });
     }
+    // set keyboard focus to Comments button for accessibility
+    tab.getElementsByTagName("button")[0].focus();
   }
 }
 

client/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx

@@ -40,6 +40,7 @@ const CommentToggle: FunctionComponent<Props> = (props) => {
         onClick={props.toggleCollapsed}
         className={cn(styles.root, CLASSES.comment.collapseToggle.$root)}
         aria-label={"Expand comment thread"}
+        aria-expanded="false"
       >
         <Flex alignItems="baseline" spacing={1}>
           <SvgIcon

client/src/core/client/stream/tabs/Comments/Comment/IndentedComment.tsx

@@ -73,6 +73,7 @@ const IndentedComment: FunctionComponent<IndentedCommentProps> = ({
                   styles.toggleButton,
                   CLASSES.comment.collapseToggle.$root
                 )}
+                aria-expanded="true"
               >
                 <SvgIcon
                   className={cn(

client/src/core/client/stream/tabs/Comments/Comment/MediaSection/MediaSectionContainer.tsx

@@ -96,6 +96,7 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
         onClick={onToggleExpand}
         size="small"
         className={styles.button}
+        aria-expanded="false"
       >
         <ButtonSvgIcon Icon={AddIcon} size="xxs" className={styles.icon} />
         {media.__typename === "TwitterMedia" && (
@@ -129,6 +130,7 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
           size="small"
           iconLeft
           className={styles.button}
+          aria-expanded="true"
         >
           <ButtonSvgIcon
             Icon={SubtractIcon}

client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CopyCommentEmbedCodeContainer.tsx

@@ -104,7 +104,7 @@ const CopyCommentEmbedCodeContainer: FunctionComponent<Props> = ({
 
   const permalinkUrl = getURLWithCommentID(story.url, comment.id);
 
-  const embedCode = `<div class="coral-comment-embed coral-comment-embed-simple" style="background-color: #f4f7f7; padding: 8px; position: relative;" data-commentID=${
+  const embedCode = `<div class="coral-comment-embed coral-comment-embed-simple" style="background-color: #f4f7f7; padding: 8px; position: relative; text-align: left;" data-commentID=${
     comment.id
   } data-reactionLabel="${
     settings.reaction.label

client/src/core/client/stream/tabs/Comments/Stream/CommentsLinks/CommentsLinks.tsx

@@ -57,13 +57,44 @@ const CommentsLinks: FunctionComponent<Props> = ({
   showGoToProfile,
 }) => {
   const { renderWindow, customScrollContainer } = useCoralContext();
+
+  // Find first keyboard focusable element for accessibility
+  const getFirstKeyboardFocusableElement = useCallback(() => {
+    const container = customScrollContainer ?? renderWindow.document;
+    let firstFocusableElement: Element | null = null;
+    let counter = 0;
+    const focusableElements = container.querySelectorAll(
+      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+    );
+    while (
+      firstFocusableElement === null &&
+      counter < focusableElements.length
+    ) {
+      if (
+        !focusableElements[counter].hasAttribute("disabled") &&
+        !focusableElements[counter].getAttribute("aria-hidden") &&
+        !focusableElements[counter].getAttribute("hidden")
+      ) {
+        firstFocusableElement = focusableElements[counter];
+      }
+      counter++;
+    }
+    return firstFocusableElement;
+  }, [renderWindow, customScrollContainer]);
+
   const root = useShadowRootOrDocument();
   const onGoToArticleTop = useCallback(() => {
     if (customScrollContainer) {
       customScrollContainer.scrollTo({ top: 0 });
     }
     renderWindow.scrollTo({ top: 0 });
-  }, [renderWindow, customScrollContainer]);
+    // programmatically apply focus to first keyboard focusable element
+    // after scroll for accessibility
+    const firstKeyboardFocusableElement = getFirstKeyboardFocusableElement();
+    if (firstKeyboardFocusableElement instanceof HTMLElement) {
+      firstKeyboardFocusableElement.focus();
+    }
+  }, [renderWindow, customScrollContainer, getFirstKeyboardFocusableElement]);
   const onGoToCommentsTop = useCallback(() => {
     scrollToBeginning(root, renderWindow, customScrollContainer);
   }, [root, renderWindow, customScrollContainer]);