Add the Safe browsing filter

[fcoveram]

Problem

We need to add a filter for showing/hiding mature content in the search results. We discussed time ago to not include the filter in the filter sidebar as it is a sensitive criterion.

Alternatives

The proposal shows a Safe browsing link that opens a popover showing a description and a toggle filter. The interaction goes as it follows:

1. On hover, the Safe browsing turns dark-charcoal.
2. On click, it opens a popover with a description and a toggle.
3. When enabling the toggle, the results load again without closing the popover.
4. Clicking outside closes the popover.

CleanShot.2021-12-20.at.10.45.55.mp4

Additional context

The popover design has a shadow popover style from the WordPress Design Library.

[sarayourfriend]

I think we'll need a VToggle component for this as well. We can copy styles from Gutenberg as I think they're similar, just with different colors!

Some notes about accessibility for whomever implements this: when a popover is opened using the keyboard, I think the logical thing to focus when it opens is the toggle. That means the context of the description visually above the toggle could be lose. We'll want to make sure that's included in the label of the toggle somehow, I think?

[fcoveram]

I just commented something related to popover interactions on mobile in WordPress/openverse-frontend#541, and now rambling around the idea of moving the filter to the filter sidebar. That will simplify the interaction on desktop and mobile, and we can move it to the end of the list since it is a sensitive criterion.

When a popover is opened using the keyboard, I think the logical thing to focus when it opens is the toggle. That means the context of the description visually above the toggle could be lose.

I am not sure about focusing the toggle first. The word Safe browsing is not completely clear and it makes sense to me to focus the description first. However, and based on the idea dropped above, I wonder how the a11y navigation works among filters.

Navigating per each checkbox sounds demanding if you want to reach the last category or any filter nearby the end. In that case, I wonder how feasible is to implement a navigation per category, and then enter into it to navigate between the filters. In that way, we can show all filters and allow an easiest navigation. Here is a quick draft of what I am saying.

[sarayourfriend]

Navigating per each checkbox sounds demanding if you want to reach the last category or any filter nearby the end. In that case, I wonder how feasible is to implement a navigation per category, and then enter into it to navigate between the filters. In that way, we can show all filters and allow an easiest navigation. Here is a quick draft of what I am saying.

You're describing the same "composite" concept that we discussed for the audio results. I think it's okay to use, but I'm not sure, it might be unusual for a form. The WAI-ARIA examples about grouping form items doesn't mention doing anything like that: https://www.w3.org/WAI/tutorials/forms/grouping/

Gutenberg's block settings sidebar also doesn't do anything like this, but it does allow for collapsing groups of settings that could make navigating through all the settings easier.

[fcoveram]

It does allow for collapsing groups of settings that could make navigating through all the settings easier.

Right, that makes sense. I think that waiting for navigational data will help us to figure out what is more beneficial.

Going back to the feature. What do you think of the idea below?

Rambling around the idea of moving the filter (safe browsing) to the filter sidebar. That will simplify the interaction on desktop and mobile, and we can move it to the end of the list since it is a sensitive criterion.

[sarayourfriend]

Rambling around the idea of moving the filter (safe browsing) to the filter sidebar. That will simplify the interaction on desktop and mobile, and we can move it to the end of the list since it is a sensitive criterion.

Makes sense to me I think... but to clarify, did you mean at the start/top of the list? It would definitely make it simpler to have it in one place on both

I discussed this with @panchovm in private and realized I was misunderstanding what "sensitive" meant. We want to make it hard for users to accidentally turn this filter off, so putting it at the end makes it harder to find and therefore harder to accidentally toggle.

[krysal]

Looks good with the toggle button if we go with that proposal. Regarding the move to the filter sidebar, as there are many sources, this filter will end well below, so I think it can be even more discreet than the link with the popover.

[fcoveram]

I have been playing with a new idea and this one looks good.

The filter is a toggle separated from the filters by a divider with a shorter description below the category title. The action is on the left, and label on the right following the logic of all filters.

[fcoveram]

The Releases file has been updated with this change on desktop and mobile. The toggle component is from the WP Design Library.

[anton202]

can i work on this?

[zackkrida]

@anton202 Sure, you can work on this. The team is going to be discussion the handling of 'sensitive' content this week and may make some changes to the language of this control.

For now, if you do work on this please use the phrase 'sensitive content' instead of 'mature content' where relevant. Thank you!

[zackkrida]

@anton202 we should put this behind a TOGGLE_SENSITIVE_CONTENT feature flag while we do further testing of the UI. Could you update your PR to include that at some point? If you have any questions about feature flags @dhruvkb would be a great person to ask.

[zackkrida]

Closing, this was redesigned and refined as part of #791