blue border when clicking on buttons/icons on rewards page

[LaurenWags]

Description

Clicking on buttons/icons on the rewards page shows a blue border around the asset. Settings icons, Add/Manage Funds text and icons have it, etc.

Steps to Reproduce

1. Navigate to chrome://rewards. Enable if not already enabled.
2. Click on an icon (gear, settings icon, etc)

Actual result:

Blue border is displayed. This looks especially odd in some scenarios:

Expected result:

No border.

Reproduces how often:

easily

Brave version (chrome://version info)

Brave	0.55.11 Chromium: 70.0.3538.35 (Official Build) beta(64-bit)
Revision	28dcb499844fa40c28d5f62e337876cb936f79f5-refs/branch-heads/3538@{#678}
OS	Mac OS X

Reproducible on current release:

• Does it reproduce on brave-browser dev/beta builds? yes
• Does it reproduce on browser-laptop? no

Website problems only:

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

Additional Information

cc @kjozwiak

[NejcZdovc]

cc @petemill @jenn-rhim @bradleyrichter @rossmoody for their input if we should remove it

[rossmoody]

IMO this does look weird. I’d vote to remove the border

[kjozwiak]

IMO this does look weird. I’d vote to remove the border

Yup, agreed 100%. I'm not sure if this was intentional, but it seems like a bug. Clicking on UI items shouldn't reveal the border for each element unless it's required to give the user some feedback. But in this case, I'm not sure it's warranted (if it was added by design that is).

[NejcZdovc]

this is default behaviour for buttons. It's not so much about design, but about accessibility. More on this link https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/

[jenn-rhim]

@nejc we are handling the accessibility by making it clear which item is clicked - the button background as well as the content string inside and outside of the button becoming bold. We can remove the outline.

[NejcZdovc]

@jenn-rhim outline tells you on which button you are before you click if you are using keyboard, so we are not handling this case right now if we remove outline

[jenn-rhim]

@nejc we can remove it for the mouse users by a:active {outline:none;} and leave the outline for the users using the key?

[NejcZdovc]

yes we can do that

[bradleyrichter]

I think at one point in history, these accessibility highlights could be invoked with a key combo, or only appear when a tab key is pressed to navigate sequentially.

Ideally we can apply a tab-key activation requirement so they NEVER appear using your mouse alone.

[rossmoody]

I think regardless of whether or not we keep the border in this specific instance we should probably style and pad these button with a rounded secondary button type of aesthetic even if it’s invisible. A lot of the broken feeling comes from the icon pushing a box out of the bottom of the rectangle.

[NejcZdovc]

this was fixed as @rossmoody said. We have box around now