Merge pull request #2814 from brave/ntp-accessibility

Make NTP setting menu keyboard accessible

.storybook/config.js

@@ -1,6 +1,5 @@
-import { withBackgrounds } from '@storybook/addon-backgrounds'
+import 'emptykit.css'
 import { configure, addDecorator, addParameters } from '@storybook/react'
-import { withOptions } from '@storybook/addon-options'
 import { initLocale } from 'brave-ui/helpers'
 import locale from './locale'
 import { withThemesProvider } from 'storybook-addon-styled-component-theme'

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -64,14 +64,12 @@ export const gridSitesUpdated = (gridSites: NewTab.Site[]) => action(types.NEW_T
 
 export const statsUpdated = () => action(types.NEW_TAB_STATS_UPDATED)
 
+export const textDirectionUpdated = (textDirection: string) => action(types.NEW_TAB_TEXT_DIRECTION_UPDATED, textDirection)
+
 export const changePrivateSearchEngine = (shouldUse: boolean) => action(types.NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE, {
   shouldUse
 })
 
-export const showSettingsMenu = () => action(types.NEW_TAB_SHOW_SETTINGS_MENU)
-
-export const closeSettingsMenu = () => action(types.NEW_TAB_CLOSE_SETTINGS_MENU)
-
 export const preferencesUpdated = (preferences: Preferences) => action(types.NEW_TAB_PREFERENCES_UPDATED, {
   preferences
 })

components/brave_new_tab_ui/brave_new_tab.tsx

@@ -23,6 +23,7 @@ import '../fonts/poppins.css'
 import '../fonts/muli.css'
 
 async function initialize () {
+  getTextDirection()
   render(
     <Provider store={store}>
       <ThemeProvider theme={Theme}>
@@ -42,6 +43,12 @@ async function updatePreferences () {
   actions.preferencesUpdated(preferences)
 }
 
+function getTextDirection () {
+  const actions = dataFetchAPI.getActions()
+  const textDirection = window.loadTimeData.getString('textdirection')
+  actions.textDirectionUpdated(textDirection)
+}
+
 function updateStats () {
   const actions = dataFetchAPI.getActions()
   actions.statsUpdated()

components/brave_new_tab_ui/components/default/grid/index.ts

@@ -82,10 +82,6 @@ export const Footer = styled<{}, 'footer'>('footer')`
     grid-template-areas:
       "credits actions";
 
-    > *:first-child {
-      text-align: left;
-    }
-
     > *:nth-child(2) {
       justify-content: flex-end;
     }

components/brave_new_tab_ui/components/default/index.ts

@@ -4,7 +4,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { StatsContainer, StatsItem } from './stats'
-import { Page, DynamicBackground, Gradient, Link, Navigation, IconLink, PhotoName } from './page'
+import { Page, DynamicBackground, Gradient, Link, Navigation, IconLink, IconButton, PhotoName } from './page'
 import { Header, Main, Footer } from './grid'
 import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from './settings'
 import { List, ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './topSites'
@@ -21,6 +21,7 @@ export {
   Link,
   Navigation,
   IconLink,
+  IconButton,
   PhotoName,
   Header,
   Main,

components/brave_new_tab_ui/components/default/page/index.ts

@@ -90,12 +90,11 @@ export const Navigation = styled<{}, 'nav'>('nav')`
   display: flex;
 `
 
-interface IconLinkProps {
-  disabled?: boolean
+interface IconButtonProps {
+  clickDisabled?: boolean
 }
 
-export const IconLink = styled<IconLinkProps, 'a'>('a')`
-  pointer-events: ${p => p.disabled && 'none'};
+export const IconLink = styled<{}, 'a'>('a')`
   display: flex;
   width: 24px;
   height: 24px;
@@ -109,3 +108,21 @@ export const IconLink = styled<IconLinkProps, 'a'>('a')`
     opacity: 0.95;
   }
 `
+
+export const IconButton = styled<IconButtonProps, 'button'>('button')`
+  pointer-events: ${p => p.clickDisabled && 'none'};
+  display: flex;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  margin: 12px;
+  cursor: pointer;
+  color: #ffffff;
+  background-color: transparent;
+  opacity: 0.7;
+  transition: opacity 0.15s ease, filter 0.15s ease;
+  &:hover {
+    opacity: 0.95;
+  }
+`

components/brave_new_tab_ui/components/default/settings/index.ts

@@ -4,7 +4,15 @@
 
 import styled from 'styled-components'
 
-export const SettingsMenu = styled<{}, 'div'>('div')`
+interface Props {
+  textDirection: string
+}
+
+export const SettingsMenu = styled<Props, 'div'>('div')`
+  bottom: 48px;
+  width: auto;
+  position: absolute;
+  ${p => p.textDirection && (p.textDirection === 'rtl') ? `left: 12px` : `right: 12px`}
   background-color: ${p => p.theme.color.contextMenuBackground};
   color:  ${p => p.theme.color.contextMenuForeground};
   border-radius: 8px;
@@ -38,14 +46,7 @@ export const SettingsText = styled<{}, 'span'>('span')`
 `
 
 export const SettingsWrapper = styled<{}, 'div'>('div')`
-  position: absolute;
-  bottom: 118px;
-  padding: 0 222px;
+  position: relative;
   display: flex;
-  width: 100%;
   justify-content: flex-end;
-
-  @media screen and (max-width: 1150px) {
-    padding: 0 192px;
-  }
 `

components/brave_new_tab_ui/components/toggle/index.tsx

@@ -9,7 +9,7 @@ export interface Props {
   testId?: string
   checked?: boolean
   disabled?: boolean
-  onChange?: (e: any) => void
+  onChange?: (event: any) => void
   id?: string
   readOnly?: boolean
   autoFocus?: boolean
@@ -41,17 +41,17 @@ export class Toggle extends React.PureComponent<Props, ToggleState> {
     }
   }
 
-  handleChange (e: any) {
+  handleChange (event: any) {
     const { props } = this
     if (props.disabled) {
       return
     }
     if (!('checked' in props)) {
-      this.setState({ checked: e.target.checked })
+      this.setState({ checked: event.target.checked })
     }
 
     if (props.onChange) {
-      props.onChange({ target: { checked: e.target.checked } })
+      props.onChange({ target: { checked: event.target.checked } })
     }
   }
 

components/brave_new_tab_ui/constants/new_tab_types.ts

@@ -18,7 +18,6 @@ export const enum types {
   NEW_TAB_GRID_SITES_UPDATED = '@@newtab/NEW_TAB_GRID_SITES_UPDATED',
   NEW_TAB_STATS_UPDATED = '@@newtab/NEW_TAB_STATS_UPDATED',
   NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE = '@@newtab/NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE',
-  NEW_TAB_SHOW_SETTINGS_MENU = '@@newtab/NEW_TAB_SHOW_SETTINGS_MENU',
-  NEW_TAB_CLOSE_SETTINGS_MENU = '@@newtab/NEW_TAB_CLOSE_SETTINGS_MENU',
-  NEW_TAB_PREFERENCES_UPDATED = '@@newtab/NEW_TAB_PREFERENCES_UPDATED'
+  NEW_TAB_PREFERENCES_UPDATED = '@@newtab/NEW_TAB_PREFERENCES_UPDATED',
+  NEW_TAB_TEXT_DIRECTION_UPDATED = '@@newtab/NEW_TAB_TEXT_DIRECTION_UPDATED'
 }

components/brave_new_tab_ui/containers/newTab/footerInfo.tsx

@@ -8,46 +8,75 @@ import * as React from 'react'
 import { Link, Navigation, IconLink, PhotoName } from '../../components/default'
 
 // Icons
-import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/icons'
+import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons'
 
 // Helpers
 import { getLocale } from '../../../common/locale'
+import Settings from './settings'
 
 interface Props {
-  backgroundImageInfo: NewTab.Image | undefined
+  textDirection: string
+  onClickOutside: () => void
+  backgroundImageInfo: any
   onClickSettings: () => void
-  isSettingsMenuOpen: boolean
+  showSettingsMenu: boolean
   showPhotoInfo: boolean
+  toggleShowBackgroundImage: () => void
+  toggleShowClock: () => void
+  toggleShowStats: () => void
+  toggleShowTopSites: () => void
+  showBackgroundImage: boolean
+  showClock: boolean
+  showStats: boolean
+  showTopSites: boolean
 }
 
-export default class FooterInfo extends React.Component<Props, {}> {
+export default class FooterInfo extends React.PureComponent<Props, {}> {
+
   render () {
     const {
+      textDirection,
       backgroundImageInfo,
       onClickSettings,
-      isSettingsMenuOpen,
-      showPhotoInfo
+      showSettingsMenu,
+      showPhotoInfo,
+      onClickOutside,
+      toggleShowBackgroundImage,
+      toggleShowClock,
+      toggleShowStats,
+      toggleShowTopSites,
+      showBackgroundImage,
+      showClock,
+      showStats,
+      showTopSites
     } = this.props
 
-    if (!backgroundImageInfo) {
-      return null
-    }
-
     return (
       <>
-      <div>
-        {showPhotoInfo &&
-        <PhotoName>
-          {`${getLocale('photoBy')} `}
-          <Link href={backgroundImageInfo.link} rel='noreferrer noopener' target='_blank'>
-          {backgroundImageInfo.author}
-          </Link>
-        </PhotoName>}
-      </div>
+        <div>
+          {showPhotoInfo &&
+          <PhotoName>
+            {`${getLocale('photoBy')} `}
+            <Link href={backgroundImageInfo.link} rel='noreferrer noopener' target='_blank'>
+              {backgroundImageInfo.author}
+            </Link>
+          </PhotoName>}
+        </div>
         <Navigation>
-          <IconLink title={getLocale('dashboardSettingsTitle')} onClick={onClickSettings} disabled={isSettingsMenuOpen}>
-            <SettingsIcon />
-          </IconLink>
+          <Settings
+            textDirection={textDirection}
+            showSettingsMenu={showSettingsMenu}
+            onClickOutside={onClickOutside}
+            onClick={onClickSettings}
+            toggleShowBackgroundImage={toggleShowBackgroundImage}
+            toggleShowClock={toggleShowClock}
+            toggleShowStats={toggleShowStats}
+            toggleShowTopSites={toggleShowTopSites}
+            showBackgroundImage={showBackgroundImage}
+            showClock={showClock}
+            showStats={showStats}
+            showTopSites={showTopSites}
+          />
           <IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings'>
             <SettingsAdvancedIcon />
           </IconLink>

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -17,7 +17,6 @@ import {
 } from '../../components/default'
 
 // Components
-import Settings from './settings'
 import Stats from './stats'
 import Block from './block'
 import FooterInfo from './footerInfo'
@@ -32,7 +31,16 @@ interface Props {
   saveShowStats: (value: boolean) => void
 }
 
-class NewTabPage extends React.Component<Props, {}> {
+interface State {
+  showSettingsMenu: boolean
+}
+
+class NewTabPage extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { showSettingsMenu: false }
+  }
+
   componentDidMount () {
     // if a notification is open at component mounting time, close it
     this.props.actions.onHideSiteRemovalNotification()
@@ -90,16 +98,17 @@ class NewTabPage extends React.Component<Props, {}> {
     )
   }
 
-  showSettings = () => {
-    this.props.actions.showSettingsMenu()
+  closeSettings = () => {
+    this.setState({ showSettingsMenu: false })
   }
 
-  closeSettings = () => {
-    this.props.actions.closeSettingsMenu()
+  toggleSettings = () => {
+    this.setState({ showSettingsMenu: !this.state.showSettingsMenu })
   }
 
   render () {
     const { newTabData, actions } = this.props
+    const { showSettingsMenu } = this.state
 
     if (!newTabData || !newTabData.backgroundImage) {
       return null
@@ -141,10 +150,14 @@ class NewTabPage extends React.Component<Props, {}> {
               }
             </Main>
           </Header>
-          {
-            newTabData.showSettings &&
-            <Settings
+          <Footer>
+            <FooterInfo
+              textDirection={newTabData.textDirection}
               onClickOutside={this.closeSettings}
+              backgroundImageInfo={newTabData.backgroundImage}
+              onClickSettings={this.toggleSettings}
+              showSettingsMenu={showSettingsMenu}
+              showPhotoInfo={newTabData.showBackgroundImage}
               toggleShowBackgroundImage={this.toggleShowBackgroundImage}
               toggleShowClock={this.toggleShowClock}
               toggleShowStats={this.toggleShowStats}
@@ -154,14 +167,6 @@ class NewTabPage extends React.Component<Props, {}> {
               showStats={newTabData.showStats}
               showTopSites={newTabData.showTopSites}
             />
-          }
-          <Footer>
-            <FooterInfo
-              backgroundImageInfo={newTabData.backgroundImage}
-              onClickSettings={this.showSettings}
-              isSettingsMenuOpen={newTabData.showSettings}
-              showPhotoInfo={newTabData.showBackgroundImage}
-            />
           </Footer>
         </Page>
       </DynamicBackground>