Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit 43829f4

Browse files
committed
[pricing] make the tabs accessible via keyboard.
1 parent 308ca20 commit 43829f4

File tree

2 files changed

+15
-8
lines changed

2 files changed

+15
-8
lines changed

src/components/pricing/PricingBoxes.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,30 @@ const PricingContainer = styled.div`
113113
border: 1px solid ${colors.offWhite2};
114114
`;
115115

116-
const Tab = styled.div`
116+
const Tab = styled.button`
117117
padding: 1rem 2rem;
118118
font-size: 18px;
119119
color: ${colors.textLight};
120120
min-width: 15rem;
121121
text-align: center;
122122
background-color: ${colors.white};
123123
border: 1px solid ${colors.offWhite2};
124-
border-bottom: none;
124+
border-bottom-color: transparent;
125125
margin-bottom: -1px;
126126
cursor: pointer;
127+
128+
&:first-of-type {
129+
border-right: none;
130+
}
131+
132+
&:last-of-type {
133+
border-left: none;
134+
}
135+
136+
body.user-is-tabbing &:focus {
137+
outline: none;
138+
border: 1px solid #1AA6E4;;
139+
}
127140
`;
128141

129142
function isSelfHosted() {
@@ -142,13 +155,11 @@ const PricingBoxes = () => {
142155
}}>
143156
<Tab style={{
144157
backgroundColor: selfHosted ? colors.offWhite2 : colors.white,
145-
borderRight: 'none'
146158
}}
147159
onClick={()=>setSelfHosted(false)}
148160
>Cloud</Tab>
149161
<Tab style={{
150162
backgroundColor: selfHosted ? colors.white : colors.offWhite2,
151-
borderLeft: 'none'
152163
}}
153164
onClick={()=> setSelfHosted(true)}
154165
>Self-Hosted</Tab>

src/pages/pricing.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,8 @@ const PricingPage: React.SFC<{}> = () => (
1919
<div className="grey-container">
2020
<div className="row">
2121
<PricingBoxes />
22-
</div>
23-
24-
<div className="row">
2522
<Plans />
2623
</div>
27-
2824
</div>
2925

3026
<div className="row">

0 commit comments

Comments
 (0)