From 40f71cb79b2e812377dd510a1d9dafd25bc51d82 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 21 Jun 2023 10:38:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20accessibility=20issue=20?=
 =?UTF-8?q?with=20hidden=20success=20message=20in=20signup=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://ghost.slack.com/archives/CTH5NDJMS/p1686928938857799

The button read 'Subscribe email sent' on screen readers.
---
 apps/signup-form/assets/icons/spinner.svg          | 4 ++--
 apps/signup-form/src/components/pages/FormView.tsx | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/signup-form/assets/icons/spinner.svg b/apps/signup-form/assets/icons/spinner.svg
index 4616576d1b..1f5607a13d 100644
--- a/apps/signup-form/assets/icons/spinner.svg
+++ b/apps/signup-form/assets/icons/spinner.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" aria-busy="true" aria-live="polite">
     <g stroke-linecap="round" stroke-width="2" fill="currentColor" stroke="none" stroke-linejoin="round" class="nc-icon-wrapper">
         <g class="nc-loop-dots-4-24-icon-o">
             <circle cx="4" cy="12" r="3"></circle>
@@ -14,4 +14,4 @@
             @keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
         </style>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/apps/signup-form/src/components/pages/FormView.tsx b/apps/signup-form/src/components/pages/FormView.tsx
index 8f4b5f2ad8..200a3475a7 100644
--- a/apps/signup-form/src/components/pages/FormView.tsx
+++ b/apps/signup-form/src/components/pages/FormView.tsx
@@ -56,6 +56,7 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
         onSubmit({email});
     };
 
+    // The complicated transitions are here so that we animate visibility: hidden (step-start/step-end), which is required for screen readers to know what is visible (they ignore opacity: 0)
     return (
         <>
             <form className={`relative flex w-full rounded-[.5rem] border bg-white p-[3px] text-grey-900 transition hover:border-grey-400 focus-visible:border-grey-500 ${error ? '!border-red-500' : 'border-grey-300'}`} onSubmit={submitHandler}>
@@ -75,9 +76,9 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
                     style={{backgroundColor: buttonColor, color: buttonTextColor}}
                     type='submit'
                 >
-                    <span className={`col-start-1 row-start-1 whitespace-nowrap transition-opacity duration-200 ${loading || success ? 'opacity-0' : 'opacity-1'}`}>{t('Subscribe')}</span>
-                    {isMinimal && <span className={`col-start-1 row-start-1 whitespace-nowrap [transition:margin_300ms,opacity_200ms] ${loading || !success ? 'mx-[-40px] opacity-0' : 'opacity-1 mx-0'}`}>{t('Email sent')}</span>}
-                    <span className={`inset-0 col-start-1 row-start-1 flex items-center justify-center transition-opacity duration-200 ${loading ? 'opacity-1' : 'opacity-0'}`}><LoadingIcon /></span>
+                    <span className={`col-start-1 row-start-1 whitespace-nowrap ${loading || success ? '[opacity_200ms,visibility_200ms_step-end] invisible opacity-0' : 'opacity-1 [opacity_200ms,visibility_200ms_step-start] visible'}`}>{t('Subscribe')}</span>
+                    {isMinimal && <span className={`col-start-1 row-start-1 whitespace-nowrap ${loading || !success ? 'invisible mx-[-40px] opacity-0 [transition:margin_300ms,opacity_200ms,visibility_200ms_step-end]' : 'opacity-1 visible mx-0 [transition:margin_300ms,opacity_200ms,visibility_200ms_step-start]'}`}>{t('Email sent')}</span>}
+                    <span className={`inset-0 col-start-1 row-start-1 flex items-center justify-center transition-opacity duration-200 ${!loading ? '[opacity_200ms,visibility_200ms_step-end] invisible opacity-0' : 'opacity-1 [opacity_200ms,visibility_200ms_step-start] visible' }`}><LoadingIcon /></span>
                 </button>
             </form>
         </>