Fixes brave/brave-browser#6147 - Makes tipping banner accessible

Various style/copy updates
brave · Oct 1, 2019 · 8ee8590 · 8ee8590
1 parent d5f0890
commit 8ee8590
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 13 deletions.
diff --git a/components/brave_rewards/resources/ui/components/amount/index.tsx b/components/brave_rewards/resources/ui/components/amount/index.tsx
@@ -18,17 +18,47 @@ export interface Props {
 }
 
 export default class Amount extends React.PureComponent<Props, {}> {
+  private selectedAmount: HTMLDivElement | null
+
   static defaultProps = {
     type: 'small',
     currency: 'USD',
     converted: 0
   }
 
+  constructor (props: Props) {
+    super(props)
+    this.selectedAmount = null
+  }
+
+  componentDidMount () {
+    if (this.selectedAmount) {
+      this.selectedAmount.click()
+    }
+  }
+
+  selectedNodeRef = (node: HTMLDivElement) => {
+    const { selected } = this.props
+
+    if (selected) {
+      this.selectedAmount = node
+    }
+  }
+
+  getAboutText = (isMobile?: boolean) => {
+    return isMobile ? '' : getLocale('about')
+  }
+
   render () {
     const { id, onSelect, amount, selected, type, converted, currency } = this.props
 
     return (
-      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} data-test-id={'amount-wrapper'}>
+      <StyledWrapper
+        id={id}
+        onClick={onSelect.bind(this, amount)}
+        data-test-id={'amount-wrapper'}
+        innerRef={this.selectedNodeRef}
+      >
         <StyledAmount selected={selected} type={type}>
           <StyledLogo><BatColorIcon /></StyledLogo><StyledNumber>{amount}</StyledNumber> <StyledTokens>{type === 'big' ? 'BAT' : null}</StyledTokens>
         </StyledAmount>

diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx
@@ -50,13 +50,24 @@ export interface Props {
 
 interface State {
   missingFunds: boolean
+  amountChanged: boolean
 }
 
 export default class Donate extends React.PureComponent<Props, State> {
+  private sendButton: HTMLButtonElement | null
+
   constructor (props: Props) {
     super(props)
     this.state = {
-      missingFunds: false
+      missingFunds: false,
+      amountChanged: false
+    }
+    this.sendButton = null
+  }
+
+  componentDidMount () {
+    if (this.sendButton) {
+      this.sendButton.focus()
     }
   }
 
@@ -70,6 +81,10 @@ export default class Donate extends React.PureComponent<Props, State> {
     }
   }
 
+  sendNodeRef = (node: HTMLButtonElement) => {
+    this.sendButton = node
+  }
+
   validateDonation = () => {
     if (this.validateAmount(this.props.balance)) {
       return
@@ -96,6 +111,14 @@ export default class Donate extends React.PureComponent<Props, State> {
     if (this.props.onAmountSelection) {
       this.props.onAmountSelection(tokens)
     }
+
+    this.setState({ amountChanged: true })
+  }
+
+  onKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === 'Enter') {
+      this.validateDonation()
+    }
   }
 
   render () {
@@ -122,11 +145,14 @@ export default class Donate extends React.PureComponent<Props, State> {
           <StyledDonationTitle>{title}</StyledDonationTitle>
             <StyledAmountsWrapper>
               {
-                donationAmounts && donationAmounts.map((donation: Donation) => {
+                donationAmounts && donationAmounts.map((donation: Donation, index: number) => {
+                  const isCurrentAmount = donation.tokens === currentAmount.toString()
+                  const isDefaultAmount = index === 1 && !this.state.amountChanged
+
                   return <div key={`${id}-tip-${donation.tokens}`}>
                     <Amount
                       amount={donation.tokens}
-                      selected={donation.tokens === currentAmount.toString()}
+                      selected={isCurrentAmount || isDefaultAmount}
                       onSelect={this.onAmountChange}
                       converted={donation.converted}
                       type={donateType}
@@ -140,7 +166,11 @@ export default class Donate extends React.PureComponent<Props, State> {
 
         <StyledSend onClick={this.validateDonation} data-test-id={'send-tip-button'} monthly={isMonthly}>
           <StyledButtonWrapper>
-            <SendButton>
+            <SendButton
+              monthly={isMonthly}
+              onKeyUp={this.onKeyUp}
+              innerRef={this.sendNodeRef}
+            >
               <StyledIconSend disabled={disabled} donateType={donateType} monthly={isMonthly}>
                 <SendIcon />
               </StyledIconSend>{actionText}

diff --git a/components/brave_rewards/resources/ui/components/donate/style.ts b/components/brave_rewards/resources/ui/components/donate/style.ts
@@ -85,10 +85,6 @@ export const StyledDonationTitle = styled<StyleProps, 'div'>('div')`
 `
 
 export const StyledSend = styled<StyleProps, 'div'>('div')`
-  background: ${p => p.monthly
-    ? `inherit`
-    : `var(--donate-send-bg)`
-  };
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.2px;
@@ -101,14 +97,22 @@ export const StyledSend = styled<StyleProps, 'div'>('div')`
   padding-bottom: ${p => p.monthly ? 20 : 13}px;
 `
 
-export const StyledSendButton = styled<{}, 'button'>('button')`
+export const StyledSendButton = styled<StyleProps, 'button'>('button')`
   display: block;
   border: none;
   font-size: 12px;
   font-weight: 600;
-  text-transform: uppercase;
   background: var(--donate-send-bg);
   cursor: pointer;
+  margin: 0 auto;
+  border-radius: 20px;
+  padding: 6px 60px;
+  ${(p) => {
+    if (!p.monthly) {
+      return null
+    }
+    return 'margin-left: 0px;'
+  }}
 `
 
 export const StyledMonthlySendButton = styled(StyledSendButton)`
@@ -135,6 +139,7 @@ export const StyledIconSend = styled<StyleProps, 'span'>('span')`
   color: ${p => getIconColor(p)};
   width: 27px;
   height: 27px;
+  margin-left: -20px;
 `
 
 export const StyledFunds = styled<{}, 'div'>('div')`

diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -473,7 +473,7 @@
       <message name="IDS_BRAVE_UI_REWARDS_BACKUP_TEXT2" desc="">Keep this recovery key safe.</message>
       <message name="IDS_BRAVE_UI_REWARDS_BACKUP_TEXT3" desc="">You can always use this key to get your wallet back if something happens to your browser or computer. But make sure to protect it — anyone who gets this key could steal your wallet. It’s probably safest to write it down on a piece of paper, or wherever else you keep important info.</message>
       <message name="IDS_BRAVE_UI_REWARDS_BANNER_TEXT1" desc="">You can support this content creator by sending a tip. It’s a way of thanking them for making great content. Verified creators get paid for their tips during the first week of each calendar month.</message>
-      <message name="IDS_BRAVE_UI_REWARDS_BANNER_TEXT2" desc="">If you like, you can schedule monthly tips to support this creator on a continuous basis.</message>
+      <message name="IDS_BRAVE_UI_REWARDS_BANNER_TEXT2" desc="">You can also set a monthly recurring contribution from within the Brave Rewards panel.</message>
       <message name="IDS_BRAVE_UI_REWARDS_CONTRIBUTE" desc="">Auto-Contribute</message>
       <message name="IDS_BRAVE_UI_REWARDS_CONTRIBUTE_ATTENTION" desc="">Attention</message>
       <message name="IDS_BRAVE_UI_REWARDS_CONTRIBUTE_ATTENTION_SCORE" desc="">Attention</message>
@@ -503,7 +503,7 @@
       <message name="IDS_BRAVE_UI_SAVE" desc="">Save</message>
       <message name="IDS_BRAVE_UI_SEE_ALL_ITEMS" desc="">See all {{numItems}} items</message>
       <message name="IDS_BRAVE_UI_SEE_ALL_SITES" desc="">See all {{numSites}} sites</message>
-      <message name="IDS_BRAVE_UI_SEND_DONATION" desc="">Send my Tip</message>
+      <message name="IDS_BRAVE_UI_SEND_DONATION" desc="">Send Tip</message>
       <message name="IDS_BRAVE_UI_SEND_TIP" desc="">Send my Tip</message>
       <message name="IDS_BRAVE_UI_SETTINGS" desc="">Settings</message>
       <message name="IDS_BRAVE_UI_SITE" desc="">site</message>