<commit_before>{% extends "layout.html" %}

{% block page_title %}
Pattern - In-page tabs
{% endblock %}

{% block content %}

{% set active = "patterns" %}
{% include "includes/top_nav.html" %}

<main id="content" role="main">

  <div class="banner" role="banner">
    <h1 class="heading-section">In-page tabs</h1>
    <p class="lede">Switching between views of grouped content; hiding content that doesn&rsquo;t always need to be visible.</p>
    <ul class="metadata">
      <li>Usage: external/internal</li>
      <li>Status: experimental</li>
      <li>Last updated: 28 June 2017</li>
    </ul>
  </div>

  <div class="grid-row">
    <div class="column-full">
      
      <div class="example example-images" id="example-component">
        <div class="grid-row">
          {% include "includes/patterns/tabs-list.html" %}
        </div>
      </div>
      <details>
        <summary>Show code snippet</summary>
        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs-list.html" %}{% endfilter %}</code></pre>
      </details>

      <h2 class="heading-medium" id="example-component">Horizontal tab</h2>
      <div class="example example-images">
        <div class="grid-row">
          {% include "includes/patterns/tabs.html" %}
        </div>
      </div>
      <details>
        <summary>Show HTML snippet</summary>
        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs.html" %}{% endfilter %}</code></pre>
      </details>
      <details>
        <summary>Show SCSS snippet</summary>
        <pre class="language-markup"><code class="language-markup">{{'./app/assets/sass/patterns/_tabs-horizontal.scss' | fileInclude }}</code></pre>
      </details>


    </div>

    <div class="column-two-thirds">
      <h2 class="heading-medium">Interaction principles</h2>
      <p>Only one tab can be active at a time.</p>
      <p>The active tab should be distinguishable from the inactive, with maximum contrast ratio background:label.</p>
      <p>Inactive tabs should have a hover state that is distinguisable with minimum contrast ratio background:label.</p>
      <p>Focused tabs should be consistent with other focus states and distinguisable from active, inactive and hover states.</p>
      <p>Horizontal rules can be used to separate groups of tabs.</p>

      <h2 class="heading-medium">Content principles</h2>
      <p>The label should reflect the thing you need do with the content of that tab, not a description of what it is.</p>

      <h2 class="heading-medium">Accessibility principles</h2>
      <p>The active tab should be labelled as active in the code.</p>
      <p>Only active tab content should be readable.</p>

      <h2 class="heading-medium">User research</h2>
      <p>Syrian refugee resettlement found no problems with the pattern. Users have a good understanding of what to expect from the tabs</p>
      <p>Application platform uses the pattern for long lists. When combined with a search, the pattern performs very well when users don't know the contents of the list.</p>
      <p>Dyslexic users were ignoring the horizontal tab. So the line around the horizontal tabs were made thicker and the blue links were underlined to avoid this issue.</p>

      <h2 class="heading-medium">Services using this pattern</h2>
      <ul class="list list-bullet">
        <li>Syrian refugee resettlement</li>
        <!-- <li>Sponsoring people</li> -->
        <li>Proving things to government</li>
        <li>Application platform</li>
      </ul>

      <h2 class="heading-medium">Things to do</h2>
      <ul class="list list-bullet">
        <li>tabs.js is essential rather than enhanced&thinsp;&mdash;&thinsp;what is the no-js solution for this pattern.</li>
        <li>The design needs improving for narrower views.</li>
        <li>Using tabs to complete a series of tasks in a non-linear way could be a separate pattern.</li>
      </ul>

    </div>

    <div class="column-full">
      <hr>
      <a href="https://github.com/UKHomeOffice/home-office-digital-patterns/issues/35">Discuss this pattern on GitHub</a>
    </div>
  </div>
</main><commit_msg>content: add further research to tabs<commit_after>{% extends "layout.html" %}

{% block page_title %}
Pattern - In-page tabs
{% endblock %}

{% block content %}

{% set active = "patterns" %}
{% include "includes/top_nav.html" %}

<main id="content" role="main">

  <div class="banner" role="banner">
    <h1 class="heading-section">In-page tabs</h1>
    <p class="lede">Switching between views of grouped content; hiding content that doesn&rsquo;t always need to be visible.</p>
    <ul class="metadata">
      <li>Usage: external/internal</li>
      <li>Status: experimental</li>
      <li>Last updated: 28 June 2017</li>
    </ul>
  </div>

  <div class="grid-row">
    <div class="column-full">

      <div class="example example-images" id="example-component">
        <div class="grid-row">
          {% include "includes/patterns/tabs-list.html" %}
        </div>
      </div>
      <details>
        <summary>Show code snippet</summary>
        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs-list.html" %}{% endfilter %}</code></pre>
      </details>

      <h2 class="heading-medium" id="example-component">Horizontal tab</h2>
      <div class="example example-images">
        <div class="grid-row">
          {% include "includes/patterns/tabs.html" %}
        </div>
      </div>
      <details>
        <summary>Show HTML snippet</summary>
        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs.html" %}{% endfilter %}</code></pre>
      </details>
      <details>
        <summary>Show SCSS snippet</summary>
        <pre class="language-markup"><code class="language-markup">{{'./app/assets/sass/patterns/_tabs-horizontal.scss' | fileInclude }}</code></pre>
      </details>


    </div>

    <div class="column-two-thirds">
      <h2 class="heading-medium">Interaction principles</h2>
      <p>Only one tab can be active at a time.</p>
      <p>The active tab should be distinguishable from the inactive, with maximum contrast ratio background:label.</p>
      <p>Inactive tabs should have a hover state that is distinguisable with minimum contrast ratio background:label.</p>
      <p>Focused tabs should be consistent with other focus states and distinguisable from active, inactive and hover states.</p>
      <p>Horizontal rules can be used to separate groups of tabs.</p>

      <h2 class="heading-medium">Content principles</h2>
      <p>The label should reflect the thing you need do with the content of that tab, not a description of what it is.</p>

      <h2 class="heading-medium">Accessibility principles</h2>
      <p>The active tab should be labelled as active in the code.</p>
      <p>Only active tab content should be readable.</p>

      <h2 class="heading-medium">User research</h2>
      <p>Syrian refugee resettlement found no problems with the pattern. Users have a good understanding of what to expect from the tabs</p>
      <p>Application platform uses vertical tabs for long lists. When combined with a typeahead search, the pattern performs very well when users don't know the contents of the list.</p>
      <p>Dyslexic users were ignoring the horizontal tab. So the line around the horizontal tabs were made thicker and the blue links were underlined to avoid this issue.</p>
      <p>Returns and movements found users missed the inactive tab. They think that might be due to content but its worth keeping an eye on.</p>

      <h2 class="heading-medium">Services using this pattern</h2>
      <ul class="list list-bullet">
        <li>Syrian refugee resettlement</li>
        <li>Proving things to government</li>
        <li>Application platform</li>
      </ul>

      <h2 class="heading-medium">Things to do</h2>
      <ul class="list list-bullet">
        <li>The design needs improving for narrower views.</li>
        <li>Using tabs to complete a series of tasks in a non-linear way could be a separate pattern.</li>
      </ul>

    </div>

    <div class="column-full">
      <hr>
      <a href="https://github.com/UKHomeOffice/home-office-digital-patterns/issues/35">Discuss this pattern on GitHub</a>
    </div>
  </div>
</main>
{'fraction_non_alphanumeric': 0.1342982560208803, 'fraction_numerical': 0.005694625696998458, 'mean_word_length': 3.185700099304866, 'pattern_counts': {'":': 0, '<': 228, '<?xml version=': 0, '>': 228, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7220609', 'n_tokens_mistral': 2536, 'n_tokens_neox': 2398, 'n_words': 798}