unclear what element is in focus on the Tip banner

[LaurenWags]

Description

When you open the Tip banner it is not immediately clear which element is in focus. If you select the tab key you will see some element selected, but you have no idea where you started.

Related issue: #6986

Steps to Reproduce

1. Clean profile
2. Enable Rewards
3. Navigate to a site
4. Open panel, then tip banner

Actual result:

user has no idea what is in focus:

when I select the tab key, some element is shown as focused (in this case, it is the twitter icon):

Expected result:

Some element should be indicated as in focus when the banner is opened to help with accessibility

Reproduces how often:

100%

Brave version (brave://version info)

Brave | 1.21.74 Chromium: 89.0.4389.72 (Official Build) (x86_64)
-- | --
Revision | 3f345f156bfd157bd1bea06310e55f3fb2490359-refs/branch-heads/4389@{#1393}
OS | macOS Version 10.15.7 (Build 19H524)

Version/Channel Information:

• Can you reproduce this issue with the current release? yes
• Can you reproduce this issue with the beta channel? yes
• Can you reproduce this issue with the nightly channel? yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

previous issue was #6985, but it was closed as the tip banner design has changed since then.