Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CORL-1292] Set better aria labels on the comment action buttons #3126

Merged
merged 3 commits into from Aug 20, 2020
Merged

[CORL-1292] Set better aria labels on the comment action buttons #3126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0027de6
Improve aria labels for comment action buttons
nick-funk Aug 20, 2020
c2586bf
Update snapshots/tests/mutations
nick-funk Aug 20, 2020
8921e35
Merge branch 'master' into feature/CORL-1292-action-arias
kodiakhq[bot] Aug 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/core/client/admin/routes/Configure/sections/General/ReactionConfig.tsx
View file
Open in desktop
Expand Up @@ -87,6 +87,7 @@ const ReactionsConfig: FunctionComponent<Props> = ({
<Label component="p">Preview</Label>
</Localized>
<ReactionButton
author=""
readOnly
className={styles.reactionButton}
reacted={false}
Expand Down Expand Up @@ -126,6 +127,7 @@ const ReactionsConfig: FunctionComponent<Props> = ({
<Label component="p">Preview</Label>
</Localized>
<ReactionButton
author=""
className={styles.reactionButton}
readOnly
reacted
Expand Down
4 changes: 2 additions & 2 deletions src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -1255,7 +1255,7 @@ each other's comments.
Preview
</p>
<button
aria-label="Reaction"
aria-label="Reaction comment by "
aria-pressed={false}
className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
data-testid="comment-reaction-button"
Expand Down Expand Up @@ -1323,7 +1323,7 @@ each other's comments.
Preview
</p>
<button
aria-label="reacted"
aria-label="reacted comment by "
aria-pressed={true}
className="BaseButton-root Button-base Button-flat Button-active Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorPrimary Button-disabled ReactionButton-readOnly ReactionButton-reacted ReactionConfig-reactionButton ReactionButton-button"
data-testid="comment-reaction-button"
Expand Down
2 changes: 2 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
View file
Open in desktop
Expand Up @@ -480,6 +480,7 @@ export const CommentContainer: FunctionComponent<Props> = ({
!isViewerScheduledForDeletion && (
<ReplyButton
id={`comments-commentContainer-replyButton-${comment.id}`}
author={comment.author?.username}
onClick={toggleShowReplyDialog}
active={showReplyDialog}
disabled={
Expand All @@ -494,6 +495,7 @@ export const CommentContainer: FunctionComponent<Props> = ({
<PermalinkButtonContainer
story={story}
commentID={comment.id}
author={comment.author?.username}
className={cn(
styles.actionButton,
CLASSES.comment.actionBar.shareButton
Expand Down
3 changes: 3 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx
View file
Open in desktop
Expand Up @@ -14,11 +14,13 @@ interface PermalinkProps {
commentID: string;
url: string;
className?: string;
author?: string | null;
}

const Permalink: FunctionComponent<PermalinkProps> = ({
commentID,
url,
author,
className,
}) => {
const popoverID = `permalink-popover-${commentID}`;
Expand Down Expand Up @@ -47,6 +49,7 @@ const Permalink: FunctionComponent<PermalinkProps> = ({
<Localized
id="comments-permalinkButton"
attrs={{ "aria-label": true }}
$username={author}
>
<Button
onClick={toggleVisibility}
Expand Down
3 changes: 3 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx
View file
Open in desktop
Expand Up @@ -12,18 +12,21 @@ interface Props {
story: StoryData;
commentID: string;
className?: string;
author?: string | null;
}

export const PermalinkButtonContainer: FunctionComponent<Props> = ({
story,
commentID,
className,
author,
}) => {
return (
<PermalinkButton
className={className}
commentID={commentID}
url={getURLWithCommentID(story.url, commentID)}
author={author}
/>
);
};
Expand Down
11 changes: 10 additions & 1 deletion src/core/client/stream/tabs/Comments/Comment/ReactionButton/CreateCommentReactionMutation.ts
View file
Open in desktop
Expand Up @@ -15,7 +15,12 @@ import { CreateCommentReactionEvent } from "coral-stream/events";

import { CreateCommentReactionMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentReactionMutation.graphql";

export type CreateCommentReactionInput = MutationInput<MutationTypes>;
export type CreateCommentReactionInput = MutationInput<MutationTypes> & {
author?: {
id: string;
username: string | undefined | null;
} | null;
};

const mutation = graphql`
mutation CreateCommentReactionMutation($input: CreateCommentReactionInput!) {
Expand Down Expand Up @@ -59,6 +64,10 @@ async function commit(
createCommentReaction: {
comment: {
id: input.commentID,
author: {
id: input.author?.id,
username: input.author?.username,
},
viewerActionPresence: {
reaction: true,
},
Expand Down
25 changes: 22 additions & 3 deletions src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx
View file
Open in desktop
Expand Up @@ -19,6 +19,7 @@ interface ReactionButtonProps {
readOnly?: boolean;
className?: string;
isQA?: boolean;
author?: string | null;
}

function render(props: ReactionButtonProps) {
Expand All @@ -43,7 +44,6 @@ function render(props: ReactionButtonProps) {
className,
styles.button
)}
aria-label={reacted ? labelActive : label}
active={Boolean(reacted)}
data-testid={"comment-reaction-button"}
variant="flat"
Expand Down Expand Up @@ -83,20 +83,39 @@ function render(props: ReactionButtonProps) {

class ReactionButton extends React.Component<ReactionButtonProps> {
public render() {
const { reacted, isQA } = this.props;
const {
reacted,
label,
labelActive,
totalReactions,
isQA,
author,
} = this.props;

if (isQA) {
return (
<Localized
id={reacted ? "qa-reaction-aria-voted" : "qa-reaction-aria-vote"}
attrs={{ "aria-label": true }}
$username={author}
$count={totalReactions}
>
{render(this.props)}
</Localized>
);
}

return <>{render(this.props)}</>;
return (
<Localized
id={reacted ? "comments-reacted" : "comments-react"}
attrs={{ "aria-label": true }}
$reaction={reacted ? labelActive : label}
$username={author}
$count={totalReactions}
>
{render(this.props)}
</Localized>
);
}
}

Expand Down
6 changes: 6 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx
View file
Open in desktop
Expand Up @@ -48,6 +48,7 @@ class ReactionButtonContainer extends React.Component<Props> {
// can assume revision is not null as we
// tombstone when comment revisions don't exist
commentRevisionID: this.props.comment.revision!.id,
author: this.props.comment.author,
};

const { createCommentReaction, removeCommentReaction } = this.props;
Expand Down Expand Up @@ -87,6 +88,7 @@ class ReactionButtonContainer extends React.Component<Props> {
iconActive={iconActive}
readOnly={readOnly}
isQA={this.props.isQA}
author={this.props.comment.author?.username}
/>
) : null;
}
Expand All @@ -104,6 +106,10 @@ export default withShowAuthPopupMutation(
comment: graphql`
fragment ReactionButtonContainer_comment on Comment {
id
author {
id
username
}
revision {
id
}
Expand Down
11 changes: 10 additions & 1 deletion src/core/client/stream/tabs/Comments/Comment/ReactionButton/RemoveCommentReactionMutation.ts
View file
Open in desktop
Expand Up @@ -15,7 +15,12 @@ import { RemoveCommentReactionEvent } from "coral-stream/events";

import { RemoveCommentReactionMutation as MutationTypes } from "coral-stream/__generated__/RemoveCommentReactionMutation.graphql";

export type RemoveCommentReactionInput = MutationInput<MutationTypes>;
export type RemoveCommentReactionInput = MutationInput<MutationTypes> & {
author?: {
id: string;
username: string | undefined | null;
} | null;
};

const mutation = graphql`
mutation RemoveCommentReactionMutation($input: RemoveCommentReactionInput!) {
Expand Down Expand Up @@ -59,6 +64,10 @@ async function commit(
removeCommentReaction: {
comment: {
id: input.commentID,
author: {
id: input.author?.id,
username: input.author?.username,
},
viewerActionPresence: {
reaction: false,
},
Expand Down
7 changes: 6 additions & 1 deletion src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx
View file
Open in desktop
Expand Up @@ -9,14 +9,19 @@ import styles from "./ReplyButton.css";

interface Props {
id?: string;
author?: string | null;
onClick?: EventHandler<MouseEvent<HTMLButtonElement>>;
active?: boolean;
disabled?: boolean;
className?: string;
}

const ReplyButton: FunctionComponent<Props> = (props) => (
<Localized id="comments-replyButton" attrs={{ "aria-label": true }}>
<Localized
id="comments-replyButton"
attrs={{ "aria-label": true }}
$username={props.author}
>
<Button
className={props.className}
id={props.id}
Expand Down
13 changes: 13 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -67,6 +67,7 @@ exports[`hide reply button 1`] = `
viewer={null}
/>
<Relay(PermalinkButtonContainer)
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down Expand Up @@ -416,12 +417,14 @@ exports[`renders body only 1`] = `
/>
<ReplyButton
active={false}
author={null}
className="CommentContainer-actionButton coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
author={null}
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down Expand Up @@ -771,12 +774,14 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
/>
<ReplyButton
active={false}
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-replyButton"
disabled={true}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down Expand Up @@ -1126,12 +1131,14 @@ exports[`renders disabled reply when story is closed 1`] = `
/>
<ReplyButton
active={false}
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-replyButton"
disabled={true}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down Expand Up @@ -1485,12 +1492,14 @@ exports[`renders in reply to 1`] = `
/>
<ReplyButton
active={false}
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down Expand Up @@ -1865,12 +1874,14 @@ exports[`renders username and body 1`] = `
/>
<ReplyButton
active={false}
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down Expand Up @@ -2229,12 +2240,14 @@ exports[`shows conversation link 1`] = `
/>
<ReplyButton
active={false}
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
author="Marvin"
className="CommentContainer-actionButton coral coral-comment-shareButton"
commentID="comment-id"
story={
Expand Down
4 changes: 2 additions & 2 deletions ...ore/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -489,7 +489,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
>
<button
aria-label="Respect"
aria-label="Respect comment by Markus"
aria-pressed={false}
className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
data-testid="comment-reaction-button"
Expand Down Expand Up @@ -629,7 +629,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
>
<button
aria-label="Respect"
aria-label="Respect comment by Lukas"
aria-pressed={false}
className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
data-testid="comment-reaction-button"
Expand Down