Brave Shields alt text is confusing to users

[karenkliu]

Description

Users correctly assume that the block count on Brave Shields is the ads that were blocked. However, the irrelevant alt text causes unnecessary confusion about what the feature is. Update the alt text to something more helpful.

Steps to Reproduce

1. Hover over Brave Shields to get the alt text

Actual result:

Expected result:

Alt text should show:
Brave Shields
X Trackers, ads, and more blocked

Reproduces how often:

Easily

Brave version (brave://version info)

All versions

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:

[Tonev]

@karenkliu @rebron

I noticed another thing related to the Brave Shields icon that can easily confuse users. I'll let you know in this Github report, you decide whether I should open my own Github report for it, I have absolutely no issue doing so. Just thought my report can easily fit into this Github report as a simple text change easily resolves my issue with the Brave Shields icon.

First, I'll provide steps to reproduce my issue:

1. Open Brave in a clean user profile.
2. Go to brave://settings/shields and disable all Brave Shields features.
3. Visit a random website, let's say brave.com.

Actual result:

The Brave Shields icon appears active although all Brave Shields features are disabled globally. Hovering over the Brave Shields icon shows a Has access to this site message.

Expected result:

The Brave Shields icon should either be grayed out since all Brave Shields features are disabled globally, or there should be a text indicating that Brave Shields features are disabled globally, for example hovering over the icon could show a message "Brave Shields is disabled globally, check brave://settings/shields", for example.

Why do users need an indicator that tells them whether Brave Shields is disabled globally?

1. Users won't understand their privacy is exposed until they decide to click on the Brave Shields icon in the address bar (if they decide to do so).
2. The Cookie blocking feature of Brave Shields is directly related to the way Brave handles all cookies globally. Disabling the feature means all cookies (first-party + third-party cookies) will be accepted by the user.

I don't have a clue whether it's a UX choice, but sincerely believe it needs to be improved. Constantly showing an active Brave Shields icon to users is quite misleading. Further, there is an obvious inconsistency with the way Brave Shields features are displayed to users. If users disable a specific Brave Shields feature globally, let's say Block scripts, the feature will be displayed as disabled in Brave Shields when checked in any website (true for our concrete example with a clean user profile as no per-site changes have been made), but if users disable all Brave Shields features globally, the Brave Shields toggle won't be affected in any website, although Brave Shields is literally disabled.

Are there features untied to the Brave Shields features at brave://settings/shields that remain active so the icon of Brave Shields remains active?

Let me know what you think whenever you have the opportunity.

[karenkliu]

@Tonev That definitely sounds like a worthwhile improvement! We would appreciate it if you could file a separate issue describing your problem and proposed solution.

[stephendonner]

Verified PASSED using

Brave	1.38.70 Chromium: 100.0.4896.46 (Official Build) beta (x86_64)
Revision	5ca33821b2211805855c77d334353d27c616a7ca-refs/branch-heads/4896@{#584}
OS	macOS Version 11.6.5 (Build 20G527)

Confirmed tooltip text reads "Brave Shields 20 Trackers, ads, and more blocked`
Confirmed tooltip text's blocked count accurately reflects the actual #

NOTE: the tooltip isn't multi-line; I'll file for that.

[jenn-rhim]

the tooltip text should be separated into 2 lines: first line - feature name, and the 2nd line - description.

Filed #21943

[MadhaviSeelam]

Brave	1.38.78 Chromium: 100.0.4896.60 (Official Build) beta (64-bit)
Revision	6a5d10861ce8de5fce22564658033b43cb7de047-refs/branch-heads/4896@{#875}
OS	Windows 11 Version 21H2 (Build 22000.593)

Confirmed tooltip text reads Brave Shields 35 Trackers, ads, and more blocked when hovered over Brave Shields
Confirmed tooltip text's blocked count accurately reflects the actual #