Organize sliders into expandable summary, add first party protections section

[ablanathtanalba]

Fixes #2482.

Should help with #2021, and with the problem of users not noticing the "Disable for this site" button.

adds the following sections to the popup:

• firstparty notifications for when the current site has any unique firstparty protections protections scripts happening on it
• blocked resources container hidden by default behind the current ’n potential trackers blocked’ message

each of the sections have the option to drop down expand into a more detailed informational or control panel for each:

• The firstparty section just drops down into a message that describes the type of protection that is taking place, and links to reading more about link tracking and how privacy badger protects against it.
• The blocked resources hidden under the ’n potential trackers blocked’ message is the same blocked resources container the the current popup shows, with the sliders for each.

EDIT: Widget section forthcoming in #2758

[ablanathtanalba]

Surely there's a more graceful approach to some of my css in this, but going ahead and marking ready for review now. 😅

[ghostwords]

Thank you! Please see my first pass feedback below.

[ghostwords]

This caret is visible on pages with no third parties (https://example.com).

[ghostwords]

All carets should get the hand cursor like other clickable elements.

[ghostwords]

Should carets get a tooltip? "Click to show more information"?

[ghostwords]

Whatever ends up being clickable to expand/collapse sections should be keyboard-accessible. Users should be able to Tab to visibly select each toggle element and Space (or whatever the standard key is) to activate.

[ablanathtanalba]

Resolved all these except the accessible activation via the keyboard bit. At its current working state, one can focus on the element from the keyboard, but I'm unable to get the activation bit working. I tried attaching on keydown listeners and more tradition onClicks to it, no luck. On the other hand, while testing this out I realized there are a few places that aren't accessible or end up "trapping" the user into some modals that they can't easily exit out of without a mouse action. Perhaps that's worth addressing in a follow up PR?

[ghostwords]

<div> or <span> elements don't have built-in keyboard accessibility; <a> and <button> elements do.

To make a <span> focusable and so able to receive keyboard events, you have to add a tabindex=0. You then have to add a keydown listener and filter for supported keys.

Make sure to add the tabindex attribute to the same element that your keydown listener is on.

[ghostwords]

You'll also want to add proper ARIA attributes (such as role=button perhaps) to your elements.

[ghostwords]

You could instead use a <button> or an <a href="" role="button"> element, which automatically supports keyboard navigation and will also trigger your click handler on Space/Enter presses. You will probably want to e.preventDefault() inside the click handler (to avoid performing the unwanted default action of <a>).

[ghostwords]

Yes to improving keyboard navigation in a followup PR: #2629 (comment)

[ablanathtanalba]

The tweaks you left @ghostwords look good! I like the styling you added too, with the orange outline and expanding animation