Tipping Banner accessibility/style/copy updates

[ryanml]

Fixes: brave/brave-browser#6147

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

Defined in issue, be sure to have BAT on hand

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[ryanml]

@NejcZdovc per discussion querySelector call was removed, validation happens at the Amount component level, still couldn't nail down a dynamic ref

[masparrow]

@ryanml Changes LGTM, but FYI;

• Clean install
• Enable rewards
• http://vimeo.com/willchristiansen
• Autoplay is disabled by default (Version 0.72.52 Chromium: 77.0.3865.90 (Developer Build) (64-bit))
• this causes ‘Page unresponsive’ popups which interferes with tip panel - this is just an FYI with QA in mind

But, with Autoplay enabled;

• Send tip is focused, but tabbing takes you out of the ‘Tip amount’ pane to the URL, and then tabbing again just goes ‘somewhere’ in the main page behind the Tip panel
• I’d expect tab to be restricted within the ‘Tip amount’ pane so that; Send Tip -> 1.0 BAT -> 5.0 BAT -> 10.0 BAT -> Make this monthly -> Send Tip -> 1.0 BAT and so on.

[ryanml]

rebased

[tmancey]

LGTM++

[NejcZdovc]

1. airplane icon should be white
   

2. click should be on button and not on the whole box (same should be fixed on monthly banner)
   current
   
   expected
   

changes made