Improve BannerSlider UX and accessibility (Won-Games#67)

* Fix hidden Banner focusable on BannerSlider * Improve BannerSlider slick dots UX to show focus
victory-a · Aug 20, 2021 · c1fc717 · c1fc717
1 parent d081898
commit c1fc717
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/BannerSlider/styles.ts b/src/components/BannerSlider/styles.ts
@@ -21,10 +21,15 @@ export const Wrapper = styled.section`
         justify-content: center;
         margin: 0 ${theme.spacings.xxsmall};
         cursor: pointer;
+        transition: box-shadow ${theme.transition.default};
 
         &.slick-active {
           background: ${theme.colors.primary};
         }
+
+        &:focus-within {
+          box-shadow: 0 0 0 0.3rem ${theme.colors.secondary};
+        }
       }
 
       button {
@@ -35,6 +40,14 @@ export const Wrapper = styled.section`
       }
     }
 
+    .slick-slide {
+      visibility: hidden;
+
+      &.slick-active.slick-current {
+        visibility: visible;
+      }
+    }
+
     ${media.greaterThan('large')`
       ${BannerStyles.Wrapper} {
         max-width: 104rem;

diff --git a/src/components/BannerSlider/test.tsx b/src/components/BannerSlider/test.tsx
@@ -39,8 +39,8 @@ describe('<BannerSlider />', () => {
     ).toBeInTheDocument()
 
     expect(
-      screen.getByRole('heading', { name: /defy death 2/i, hidden: true })
-    ).toBeInTheDocument()
+      screen.queryByRole('heading', { name: /defy death 2/i, hidden: true })
+    ).not.toBeInTheDocument()
   })
 
   it('should render with the dots', () => {