From 5531f99a0a41ce817b77ad2c3ea3ffce2b2916ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Fern=C3=A1ndez=20Castillo?= Date: Mon, 5 May 2025 16:43:59 +0200 Subject: [PATCH 1/5] MOVES-10042 screenreader after animations --- src/feedback.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/feedback.tsx b/src/feedback.tsx index 007d9ce814..02530e543d 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -84,7 +84,7 @@ const renderFeedbackBody = ( {asset} -
+
{title}
@@ -92,7 +92,8 @@ const renderFeedbackBody = (
+ + aria-live="polite" > {normalizedDescription && ( {normalizedDescription} @@ -110,7 +111,8 @@ const renderFeedbackBody = ( : styles.feedbackTextAppearMedium) )} data-testid="slot" - > + + aria-live="polite" > {extra}
)} From a5c12605cbb855412886b5add1f0821a807bb274 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Fern=C3=A1ndez=20Castillo?= Date: Mon, 5 May 2025 16:54:25 +0200 Subject: [PATCH 2/5] Update feedback.tsx --- src/feedback.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/feedback.tsx b/src/feedback.tsx index 02530e543d..1f7e6a493a 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -84,7 +84,11 @@ const renderFeedbackBody = ( {asset}
-
+
{title}
@@ -92,8 +96,8 @@ const renderFeedbackBody = (
+ aria-live="polite" + > {normalizedDescription && ( {normalizedDescription} @@ -111,8 +115,8 @@ const renderFeedbackBody = ( : styles.feedbackTextAppearMedium) )} data-testid="slot" - - aria-live="polite" > + aria-live="polite" + > {extra}
)} From 4ef7d9739eb7b78edabda41481681d68365c5fb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Fern=C3=A1ndez=20Castillo?= Date: Mon, 19 May 2025 17:51:11 +0200 Subject: [PATCH 3/5] test --- src/button-fixed-footer-layout.tsx | 56 ++++++++++--------- src/feedback.tsx | 89 +++++++++++++++++++++--------- 2 files changed, 94 insertions(+), 51 deletions(-) diff --git a/src/button-fixed-footer-layout.tsx b/src/button-fixed-footer-layout.tsx index 011795da7a..bdb8dbea9f 100644 --- a/src/button-fixed-footer-layout.tsx +++ b/src/button-fixed-footer-layout.tsx @@ -15,6 +15,7 @@ type Props = { footerBgColor?: string; containerBgColor?: string; children: React.ReactNode; + shouldRead?: boolean; onChangeFooterHeight?: (heightInPx: number) => void; }; @@ -26,36 +27,39 @@ const ButtonFixedFooterLayout = ({ children, footerBgColor, containerBgColor, + shouldRead=false, onChangeFooterHeight, }: Props): JSX.Element => { const hasButton = !!button || !!secondaryButton; return ( - - - - - - } - > - {children} - + + + + + + +
+ } + > + {children} + ); }; diff --git a/src/feedback.tsx b/src/feedback.tsx index 1f7e6a493a..fe4b0e38ec 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -59,15 +59,26 @@ const useHapticFeedback = (type?: HapticFeedback) => { }, [type]); }; -const renderFeedbackBody = ( - { +interface RenderFeedbackBodyProps { + asset: React.ReactNode; + title: string; + description?: React.ReactNode; + extra?: React.ReactNode; + animateText: boolean; + setShouldRead: React.Dispatch>; +} + +const RenderFeedbackBody = ({ asset, title, description, extra, - }: Pick, - animateText: boolean -) => { + animateText, + setShouldRead, + }: RenderFeedbackBodyProps +): JSX.Element =>{ + const [hideOthers, setHideOthers] = React.useState(animateText); + const divRef = React.useRef(null); const normalizedDescription = description && Array.isArray(description) ? ( @@ -78,6 +89,12 @@ const renderFeedbackBody = ( ) : ( description ); + const handleAnimationEnd = () => { + setShouldRead(true); + divRef.current?.focus(); + setHideOthers(false); + }; + return (
@@ -85,9 +102,11 @@ const renderFeedbackBody = (
{title}
@@ -96,7 +115,7 @@ const renderFeedbackBody = (
{normalizedDescription && ( @@ -115,7 +134,7 @@ const renderFeedbackBody = ( : styles.feedbackTextAppearMedium) )} data-testid="slot" - aria-live="polite" + aria-hidden={hideOthers} > {extra}
@@ -125,12 +144,14 @@ const renderFeedbackBody = ( ); }; -const renderInlineFeedbackBody = (feedbackBody: React.ReactNode, buttons: ButtonGroupProps) => { +const renderInlineFeedbackBody = (feedbackBody: React.ReactNode, buttons: ButtonGroupProps, shouldReadButtons: boolean ) => { const hasButtons = checkHasButtons(buttons); return ( {feedbackBody} - {hasButtons && } +
+ {hasButtons && } +
); }; @@ -229,18 +250,27 @@ 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 = ( + ); if (!isTabletOrSmaller && unstable_inlineInDesktop) { return renderInlineFeedbackBody(feedbackBody, { - primaryButton, - secondaryButton, - link, - }); + primaryButton, + secondaryButton, + link, + }, + isShouldRead); } return ( @@ -267,6 +297,7 @@ export const FeedbackScreen = ({ containerBgColor={ isInverse ? vars.colors.backgroundBrand : vars.colors.background } + shouldRead={!isShouldRead} >
@@ -391,6 +422,7 @@ export const SuccessFeedback = ({ }: AssetFeedbackProps): JSX.Element => { useHapticFeedback('success'); const {skinName, platformOverrides} = useTheme(); + const [isShouldRead, setShouldRead] = React.useState(false); const asset = skinName === VIVO_SKIN ? ( @@ -400,15 +432,22 @@ export const SuccessFeedback = ({ ) : ( ); - const feedbackBody = renderFeedbackBody( - {asset, title, description, extra}, - areAnimationsSupported(platformOverrides) + const feedbackBody = ( + ); const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, { - primaryButton, - secondaryButton, - link, - }); + primaryButton, + secondaryButton, + link, + }, + isShouldRead ); return renderFeedback({ isInverse: true, From 476043174ada46170b6d46973abcebdcda3fabbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Fern=C3=A1ndez=20Castillo?= Date: Mon, 19 May 2025 18:01:24 +0200 Subject: [PATCH 4/5] refactor --- src/button-fixed-footer-layout.tsx | 6 +++--- src/feedback.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/button-fixed-footer-layout.tsx b/src/button-fixed-footer-layout.tsx index bdb8dbea9f..e00938329a 100644 --- a/src/button-fixed-footer-layout.tsx +++ b/src/button-fixed-footer-layout.tsx @@ -15,7 +15,7 @@ type Props = { footerBgColor?: string; containerBgColor?: string; children: React.ReactNode; - shouldRead?: boolean; + hideDivToScreenReaders?: boolean; onChangeFooterHeight?: (heightInPx: number) => void; }; @@ -27,7 +27,7 @@ const ButtonFixedFooterLayout = ({ children, footerBgColor, containerBgColor, - shouldRead=false, + hideDivToScreenReaders = false, onChangeFooterHeight, }: Props): JSX.Element => { const hasButton = !!button || !!secondaryButton; @@ -38,7 +38,7 @@ const ButtonFixedFooterLayout = ({ footerBgColor={footerBgColor} containerBgColor={containerBgColor} footer={ -
+
From b1a5a747a7aa8e5a6d1e39b37ba79ab5667cae05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Fern=C3=A1ndez=20Castillo?= Date: Mon, 19 May 2025 18:09:55 +0200 Subject: [PATCH 5/5] prettier --- src/button-fixed-footer-layout.tsx | 56 +++++++++++++-------------- src/feedback.tsx | 61 +++++++++++++++++------------- 2 files changed, 62 insertions(+), 55 deletions(-) diff --git a/src/button-fixed-footer-layout.tsx b/src/button-fixed-footer-layout.tsx index e00938329a..da26cd7655 100644 --- a/src/button-fixed-footer-layout.tsx +++ b/src/button-fixed-footer-layout.tsx @@ -32,34 +32,34 @@ const ButtonFixedFooterLayout = ({ }: Props): JSX.Element => { const hasButton = !!button || !!secondaryButton; return ( - - - - - - -
- } - > - {children} - + + + + + + +
+ } + > + {children} + ); }; diff --git a/src/feedback.tsx b/src/feedback.tsx index bc845c616e..9e055593fb 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -69,14 +69,13 @@ interface RenderFeedbackBodyProps { } const RenderFeedbackBody = ({ - asset, - title, - description, - extra, - animateText, - setShouldRead, - }: RenderFeedbackBodyProps -): JSX.Element =>{ + asset, + title, + description, + extra, + animateText, + setShouldRead, +}: RenderFeedbackBodyProps): JSX.Element => { const [hideOthers, setHideOthers] = React.useState(animateText); const divRef = React.useRef(null); const normalizedDescription = @@ -144,14 +143,16 @@ const RenderFeedbackBody = ({ ); }; -const renderInlineFeedbackBody = (feedbackBody: React.ReactNode, buttons: ButtonGroupProps, shouldReadButtons: boolean ) => { +const renderInlineFeedbackBody = ( + feedbackBody: React.ReactNode, + buttons: ButtonGroupProps, + shouldReadButtons: boolean +) => { const hasButtons = checkHasButtons(buttons); return ( {feedbackBody} -
- {hasButtons && } -
+
{hasButtons && }
 ); }; @@ -250,27 +251,30 @@ export const FeedbackScreen = ({ const {isTabletOrSmaller} = useScreenSize(); const hasButtons = checkHasButtons({primaryButton, secondaryButton, link}); - const isAnimated = animateText && areAnimationsSupported(platformOverrides) + const isAnimated = animateText && areAnimationsSupported(platformOverrides); const [isShouldRead, setShouldRead] = React.useState(!isAnimated); const feedbackBody = ( ); if (!isTabletOrSmaller && unstable_inlineInDesktop) { - return renderInlineFeedbackBody(feedbackBody, { + return renderInlineFeedbackBody( + feedbackBody, + { primaryButton, secondaryButton, link, }, - isShouldRead); + isShouldRead + ); } return ( @@ -434,20 +438,23 @@ export const SuccessFeedback = ({ ); const feedbackBody = ( ); - const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, { + const inlineFeedbackBody = renderInlineFeedbackBody( + feedbackBody, + { primaryButton, secondaryButton, link, }, - isShouldRead ); + isShouldRead + ); return renderFeedback({ isInverse: true,