Skip to content

Commit

Permalink
Merge pull request #4331 from coralproject/feat/CORL-2885-accessibili…
Browse files Browse the repository at this point in the history
…ty-improvements

[CORL-2885]: accessibility improvements in the stream
  • Loading branch information
tessalt authored Sep 26, 2023
2 parents 770f3f7 + 11d3083 commit 511d060
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 3 deletions.
2 changes: 2 additions & 0 deletions client/src/core/client/stream/common/scrollToBeginning.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const IndentedComment: FunctionComponent<IndentedCommentProps> = ({
styles.toggleButton,
CLASSES.comment.collapseToggle.$root
)}
aria-expanded="true"
>
<SvgIcon
className={cn(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" && (
Expand Down Expand Up @@ -129,6 +130,7 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
size="small"
iconLeft
className={styles.button}
aria-expanded="true"
>
<ButtonSvgIcon
Icon={SubtractIcon}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
upperCase
onClick={toggleManage}
className={CLASSES.ignoredCommenters.manageButton}
aria-expanded="true"
>
Close
</Button>
Expand All @@ -103,6 +104,7 @@ const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
CLASSES.ignoredCommenters.manageButton
)}
aria-label="Manage ignored commenters"
aria-expanded="false"
>
Manage
</Button>
Expand Down
4 changes: 2 additions & 2 deletions locales/en-US/stream.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -450,9 +450,9 @@ comments-featured-label =
Featured Comment from {$username} <RelativeTime></RelativeTime>
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
Expand Down

0 comments on commit 511d060

Please sign in to comment.