Fixes brave/brave-browser#9256 - Makes Binance widget and its nav tab…

… accessible
brave · May 16, 2020 · 171e012 · 171e012
1 parent 4c820aa
commit 171e012
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/components/brave_new_tab_ui/components/default/binance/index.tsx b/components/brave_new_tab_ui/components/default/binance/index.tsx
@@ -1125,26 +1125,29 @@ class Binance extends React.PureComponent<Props, State> {
       <>
         <NavigationBar>
           <NavigationItem
+            tabIndex={0}
             isLeading={true}
             isActive={isSummaryView}
             onClick={this.setSelectedView.bind(this, 'summary')}
           >
             {getLocale('binanceWidgetSummary')}
           </NavigationItem>
           <NavigationItem
-            isLeading={true}
+            tabIndex={0}
             isActive={selectedView === 'deposit'}
             onClick={this.setSelectedView.bind(this, 'deposit')}
           >
             {getLocale('binanceWidgetDepositLabel')}
           </NavigationItem>
           <NavigationItem
+            tabIndex={0}
             isActive={selectedView === 'convert'}
             onClick={this.setSelectedView.bind(this, 'convert')}
           >
             {getLocale('binanceWidgetConvert')}
           </NavigationItem>
           <NavigationItem
+            tabIndex={0}
             isBuy={true}
             isActive={selectedView === 'buy'}
             onClick={this.setSelectedView.bind(this, 'buy')}
@@ -1339,7 +1342,7 @@ class Binance extends React.PureComponent<Props, State> {
     }
 
     return (
-      <WidgetWrapper userAuthed={userAuthed} onClick={this.unpersistDropdowns}>
+      <WidgetWrapper tabIndex={0} userAuthed={userAuthed} onClick={this.unpersistDropdowns}>
         {
           this.renderIndexView()
           ? this.renderIndexView()

diff --git a/components/brave_new_tab_ui/components/default/binance/style.ts b/components/brave_new_tab_ui/components/default/binance/style.ts
@@ -249,23 +249,28 @@ export const NavigationBar = styled<{}, 'div'>('div')`
   }
 `
 
-export const NavigationItem = styled<StyleProps, 'div'>('div')`
+export const NavigationItem = styled<StyleProps, 'button'>('button')`
   float: left;
   width: 25%;
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
   text-align: center;
+  background: inherit;
+  border: none;
   color: ${p => p.isActive ? '#F2C101' : '#9D7B01'};
+  margin-right: ${p => p.isLeading ? 12 : 0}px
   margin-left: ${p => {
     if (p.isBuy) {
-      return -13
-    } else if (p.isLeading) {
-      return 5
+      return -12
     } else {
       return 0
     }
   }}px;
+
+  &:focus {
+    outline: 0;
+  }
 `
 
 export const SelectedView = styled<StyleProps, 'div'>('div')`