Allow navigation via tab key in welcome page

fix brave/brave-browser#5504 Welcome page navigation via tab is impossible without this change since all non-visible content is hidden visually but still accessible via keyboard. This change fixes it and improves other element focus.
brave · Oct 1, 2019 · 5747a8c · 5747a8c
1 parent 495d1a9
commit 5747a8c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/components/brave_welcome_ui/components/button/index.ts b/components/brave_welcome_ui/components/button/index.ts
@@ -19,7 +19,7 @@ const BaseButton = styled<BaseButtonProps, 'button'>('button')`
   background: none;
   border: none;
   cursor: pointer;
-  outline: inherit;
+  outline: none;
 `
 
 export const FooterButton = styled(Button as ComponentType<ButtonProps>)`
@@ -45,6 +45,10 @@ export const SkipButton = styled(BaseButton)`
   &:hover {
     opacity: .9;
   }
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(33,37,41,0.2);
+  }
 `
 
 export const PrimaryButton = styled(Button as ComponentType<ButtonProps>)`
@@ -60,15 +64,21 @@ export const PrimaryButton = styled(Button as ComponentType<ButtonProps>)`
 `
 
 export const Bullet = styled(BaseButton as ComponentType<any>)`
-  padding: 0 7px;
-  font-size: 36px;
+  margin: 0 7px;
+  width: 11px;
+  height: 11px;
   color: #7C7D8C;
   letter-spacing: 0;
 
   &:hover {
     color: #343546;
   }
 
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(255,80,0,0.2);
+    border-radius: 50%;
+  }
+
   ${p => p.active && css`
     color: #FB542B;
 

diff --git a/components/brave_welcome_ui/components/wrapper/index.ts b/components/brave_welcome_ui/components/wrapper/index.ts
@@ -77,6 +77,17 @@ export const Content = styled<ContentProps, 'section'>('section')`
   max-width: 580px;
   padding: 24px;
 
+  /*
+    prevents focus on all content's child elements if the parent is not active.
+    this is needed because due to our animation transition, the parent container
+    cannot have "display: none" and is using "opacity: 0" instead, making invisible
+    elements still accessible via keyboard, creating an a11y issue.
+    see https://github.com/brave/brave-browser/issues/5504
+  */
+  > * {
+    display: ${p => p.active === false && 'none'};
+  }
+
   ${p => p.active && css`
     opacity: 1;
     transform: translateX(0) scale(1);

diff --git a/components/brave_welcome_ui/containers/screens/footerBox.tsx b/components/brave_welcome_ui/containers/screens/footerBox.tsx
@@ -52,7 +52,9 @@ export default class FooterBox extends React.PureComponent<Props, {}> {
               key={k}
               onClick={onClickSlideBullet.bind(this, k + 1)}
             >
-              &bull;
+              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                <circle cx='8' cy='8' r='8' fill='currentColor' fillRule='evenodd' />
+              </svg>
             </Bullet>
           ))}
         </FooterMiddleColumn>

diff --git a/components/brave_welcome_ui/stories/page/screens/footerBox.tsx b/components/brave_welcome_ui/stories/page/screens/footerBox.tsx
@@ -40,7 +40,11 @@ export default class FooterBox extends React.PureComponent<Props, {}> {
         </FooterLeftColumn>
         <FooterMiddleColumn>
           {Array.from({ length: totalScreensSize }, (v: undefined, k: number) => (
-            <Bullet active={currentScreen === k + 1} key={k} onClick={onClickSlideBullet.bind(this, k + 1)}>&bull;</Bullet>
+            <Bullet active={currentScreen === k + 1} key={k} onClick={onClickSlideBullet.bind(this, k + 1)}>
+              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                <circle cx='8' cy='8' r='8' fill='currentColor' fillRule='evenodd' />
+              </svg>
+            </Bullet>
           ))}
         </FooterMiddleColumn>
         <FooterRightColumn>