diff --git a/components/brave_welcome_ui/brave_welcome.tsx b/components/brave_welcome_ui/brave_welcome.tsx index 7a5ccc16fb28..976b90f595be 100644 --- 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 index bc5f87e727ff..7510b1300700 100644 --- 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('button')` background: none; border: none; cursor: pointer; - outline: inherit; + outline: none; ` export const FooterButton = styled(Button as ComponentType)` @@ -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)` @@ -55,13 +59,14 @@ export const PrimaryButton = styled(Button as ComponentType)` } &: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)` - padding: 0 7px; - font-size: 36px; + margin: 0 7px; + width: 11px; + height: 11px; color: #7C7D8C; letter-spacing: 0; @@ -69,6 +74,11 @@ export const Bullet = styled(BaseButton as ComponentType)` 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 index c93b131f27c9..4b5db6fab30a 100644 --- 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('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 index e92093f71cb1..6c6a8f0e50b3 100644 --- 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 { key={k} onClick={onClickSlideBullet.bind(this, k + 1)} > - • + + + ))} diff --git a/components/brave_welcome_ui/stories/page/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx index a86b6d7513e8..8805ead2775f 100644 --- 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 { - - + + { {Array.from({ length: totalScreensSize }, (v: undefined, k: number) => ( - • + + + + + ))} diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx index 4ce9cf029466..df2a86decac7 100644 --- 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 new file mode 100644 index 000000000000..1d59899efa98 --- /dev/null +++ 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 new file mode 100644 index 000000000000..72a74f8ed08f --- /dev/null +++ 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 new file mode 100644 index 000000000000..e15be6107ad2 --- /dev/null +++ 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 index 6744478e05fc..7c35afe91d45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5912,8 +5912,8 @@ } }, "brave-ui": { - "version": "github:brave/brave-ui#f040863609c7638160639a17e388b9dc30de9b6c", - "from": "github:brave/brave-ui#f040863609c7638160639a17e388b9dc30de9b6c", + "version": "github:brave/brave-ui#f2d131193b5bd51b19cc397de69f1b2e0aebe7c7", + "from": "github:brave/brave-ui#f2d131193b5bd51b19cc397de69f1b2e0aebe7c7", "dev": true, "requires": { "@ctrl/tinycolor": "^2.2.1", @@ -7387,7 +7387,7 @@ }, "d": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz", "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", "dev": true, "requires": { @@ -7677,7 +7677,7 @@ }, "doctrine": { "version": "0.7.2", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz", + "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz", "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=", "dev": true, "requires": { @@ -12639,7 +12639,7 @@ "dependencies": { "buffer": { "version": "4.9.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "dev": true, "requires": { @@ -13209,7 +13209,7 @@ }, "path-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=", "dev": true }, @@ -14646,7 +14646,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -16171,7 +16171,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "requires": { "safe-buffer": "~5.1.0" @@ -17499,7 +17499,7 @@ }, "vm-browserify": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", "dev": true, "requires": { @@ -17908,7 +17908,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { diff --git a/package.json b/package.json index 9e88594ca8ae..9dc35ea7fb8b 100644 --- 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",