fix(components): improve accessibility

feature/typescript-loading-button
sumup-oss · May 2, 2020 · 8fa477b · 8fa477b
1 parent 7bdfaad
commit 8fa477b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -1218,8 +1218,9 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
   transform-origin: 50% 50%;
   position: absolute;
   opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
 }
 
 .circuit-0 {
@@ -1237,12 +1238,13 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
 
 .circuit-2 {
   opacity: 1;
+  visibility: visible;
   -webkit-transform: scale3d(1,1,1);
   -ms-transform: scale3d(1,1,1);
   transform: scale3d(1,1,1);
-  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
-  -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out, visibility 200ms ease-in-out;
+  -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
 }
 
 <button
@@ -1251,7 +1253,6 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
   class="circuit-3"
 >
   <span
-    aria-hidden="true"
     class="circuit-1"
   >
     <span
@@ -1261,7 +1262,6 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
     </span>
   </span>
   <span
-    aria-hidden="false"
     class="circuit-2"
   >
     Things take time

diff --git a/src/components/LoadingButton/LoadingButton.tsx b/src/components/LoadingButton/LoadingButton.tsx
@@ -42,13 +42,16 @@ const buttonStyles = css`
 const spinnerBaseStyles = ({ theme }: StyleProps) => css`
   position: absolute;
   opacity: 0;
-  transition: opacity ${theme.transitions.default};
+  visibility: hidden;
+  transition: opacity ${theme.transitions.default},
+    visibility ${theme.transitions.default};
 `;
 
 const spinnerLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
   isLoading &&
   css`
     opacity: 1;
+    visibility: visible;
   `;
 
 const LoadingIcon = styled(Spinner)<{ isLoading: boolean }>(
@@ -60,15 +63,18 @@ const LoadingLabel = styled.span(hideVisually);
 
 const childrenStyles = ({ theme }: StyleProps) => css`
   opacity: 1;
+  visibility: visible;
   transform: scale3d(1, 1, 1);
   transition: opacity ${theme.transitions.default},
-    transform ${theme.transitions.default};
+    transform ${theme.transitions.default},
+    visibility ${theme.transitions.default};
 `;
 
 const childrenLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
   isLoading &&
   css`
     opacity: 0;
+    visibility: hidden;
     transform: scale3d(0, 0, 0);
   `;
 
@@ -90,11 +96,9 @@ export const LoadingButton: FC<LoadingButtonProps> = ({
     aria-busy={isLoading}
     {...props}
   >
-    <LoadingIcon isLoading={isLoading} aria-hidden={!isLoading}>
+    <LoadingIcon isLoading={isLoading}>
       <LoadingLabel>{loadingLabel}</LoadingLabel>
     </LoadingIcon>
-    <Children isLoading={isLoading} aria-hidden={isLoading}>
-      {children}
-    </Children>
+    <Children isLoading={isLoading}>{children}</Children>
   </Button>
 );
diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
@@ -88,8 +88,9 @@ exports[`LoadingButton styles should render with default styles 1`] = `
   transform-origin: 50% 50%;
   position: absolute;
   opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
 }
 
 .circuit-0 {
@@ -107,12 +108,13 @@ exports[`LoadingButton styles should render with default styles 1`] = `
 
 .circuit-2 {
   opacity: 1;
+  visibility: visible;
   -webkit-transform: scale3d(1,1,1);
   -ms-transform: scale3d(1,1,1);
   transform: scale3d(1,1,1);
-  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
-  -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out, visibility 200ms ease-in-out;
+  -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
 }
 
 <button
@@ -121,7 +123,6 @@ exports[`LoadingButton styles should render with default styles 1`] = `
   class="circuit-3"
 >
   <span
-    aria-hidden="true"
     class="circuit-1"
   >
     <span
@@ -131,7 +132,6 @@ exports[`LoadingButton styles should render with default styles 1`] = `
     </span>
   </span>
   <span
-    aria-hidden="false"
     class="circuit-2"
   >
     Things take time
@@ -254,20 +254,24 @@ exports[`LoadingButton styles should render with loading styles 1`] = `
   transform-origin: 50% 50%;
   position: absolute;
   opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
   opacity: 1;
+  visibility: visible;
 }
 
 .circuit-2 {
   opacity: 1;
+  visibility: visible;
   -webkit-transform: scale3d(1,1,1);
   -ms-transform: scale3d(1,1,1);
   transform: scale3d(1,1,1);
-  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
-  -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out, visibility 200ms ease-in-out;
+  -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
   opacity: 0;
+  visibility: hidden;
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
   transform: scale3d(0,0,0);
@@ -280,7 +284,6 @@ exports[`LoadingButton styles should render with loading styles 1`] = `
   disabled=""
 >
   <span
-    aria-hidden="false"
     class="circuit-1"
   >
     <span
@@ -290,7 +293,6 @@ exports[`LoadingButton styles should render with loading styles 1`] = `
     </span>
   </span>
   <span
-    aria-hidden="true"
     class="circuit-2"
   >
     Things take time