Fix focus indicators in shields

[tildelowengrimm]

Description

All interactive UI elements in the Shields panel should have keyboard support and the appropriate focus treatment.

Designs

For more CSS and plain text, check Abstract link: https://share.goabstract.com/68d70c4d-8c77-4588-9ee5-ce6418505c79

[srirambv]

This is on Windows

[tildelowengrimm]

Karen is going to come up with a mock showing the specific outlines for each element.

[rossmoody]

This is something I can adjust in Brave-ui fairly easily. I think it’s a result of us padding the icons instead of margin.

[karenkliu]

@rossmoody the entire row should get the focus area because it is interactive, not only the icon.

[rossmoody]

Ah, gotcha. Yeah this prob requires further component behavior definition then. I suppose for accessibility the ideal would be to be able to tab from toggle to dropdown in each section.

[karenkliu]

@tomlowenthal @cezaraugusto

Abstract link: https://share.goabstract.com/68d70c4d-8c77-4588-9ee5-ce6418505c79

[karenkliu]

Closing this issue because comprehensive design specs and other issues are covered by #2565

[karenkliu]

Reopening this issue because #2565 has been split into smaller issues.

[kjozwiak]

Reopening this issue because #2565 has been split into smaller issues.

Removing the Dupe / Invalid / Not actionable milestone as per the above.

[karenkliu]

Hi @cezaraugusto, thanks for your updates on the focus treatment. Here is my design feedback:

[karenkliu]

Hi @cezaraugusto, thanks for your update! After hearing your feedback, I think the best workaround is to have the focus indicator on part of the row and not overlapping the toggle or dropdown (I've updated the spec in the OP as well):

Everything else for the focus looks great.

[karenkliu]

Hi @cezaraugusto, your latest build for these focus states looks good to go from the design side. 👍

[btlechowski]

Verification passed on

Brave	0.64.60 Chromium: 74.0.3729.91 (Official Build) beta (64-bit)
Revision	03844ed83e02b8add3f4b9cb859a7108d55b2e4d-refs/branch-heads/3729@{#860}
OS	Windows 10 OS Build 17134.523

Used test plan from brave/brave-core#1797
Checked indicators on main shields page and subpages.
Logged #4225

Verification passed on

Brave	0.64.72 Chromium: 74.0.3729.131 (Official Build) beta(64-bit)
Revision	518a41c1fa7ce1c8bb5e22346e82e42b4d76a96f-refs/branch-heads/3729@{#954}
OS	Linux

• Verified focus indicators work on main shields page and details view of individual setting
• Encountered Focus indicator in shields panel is trimmed #4225 on Linux as well
• Logged Too much bottom padding on scripts details view #4336

Verified passed with

Brave	0.64.72 Chromium: 74.0.3729.131 (Official Build) beta(64-bit)
Revision	518a41c1fa7ce1c8bb5e22346e82e42b4d76a96f-refs/branch-heads/3729@{#954}
OS	Mac OS X

• Verified test plan from several shields panel improvements brave-core#1797