govuk_publishing_components 11.0.0 → 11.1.0

data/app/views/govuk_publishing_components/components/docs/details.yml

@@ -13,9 +13,8 @@ accessibility_criteria: |
   * toggle the visibility of the details element's content when interacted with
   * indicate the expanded state when details' content is visible
   * indicate the collapsed state when details' content is hidden
-part_of_admin_layout: true
 govuk_frontend_components:
-  - header
+  - details
 examples:
   default:
     data:

data/app/views/govuk_publishing_components/components/docs/input.yml

@@ -13,6 +13,8 @@ accessibility_criteria: |
   * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
 
   Labels use the [label component](/component-guide/label).
+
+  Avoid using autofocus and tabindex unless you have user research to support this behaviour.
 govuk_frontend_components:
   - input
 examples:
@@ -56,3 +58,10 @@ examples:
         text: "Search for"
       name: "name"
       value: "moose"
+  autofocused:
+    data:
+      label:
+        text: "Username"
+      name: "username"
+      autofocus: true
+      tabindex: 0

data/app/views/govuk_publishing_components/components/docs/inset_text.yml

@@ -1,6 +1,5 @@
-name: Inset text (experimental)
+name: Inset text
 description: Use the inset text component to differentiate a block of text from the content that surrounds it.
-part_of_admin_layout: true
 govuk_frontend_components:
   - inset-text
 accessibility_criteria: |

data/app/views/govuk_publishing_components/components/docs/layout_footer.yml

@@ -3,10 +3,124 @@ description: The footer provides copyright, licensing and other information
 part_of_admin_layout: true
 govuk_frontend_components:
   - footer
+accessibility_criteria: |
+  Text and links in the Footer must:
+
+  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  Links in the Footer must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when they have focus
+  - change in appearance when touched (in the touch-down state)
+  - change in appearance when hovered
+  - have visible text
+
+  Images in the Footer must:
+
+  - be presentational when linked to from accompanying text "Open Government Licence (OGL) icon".
+
+  Landmarks and Roles in the Footer should:
+
+  - avoid navigation landmarks or roles
+
+    The footer element alone is sufficient for such cases; while a [nav element](https://www.w3.org/TR/html52/sections.html#the-nav-element) can be used, it is usually unnecessary.
+
+    Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
+    Should be challenged if user research indicates this is an issue.
+
+  - have a role of [`contentinfo`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (<footer>)
+
+    Note: This decision has been made given that most uses of this role tend to be used directly on a `<footer>` element.
+    Assumption made is that is most predictable for users of assistive technologies.
+    The spec indicates that `contentinfo` is useful for "Examples of information included in this region of the page are copyrights and links to privacy statements.", which may indicate that it might be better placed around the 'meta' section of this component.
+    Should be challenged if user research indicates this is an issue.
 examples:
   default:
     data: {}
-accessibility_criteria: |
-  The component must:
 
-  * implement accessible links
+  with_meta:
+    data:
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service
+
+  with_navigation:
+    data:
+      navigation:
+        - title: Services and information
+          columns: 2
+          items:
+            - href: '/browse/benefits'
+              text: Benefits
+            - href: '/browse/births-deaths-marriages'
+              text: Births, deaths, marriages and care
+            - href: '/browse/business'
+              text: Business and self-employed
+            - href: '/browse/childcare-parenting'
+              text: Childcare and parenting
+            - href: '/browse/citizenship'
+              text: Citizenship and living in the UK
+            - href: '/browse/justice'
+              text: Crime, justice and the law
+            - href: '/browse/disabilities'
+              text: Disabled people
+            - href: '/browse/driving'
+              text: Driving and transport
+            - href: '/browse/education'
+              text: Education and learning
+            - href: '/browse/employing-people'
+              text: Employing people
+            - href: '/browse/environment-countryside'
+              text: Environment and countryside
+            - href: '/browse/housing-local-services'
+              text: Housing and local services
+            - href: '/browse/tax'
+              text: Money and tax
+            - href: '/browse/abroad'
+              text: Passports, travel and living abroad
+            - href: '/browse/visas-immigration'
+              text: Visas and immigration
+            - href: '/browse/working'
+              text: Working, jobs and pensions
+        - title: Departments and policy
+          items:
+            - href: '/government/how-government-works'
+              text: How government works
+            - href: '/government/organisations'
+              text: Departments
+            - href: '/world'
+              text: Worldwide
+            - href: '/government/policies'
+              text: Policies
+            - href: '/government/publications'
+              text: Publications
+            - href: '/government/announcements'
+              text: Announcements
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service

data/app/views/govuk_publishing_components/components/docs/select.yml

@@ -1,6 +1,5 @@
-name: Select (experimental)
+name: Select
 description: A dropdown select
-part_of_admin_layout: true
 govuk_frontend_components:
   - select
 accessibility_criteria: |

data/app/views/govuk_publishing_components/components/docs/textarea.yml

@@ -1,6 +1,5 @@
-name: Form textarea (experimental)
+name: Form textarea
 description: A textarea field and an associated label
-part_of_admin_layout: true
 govuk_frontend_components:
   - textarea
 accessibility_criteria: |

data/config/initializers/assets.rb

@@ -32,5 +32,5 @@ Rails.application.config.assets.precompile += %w(
 Rails.application.config.assets.paths += %W(
   #{__dir__}/../../node_modules/govuk-frontend/assets/images
   #{__dir__}/../../node_modules/govuk-frontend/assets/fonts
-  #{__dir__}/../../node_modules/govuk-frontend/
+  #{__dir__}/../../node_modules/
 )

data/lib/govuk_publishing_components.rb

@@ -26,6 +26,7 @@ require "govuk_publishing_components/presenters/taxonomy_list_helper"
 require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
 require "govuk_publishing_components/app_helpers/table_helper"
 require "govuk_publishing_components/app_helpers/brand_helper"
+require "govuk_publishing_components/app_helpers/environment"
 
 module GovukPublishingComponents
 end

data/lib/govuk_publishing_components/app_helpers/environment.rb

@@ -0,0 +1,18 @@
+module GovukPublishingComponents
+  module AppHelpers
+    class Environment
+      GOVUK_ENVIRONMENTS = {
+        "production" => "production",
+        "staging" => "staging",
+        "integration-blue-aws" => "integration",
+      }.freeze
+
+      # The "acceptance environment" we're in - not the same as Rails env.
+      #
+      # Can be "production", "staging", "integration", or "development"
+      def self.current_acceptance_environment
+        GOVUK_ENVIRONMENTS.fetch(ENV["ERRBIT_ENVIRONMENT_NAME"], "development")
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '11.0.0'.freeze
+  VERSION = '11.1.0'.freeze
 end

data/node_modules/govuk-frontend/all.js

@@ -1655,16 +1655,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false');
+  $tab.classList.remove('govuk-tabs__tab--selected');
   $tab.setAttribute('tabindex', '-1');
 };
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true');
+  $tab.classList.add('govuk-tabs__tab--selected');
   $tab.setAttribute('tabindex', '0');
 };
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('[role=tab][aria-selected=true]')
+  return this.$module.querySelector('.govuk-tabs__tab--selected')
 };
 
 // this is because IE doesn't always return the actual value but a relative full path

data/node_modules/govuk-frontend/components/back-link/macro-options.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": "The value of the link href attribute."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the anchor tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the anchor tag."
+    }
+]

data/node_modules/govuk-frontend/components/breadcrumbs/README.md

@@ -288,6 +288,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>

data/node_modules/govuk-frontend/components/breadcrumbs/macro-options.json

@@ -0,0 +1,40 @@
+[
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "Array of breadcrumbs item objects.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "href",
+                "type": "string",
+                "required": false,
+                "description": "Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item."
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the breadcrumbs container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the breadcrumbs container."
+    }
+]

data/node_modules/govuk-frontend/components/breadcrumbs/template.njk

@@ -3,7 +3,7 @@
   {% for item in params.items %}
     {% if item.href %}
     <li class="govuk-breadcrumbs__list-item">
-      <a class="govuk-breadcrumbs__link" href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+      <a class="govuk-breadcrumbs__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
     </li>
     {% else %}
     <li class="govuk-breadcrumbs__list-item" aria-current="page">{{ item.html | safe if item.html else item.text }}</li>

data/node_modules/govuk-frontend/components/button/_button.scss

@@ -18,9 +18,7 @@
     @include govuk-font($size: 19, $line-height: 19px);
     @include govuk-focusable;
 
-    -webkit-box-sizing: border-box;
-
-            box-sizing: border-box;
+    box-sizing: border-box;
     display: inline-block;
     position: relative;
     width: 100%;
@@ -31,8 +29,7 @@
     border-radius: 0;
     color: $govuk-button-text-colour;
     background-color: $govuk-button-colour;
-    -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
-            box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
     text-align: center;
     vertical-align: top;
     cursor: pointer;
@@ -79,8 +76,7 @@
 
     &:active {
       top: $button-shadow-size;
-      -webkit-box-shadow: none;
-              box-shadow: none;
+      box-shadow: none;
 
       @include govuk-if-ie8 {
         border-bottom-width: 0;
@@ -138,8 +134,7 @@
 
     &:active {
       top: 0;
-      -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
-              box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+      box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
       @include govuk-if-ie8 {
         border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
       }

data/node_modules/govuk-frontend/components/button/macro-options.json

@@ -0,0 +1,62 @@
+[
+    {
+        "name": "element",
+        "type": "string",
+        "required": false,
+        "description": "Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`."
+    },
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "Name for the `input` or `button`. This has no effect on `a` elements."
+    },
+    {
+        "name": "type",
+        "type": "string",
+        "required": true,
+        "description": "Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements."
+    },
+    {
+        "name": "value",
+        "type": "string",
+        "required": true,
+        "description": "Value for the `button` tag. This has no effect on `a` or `input` elements."
+    },
+    {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": false,
+        "description": "The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the button component."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the button component."
+    }
+]