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 8, 2019 · 0a6d4bc · 0a6d4bc
1 parent 225f03a
commit 0a6d4bc
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 26 deletions.
diff --git a/components/brave_welcome_ui/brave_welcome.tsx b/components/brave_welcome_ui/brave_welcome.tsx
@@ -7,8 +7,8 @@ import { render } from 'react-dom'
 import { bindActionCreators } from 'redux'
 import { Provider } from 'react-redux'
 
-import welcomeDarkTheme from 'brave-ui/theme/welcome-dark'
-import welcomeLightTheme from 'brave-ui/theme/welcome-light'
+import welcomeDarkTheme from './theme/welcome-dark'
+import welcomeLightTheme from './theme/welcome-light'
 import BraveCoreThemeProvider from '../common/BraveCoreThemeProvider'
 
 // Components

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 ${p => p.theme.color.outlineColor};
+  }
 `
 
 export const PrimaryButton = styled(Button as ComponentType<ButtonProps>)`
@@ -55,20 +59,26 @@ export const PrimaryButton = styled(Button as ComponentType<ButtonProps>)`
   }
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(255,80,0,0.2);
+    box-shadow: 0 0 0 2px ${p => p.theme.color.outlineColor};
   }
 `
 
 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 ${p => p.theme.color.outlineColor};
+    border-radius: 50%;
+  }
+
   ${p => p.active && css`
     color: #FB542B;
 
@@ -97,7 +107,7 @@ export const Link = styled<{}, 'button'>('button')`
     text-decoration: underline;
   }
   &:focus {
-    outline-color: ${p => p.theme.color.brandBrave};
+    outline-color: ${p => p.theme.color.outlineColor};
     outline-width: 2px;
   }
   &:active {

diff --git a/components/brave_welcome_ui/components/wrapper/index.ts b/components/brave_welcome_ui/components/wrapper/index.ts
@@ -82,6 +82,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/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx
@@ -126,8 +126,8 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
             <SlideContent>
               <WelcomeBox index={1} currentScreen={currentScreen} onClick={this.onClickLetsGo} />
               <ImportBox index={2} currentScreen={currentScreen} onClick={this.onClickImport} />
-              <SearchBox index={3} currentScreen={currentScreen} onClick={this.onClickConfirmDefaultSearchEngine} fakeOnChange={this.onChangeDefaultSearchEngine} isDefaultSearchGoogle={isDefaultSearchGoogle}/>
-              <ShieldsBox index={4} currentScreen={currentScreen} />
+              <ShieldsBox index={3} currentScreen={currentScreen} />
+              <SearchBox index={4} currentScreen={currentScreen} onClick={this.onClickConfirmDefaultSearchEngine} fakeOnChange={this.onChangeDefaultSearchEngine} isDefaultSearchGoogle={isDefaultSearchGoogle}/>
               <RewardsBox index={5} currentScreen={currentScreen} onClick={this.onClickRewardsGetStarted} />
             </SlideContent>
             <FooterBox

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>

diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx
@@ -4,8 +4,8 @@
 
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
-import welcomeDarkTheme from 'brave-ui/theme/welcome-dark'
-import welcomeLightTheme from 'brave-ui/theme/welcome-light'
+import welcomeDarkTheme from '../theme/welcome-dark'
+import welcomeLightTheme from '../theme/welcome-light'
 import { withThemesProvider } from 'storybook-addon-styled-component-theme'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
 

diff --git a/components/brave_welcome_ui/theme/welcome-dark.ts b/components/brave_welcome_ui/theme/welcome-dark.ts
@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import ITheme from 'brave-ui/theme/theme-interface'
+import IThemeWelcomePage from './welcome-theme'
+import defaultTheme from 'brave-ui/theme/brave-default'
+import colors from 'brave-ui/theme/colors'
+
+const welcomeDarkTheme: ITheme & IThemeWelcomePage = {
+  ...defaultTheme,
+  name: 'Welcome Dark',
+  color: {
+    ...defaultTheme.color,
+    text: colors.white,
+    panelBackground: colors.grey900,
+    outlineColor: 'rgba(255,255,255,0.5)'
+  }
+}
+
+export default welcomeDarkTheme
diff --git a/components/brave_welcome_ui/theme/welcome-light.ts b/components/brave_welcome_ui/theme/welcome-light.ts
@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import ITheme from 'brave-ui/theme/theme-interface'
+import IThemeWelcomePage from './welcome-theme'
+import defaultTheme from 'brave-ui/theme/brave-default'
+import colors from 'brave-ui/theme/colors'
+
+const welcomeLightTheme: ITheme & IThemeWelcomePage = {
+  ...defaultTheme,
+  name: 'Welcome Light',
+  color: {
+    ...defaultTheme.color,
+    text: colors.neutral900,
+    panelBackground: '#F9F9FD',
+    panelBackgroundSecondary: colors.neutral000,
+    outlineColor: 'rgba(255,80,0,0.2)'
+  }
+}
+
+export default welcomeLightTheme
diff --git a/components/brave_welcome_ui/theme/welcome-theme.ts b/components/brave_welcome_ui/theme/welcome-theme.ts
@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export default interface IThemeWelcomePage {
+  color: {
+    outlineColor: string
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -271,10 +271,10 @@
     "@dump247/storybook-state": "^1.6.1",
     "@storybook/addon-actions": "^5.1.9",
     "@storybook/addon-backgrounds": "^5.1.9",
+    "@storybook/addon-centered": "^5.0.1",
     "@storybook/addon-knobs": "^5.1.9",
     "@storybook/addon-options": "^5.1.9",
     "@storybook/addons": "^5.1.9",
-    "@storybook/addon-centered": "^5.0.1",
     "@storybook/react": "^5.1.9",
     "@types/bluebird": "^3.5.25",
     "@types/chrome": "0.0.69",
@@ -288,12 +288,12 @@
     "@types/react-dom": "^16.0.7",
     "@types/react-redux": "6.0.4",
     "@types/redux-logger": "^3.0.7",
-    "@types/storybook__addon-knobs": "^5.0.2",
     "@types/storybook__addon-centered": "^3.3.2",
+    "@types/storybook__addon-knobs": "^5.0.2",
     "@types/storybook__react": "^4.0.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
-    "brave-ui": "github:brave/brave-ui#f040863609c7638160639a17e388b9dc30de9b6c",
+    "brave-ui": "github:brave/brave-ui#f2d131193b5bd51b19cc397de69f1b2e0aebe7c7",
     "css-loader": "^2.1.1",
     "csstype": "^2.5.5",
     "deep-freeze-node": "^1.1.3",