Skip to content

fix: MOVES-10042 screenreader after animations #1358

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

Draft
javierfdezcast wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

fix: MOVES-10042 screenreader after animations #1358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5531f99
MOVES-10042 screenreader after animations
javierfdezcast May 5, 2025
a5c1260
Update feedback.tsx
javierfdezcast May 5, 2025
4ef7d97
test
javierfdezcast May 19, 2025
4760431
refactor
javierfdezcast May 19, 2025
b1a5a74
prettier
javierfdezcast May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions src/button-fixed-footer-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type Props = {
footerBgColor?: string;
containerBgColor?: string;
children: React.ReactNode;
hideDivToScreenReaders?: boolean;
onChangeFooterHeight?: (heightInPx: number) => void;
};

Expand All @@ -26,6 +27,7 @@ const ButtonFixedFooterLayout = ({
children,
footerBgColor,
containerBgColor,
hideDivToScreenReaders = false,
onChangeFooterHeight,
}: Props): JSX.Element => {
const hasButton = !!button || !!secondaryButton;
Expand All @@ -36,22 +38,24 @@ const ButtonFixedFooterLayout = ({
footerBgColor={footerBgColor}
containerBgColor={containerBgColor}
footer={
<InternalResponsiveLayout shouldExpandWhenNested="desktop">
<Box
paddingY={{
mobile: 16,
tablet: 32,
desktop: 0,
}}
>
<ButtonLayout
primaryButton={button}
secondaryButton={secondaryButton}
align="full-width"
link={link}
/>
</Box>
</InternalResponsiveLayout>
<div aria-hidden={hideDivToScreenReaders}>
<InternalResponsiveLayout shouldExpandWhenNested="desktop">
<Box
paddingY={{
mobile: 16,
tablet: 32,
desktop: 0,
}}
>
<ButtonLayout
primaryButton={button}
secondaryButton={secondaryButton}
align="full-width"
link={link}
/>
</Box>
</InternalResponsiveLayout>
</div>
}
>
{children}
Expand Down
110 changes: 81 additions & 29 deletions src/feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,25 @@ const useHapticFeedback = (type?: HapticFeedback) => {
}, [type]);
};

const renderFeedbackBody = (
{
asset,
title,
description,
extra,
}: Pick<FeedbackScreenProps, 'asset' | 'title' | 'description' | 'extra'>,
animateText: boolean
) => {
interface RenderFeedbackBodyProps {
asset: React.ReactNode;
title: string;
description?: React.ReactNode;
extra?: React.ReactNode;
animateText: boolean;
setShouldRead: React.Dispatch<React.SetStateAction<boolean>>;
}

const RenderFeedbackBody = ({
asset,
title,
description,
extra,
animateText,
setShouldRead,
}: RenderFeedbackBodyProps): JSX.Element => {
const [hideOthers, setHideOthers] = React.useState(animateText);
const divRef = React.useRef<HTMLDivElement>(null);
const normalizedDescription =
description && Array.isArray(description) ? (
<Stack space={16}>
Expand All @@ -78,20 +88,33 @@ const renderFeedbackBody = (
) : (
description
);
const handleAnimationEnd = () => {
setShouldRead(true);
divRef.current?.focus();
setHideOthers(false);
};

return (
<Stack space={24}>
<div className={styles.assetContainer} data-testid="icon">
{asset}
</div>
<Stack space={16} className={classnames(styles.feedbackData)}>
<div className={classnames(animateText && styles.feedbackTextAppearFast)} data-testid="title">
<div
ref={divRef}
className={classnames(animateText && styles.feedbackTextAppearFast)}
data-testid="title"
onAnimationEnd={handleAnimationEnd}
tabIndex={-1}
>
<Text6 as="h1">{title}</Text6>
</div>

{normalizedDescription && (
<div
className={classnames(animateText && styles.feedbackTextAppearMedium)}
data-testid="description"
aria-hidden={hideOthers}
Copy link
Copy Markdown
Member

@anabelengp anabelengp May 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do these divs need to be hiden?they are also animated

Copy link
Copy Markdown
Author

@javierfdezcast javierfdezcast May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

they are hidden because if not, the screen reader reads then before the title

>
{normalizedDescription && (
<Text3 regular color={vars.colors.textSecondary}>
Expand All @@ -110,6 +133,7 @@ const renderFeedbackBody = (
: styles.feedbackTextAppearMedium)
)}
data-testid="slot"
aria-hidden={hideOthers}
>
{extra}
</div>
Expand All @@ -119,12 +143,16 @@ const renderFeedbackBody = (
);
};

const renderInlineFeedbackBody = (feedbackBody: React.ReactNode, buttons: ButtonGroupProps) => {
const renderInlineFeedbackBody = (
feedbackBody: React.ReactNode,
buttons: ButtonGroupProps,
shouldReadButtons: boolean
) => {
const hasButtons = checkHasButtons(buttons);
return (
<Stack space={{desktop: 40, mobile: 24}}>
{feedbackBody}
{hasButtons && <ButtonGroup {...buttons} />}
<div aria-hidden={!shouldReadButtons}>{hasButtons && <ButtonGroup {...buttons} />}</div>
</Stack>
);
};
Expand Down Expand Up @@ -223,18 +251,30 @@ export const FeedbackScreen = ({
const {isTabletOrSmaller} = useScreenSize();

const hasButtons = checkHasButtons({primaryButton, secondaryButton, link});

const feedbackBody = renderFeedbackBody(
{asset, title, description, extra},
animateText && areAnimationsSupported(platformOverrides)
const isAnimated = animateText && areAnimationsSupported(platformOverrides);
const [isShouldRead, setShouldRead] = React.useState(!isAnimated);

const feedbackBody = (
<RenderFeedbackBody
asset={asset}
title={title}
description={description}
extra={extra}
animateText={isAnimated}
setShouldRead={setShouldRead}
/>
);

if (!isTabletOrSmaller && unstable_inlineInDesktop) {
return renderInlineFeedbackBody(feedbackBody, {
primaryButton,
secondaryButton,
link,
});
return renderInlineFeedbackBody(
feedbackBody,
{
primaryButton,
secondaryButton,
link,
},
isShouldRead
);
}

return (
Expand All @@ -261,6 +301,7 @@ export const FeedbackScreen = ({
containerBgColor={
isInverse ? vars.colors.backgroundBrand : vars.colors.background
}
hideDivToScreenReaders={!isShouldRead}
>
<ResponsiveLayout>
<div className={styles.container}>
Expand Down Expand Up @@ -385,6 +426,7 @@ export const SuccessFeedback = ({
}: AssetFeedbackProps): JSX.Element => {
useHapticFeedback('success');
const {skinName, platformOverrides} = useTheme();
const [isShouldRead, setShouldRead] = React.useState(false);
Copy link
Copy Markdown
Member

@anabelengp anabelengp May 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should the initial state depend on areAnimationsSupported?


const asset =
skinName === VIVO_SKIN ? (
Expand All @@ -394,15 +436,25 @@ export const SuccessFeedback = ({
) : (
<IconSuccess size="100%" />
);
const feedbackBody = renderFeedbackBody(
{asset, title, description, extra},
areAnimationsSupported(platformOverrides)
const feedbackBody = (
<RenderFeedbackBody
asset={asset}
title={title}
description={description}
extra={extra}
animateText={areAnimationsSupported(platformOverrides)}
setShouldRead={setShouldRead}
/>
);
const inlineFeedbackBody = renderInlineFeedbackBody(
feedbackBody,
{
primaryButton,
secondaryButton,
link,
},
isShouldRead
);
const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
primaryButton,
secondaryButton,
link,
});

return renderFeedback({
isInverse: true,
Expand Down
Loading