Improve how bridge settings appear in search results

In "about:preferences", if a user searches for "bridge" or "use bridges" or "built-in bridge" or "request bridges" they'll get pretty much the same search result in each case: everything under the "Bridges" section, but without the "Bridges" heading itself.

And if you search something more generic, you get this mixed in with other settings.

And there are some search terms that are matching with hidden content, like searching for "bridge pass", which is only visible when the user has a lox bridge.

Screenshots

There are a few problems with this:

1. We lack a heading to separate our content from the rest of the search result.
2. If anything under "Bridges" matches, the whole thing is displayed.
3. Hidden content should not contribute to the search result.

The last problem can be fixed with some attributes that mozilla-central uses, but the first two require some input from UX team @felicia and @donuts.

Origin

This mostly stems from the fact that the mozilla preferences are more-or-less of the structure

<h1>Category 1 Name</h1>
<xul:groupbox>
  <h2>Sub category 1</h2>
  <xul:description>Description of sub category 1</xul:description>
  <!-- form controls -->
</xul:groupbox>
<xul:groupbox>
  <h2>Sub category 2</h2>
  <xul:description>Description of sub category 2</xul:description>
  <!-- form controls -->
</xul:groupbox>

<h1>Category 2 Name</h1>
<xul:groupbox>
  <h2>Sub category 3</h2>
  <xul:description>Description of sub category 3</xul:description>
  <!-- form controls -->
</xul:groupbox>

then in a search result, it only shows the matching <xul:groupbox> and hides the category <h1> headings. E.g.

<h1>Search Results</h1>

<xul:groupbox>
  <h2>Sub category 1</h2>
  <xul:description>Description of sub category 1</xul:description>
  <!-- form controls -->
</xul:groupbox>

<xul:groupbox>
  <h2>Sub category 3</h2>
  <xul:description>Description of sub category 3</xul:description>
  <!-- form controls -->
</xul:groupbox>

However, our bridge settings have custom styling, and are implemented as

<h1>Bridges</h1>
<xul:groupbox>
  <xul:description>Bridges help you securely access the Tor Network ...</xul:description>
  <moz-toggle label="Use bridges"></moz-toggle>

  <!-- Hidden when the user has bridges. -->
  <div hidden="">No bridges added</div>

  <!-- Hidden when the user has no bridges. -->
  <h2>Your bridges</h2>
  <!-- User bridges as a grid -->

  <!-- Heading is "Add bridges" if the user has no bridges. -->
  <h2>Replace your bridges</h2>
  <!-- built-in bridge and user provided bridges. -->
  
    <h3>Find more bridges</h3>
    <!-- Other bridge sources and request bridges. -->
</xul:groupbox>

In particular:

1. The single <xul:groupbox> contains two <h2> headings.
2. The <xul:groupbox> does not begin with a <h2> heading. This also means it doesn't have an accessible name: #41383.
3. The "Use bridges" toggle comes before a <h2> heading.

Solutions

I have three initial options to address this.

1. Single big groupbox, and we shuffle the heading levels in a search result.

So we keep more-or-less the same structure, but we add hidden h elements to the structure. I.e.

<h1>Bridges</h1>
<xul:groupbox>
  <h2 hidden="">Bridges</h2>
  <xul:description>Bridges help you securely access the Tor Network ...</xul:description>

  ...

  <h2>Your bridges</h2>
  <h3 hidden="">Your bridges</h3>

  ...

  <h2>Replace your bridges</h2>
  <h3 hidden="">Replace your bridges</h3>

    ...

    <h3>Find more bridges</h3>
    <h4 hidden="">Find more bridges</h4>
</xul:groupbox>

Then, for search results we shift to showing the duplicate heading instead, so that the semantic structure still works with the "Search results" context.

Screenshot

Pros:

1. The design would look the same in the search result, except the "Bridges" heading would be a bit smaller.

Cons:

1. The whole group appears together in search results, possibly hiding what the user actually wants.
2. The shifting heading levels depending on the context is correct semantics, but slightly strange behaviour that would be noticeable with a screen reader.

2. Split into three groupboxes

Basically, we add a heading for the "Use bridges" toggle, and we split the other two sections using the <h2> headings. I.e.

<h1>Bridges</h1>
<xul:description>Bridges help you securely access the Tor Network ...</xul:description>

<xul:groupbox>
  <h2>Use bridges</h2>
  <moz-toggle label="Use bridges"></moz-toggle>
</xul:groupbox>

<xul:groupbox>
  <h2>Your bridges</h2>
  <!-- User bridges as a grid -->
</xul:groupbox>

<xul:groupbox>
  <h2>Replace your bridges</h2>
  <!-- built-in bridge and user provided bridges. -->
  
    <h3>Find more bridges</h3>
    <!-- Other bridge sources and request bridges. -->
</xul:groupbox>

Then only the groupbox with matching content will appear in the search result.

Screenshots

Note: the <h2>Use bridges</h2> heading could be made only visible during search results.

Note: the bridges description "Bridges help you securely access the Tor Network ..." would not appear in search results by default.

Note: the "No bridges added" section would be hidden from search results.

Pros:

1. Matching search results can be half as big.
2. No need to shuffle the heading levels.

Cons:

1. The "Use bridges" section is a little janky on its own. Moreover, when the user doesn't yet have bridges the toggle is disabled so this section has no useable controls.
2. The "Your bridges" sections surrounded by a grey box looks a bit strange in the search result, and appears more like a sub-section to whatever appears above. We could split out the heading or remove the grey box and padding.

3. Split into two groupboxes, and move the toggle into "Your bridges"

This is the same as the above approach, but we only have two groupboxes because we move the "Use bridges" toggle under the "Your bridges" section.

Something like these quick mock-ups:

Screenshots

Note: Whilst we can give the toggle a tooltip "Use bridges", a visible label is ideal. Mostly because firefox doesn't yet show the tooltip when it has keyboard focus but no hover.

Pros:

1. Matching search result can be half as big.
2. "Use bridges" only appears when it can be used.
3. No need to shuffle the heading levels, or add a redundant one for the toggle.

Cons:

1. Requires more UX redesign.
2. The "Your bridges" sections surrounded by a grey box looks a bit strange in the search result, and appears more like a sub-section to whatever appears above. We could split out the heading or remove the grey box and padding.