diff --git a/client/src/core/client/stream/common/scrollToBeginning.ts b/client/src/core/client/stream/common/scrollToBeginning.ts index f173fa3612..0171f660fb 100644 --- a/client/src/core/client/stream/common/scrollToBeginning.ts +++ b/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(); } } diff --git a/client/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx b/client/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx index a4333d3075..1561332a8b 100644 --- a/client/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx +++ b/client/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx @@ -40,6 +40,7 @@ const CommentToggle: FunctionComponent = (props) => { onClick={props.toggleCollapsed} className={cn(styles.root, CLASSES.comment.collapseToggle.$root)} aria-label={"Expand comment thread"} + aria-expanded="false" > = ({ styles.toggleButton, CLASSES.comment.collapseToggle.$root )} + aria-expanded="true" > = ({ onClick={onToggleExpand} size="small" className={styles.button} + aria-expanded="false" > {media.__typename === "TwitterMedia" && ( @@ -129,6 +130,7 @@ const MediaSectionContainer: FunctionComponent = ({ size="small" iconLeft className={styles.button} + aria-expanded="true" > = ({ 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]); diff --git a/client/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.tsx b/client/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.tsx index a724eb3088..f26932b43b 100644 --- a/client/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.tsx +++ b/client/src/core/client/stream/tabs/Profile/Preferences/IgnoreUserSettingsContainer.tsx @@ -82,6 +82,7 @@ const IgnoreUserSettingsContainer: FunctionComponent = ({ viewer }) => { upperCase onClick={toggleManage} className={CLASSES.ignoredCommenters.manageButton} + aria-expanded="true" > Close @@ -103,6 +104,7 @@ const IgnoreUserSettingsContainer: FunctionComponent = ({ viewer }) => { CLASSES.ignoredCommenters.manageButton )} aria-label="Manage ignored commenters" + aria-expanded="false" > Manage diff --git a/locales/en-US/stream.ftl b/locales/en-US/stream.ftl index d9df263453..6aa895eae6 100644 --- a/locales/en-US/stream.ftl +++ b/locales/en-US/stream.ftl @@ -450,9 +450,9 @@ comments-featured-label = Featured Comment from {$username} comments-featured-gotoConversation = Go to conversation comments-featured-gotoConversation-label-with-username = - .aria-label = Go to this featured comment by user { $username } in the main comment stream + .aria-label = Go to conversation for this featured comment by user { $username } in the main comment stream comments-featured-gotoConversation-label-without-username = - .aria-label = Go to this featured comment in the main comment stream + .aria-label = Go to conversation for this featured comment in the main comment stream comments-featured-replies = Replies ## Profile Tab