[pricing] make the tabs accessible via keyboard.

Author: nisarhassan12

src/components/pricing/PricingBoxes.tsx

@@ -113,17 +113,30 @@ const PricingContainer = styled.div`
     border: 1px solid ${colors.offWhite2};
 `;
 
-const Tab = styled.div`
+const Tab = styled.button`
     padding: 1rem 2rem;
     font-size: 18px;
     color: ${colors.textLight};
     min-width: 15rem;
     text-align: center;
     background-color: ${colors.white};
     border: 1px solid ${colors.offWhite2};
-    border-bottom: none;
+    border-bottom-color: transparent;
     margin-bottom: -1px;
     cursor: pointer;
+
+    &:first-of-type {
+       border-right: none;
+    }
+
+    &:last-of-type {
+        border-left: none;
+    }
+
+    body.user-is-tabbing &:focus {
+        outline: none;
+        border: 1px solid #1AA6E4;;
+    }
 `;
 
 function isSelfHosted() {
@@ -142,13 +155,11 @@ const PricingBoxes = () => {
             }}>
                 <Tab style={{
                     backgroundColor: selfHosted ? colors.offWhite2 : colors.white,
-                    borderRight: 'none'
                 }}
                     onClick={()=>setSelfHosted(false)}
                 >Cloud</Tab>
                 <Tab style={{
                     backgroundColor: selfHosted ? colors.white : colors.offWhite2,
-                    borderLeft: 'none'
                 }}
                     onClick={()=> setSelfHosted(true)}
                 >Self-Hosted</Tab>

src/pages/pricing.tsx

@@ -19,12 +19,8 @@ const PricingPage: React.SFC<{}> = () => (
             <div className="grey-container">
                 <div className="row">
                     <PricingBoxes />
-                </div>
-                    
-                <div className="row">
                     <Plans />
                 </div>
-
             </div>
 
             <div className="row">