govuk_publishing_components 28.4.0 → 28.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (207) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -3
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js +4 -3
  4. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +21 -291
  5. data/app/assets/javascripts/govuk_publishing_components/components/button.js +1 -1
  6. data/app/assets/javascripts/govuk_publishing_components/components/character-count.js +1 -1
  7. data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +1 -1
  8. data/app/assets/javascripts/govuk_publishing_components/components/details.js +1 -1
  9. data/app/assets/javascripts/govuk_publishing_components/components/error-summary.js +1 -1
  10. data/app/assets/javascripts/govuk_publishing_components/components/feedback.js +7 -6
  11. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +1 -1
  12. data/app/assets/javascripts/govuk_publishing_components/components/radio.js +1 -1
  13. data/app/assets/javascripts/govuk_publishing_components/components/skip-link.js +5 -0
  14. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +40 -37
  15. data/app/assets/javascripts/govuk_publishing_components/components/tabs.js +1 -1
  16. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +2 -1
  17. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +8 -10
  18. data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js +4 -3
  19. data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js +4 -3
  20. data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js +4 -3
  21. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +1796 -911
  22. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +1 -329
  23. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +1 -1
  24. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +95 -56
  25. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +6 -17
  26. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +0 -9
  27. data/app/models/govuk_publishing_components/component_docs.rb +1 -1
  28. data/app/views/govuk_publishing_components/components/_accordion.html.erb +30 -15
  29. data/app/views/govuk_publishing_components/components/_action_link.html.erb +1 -1
  30. data/app/views/govuk_publishing_components/components/_button.html.erb +4 -4
  31. data/app/views/govuk_publishing_components/components/_character_count.html.erb +2 -2
  32. data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +2 -2
  33. data/app/views/govuk_publishing_components/components/_details.html.erb +1 -1
  34. data/app/views/govuk_publishing_components/components/_error_message.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/_error_summary.html.erb +0 -1
  36. data/app/views/govuk_publishing_components/components/_heading.html.erb +1 -1
  37. data/app/views/govuk_publishing_components/components/_hint.html.erb +1 -1
  38. data/app/views/govuk_publishing_components/components/_input.html.erb +3 -3
  39. data/app/views/govuk_publishing_components/components/_inset_text.html.erb +12 -1
  40. data/app/views/govuk_publishing_components/components/_intervention.html.erb +2 -2
  41. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +1 -1
  42. data/app/views/govuk_publishing_components/components/_list.html.erb +1 -1
  43. data/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb +1 -1
  44. data/app/views/govuk_publishing_components/components/_notice.html.erb +1 -1
  45. data/app/views/govuk_publishing_components/components/_print_link.html.erb +2 -2
  46. data/app/views/govuk_publishing_components/components/_radio.html.erb +1 -1
  47. data/app/views/govuk_publishing_components/components/_search.html.erb +4 -6
  48. data/app/views/govuk_publishing_components/components/_select.html.erb +20 -30
  49. data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
  50. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +8 -9
  51. data/app/views/govuk_publishing_components/components/_textarea.html.erb +1 -1
  52. data/app/views/govuk_publishing_components/components/_title.html.erb +3 -3
  53. data/app/views/govuk_publishing_components/components/docs/accordion.yml +2 -97
  54. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +1 -1
  55. data/app/views/govuk_publishing_components/components/docs/inset_text.yml +6 -0
  56. data/app/views/govuk_publishing_components/components/docs/select.yml +12 -0
  57. data/app/views/govuk_publishing_components/components/docs/share_links.yml +1 -1
  58. data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +13 -13
  59. data/app/views/govuk_publishing_components/components/docs/tabs.yml +1 -1
  60. data/app/views/govuk_publishing_components/components/docs/textarea.yml +1 -1
  61. data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +3 -3
  62. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +11 -11
  63. data/config/initializers/assets.rb +1 -0
  64. data/config/locales/ar.yml +2 -0
  65. data/config/locales/az.yml +2 -1
  66. data/config/locales/be.yml +2 -0
  67. data/config/locales/bg.yml +2 -0
  68. data/config/locales/bn.yml +2 -0
  69. data/config/locales/cs.yml +2 -0
  70. data/config/locales/cy.yml +2 -0
  71. data/config/locales/da.yml +2 -0
  72. data/config/locales/de.yml +2 -0
  73. data/config/locales/dr.yml +2 -0
  74. data/config/locales/el.yml +2 -0
  75. data/config/locales/es-419.yml +2 -0
  76. data/config/locales/es.yml +2 -0
  77. data/config/locales/et.yml +2 -0
  78. data/config/locales/fa.yml +2 -1
  79. data/config/locales/fi.yml +2 -0
  80. data/config/locales/fr.yml +2 -0
  81. data/config/locales/gd.yml +2 -0
  82. data/config/locales/gu.yml +2 -0
  83. data/config/locales/he.yml +2 -0
  84. data/config/locales/hi.yml +2 -0
  85. data/config/locales/hr.yml +2 -0
  86. data/config/locales/hu.yml +2 -0
  87. data/config/locales/hy.yml +2 -0
  88. data/config/locales/id.yml +2 -1
  89. data/config/locales/is.yml +2 -0
  90. data/config/locales/it.yml +2 -0
  91. data/config/locales/ja.yml +2 -1
  92. data/config/locales/ka.yml +2 -0
  93. data/config/locales/kk.yml +2 -0
  94. data/config/locales/ko.yml +2 -1
  95. data/config/locales/lt.yml +2 -0
  96. data/config/locales/lv.yml +2 -0
  97. data/config/locales/ms.yml +2 -1
  98. data/config/locales/mt.yml +2 -0
  99. data/config/locales/nl.yml +2 -0
  100. data/config/locales/no.yml +2 -0
  101. data/config/locales/pa-pk.yml +2 -0
  102. data/config/locales/pa.yml +2 -0
  103. data/config/locales/pl.yml +2 -0
  104. data/config/locales/ps.yml +2 -0
  105. data/config/locales/pt.yml +2 -0
  106. data/config/locales/ro.yml +2 -0
  107. data/config/locales/ru.yml +2 -0
  108. data/config/locales/si.yml +2 -0
  109. data/config/locales/sk.yml +2 -0
  110. data/config/locales/sl.yml +2 -0
  111. data/config/locales/so.yml +2 -0
  112. data/config/locales/sq.yml +2 -0
  113. data/config/locales/sr.yml +2 -1
  114. data/config/locales/sv.yml +2 -0
  115. data/config/locales/sw.yml +2 -0
  116. data/config/locales/ta.yml +2 -0
  117. data/config/locales/th.yml +2 -1
  118. data/config/locales/tk.yml +2 -0
  119. data/config/locales/tr.yml +2 -0
  120. data/config/locales/uk.yml +2 -0
  121. data/config/locales/ur.yml +2 -0
  122. data/config/locales/uz.yml +2 -0
  123. data/config/locales/vi.yml +2 -1
  124. data/config/locales/zh-hk.yml +2 -1
  125. data/config/locales/zh-tw.yml +2 -1
  126. data/config/locales/zh.yml +2 -1
  127. data/lib/govuk_publishing_components/presenters/select_helper.rb +85 -0
  128. data/lib/govuk_publishing_components/version.rb +1 -1
  129. data/lib/govuk_publishing_components.rb +1 -1
  130. data/node_modules/govuk-frontend/govuk/all.js +294 -76
  131. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +274 -99
  132. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +169 -65
  133. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +37 -5
  134. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +4 -4
  135. data/node_modules/govuk-frontend/govuk/components/button/button.js +2 -2
  136. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +3 -3
  137. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +15 -2
  138. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +8 -10
  139. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +52 -15
  140. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +0 -2
  141. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +31 -0
  142. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +25 -25
  143. data/node_modules/govuk-frontend/govuk/components/details/details.js +2 -2
  144. data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss +1 -0
  145. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +8 -8
  146. data/node_modules/govuk-frontend/govuk/components/error-message/template.njk +2 -2
  147. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +24 -3
  148. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +25 -16
  149. data/node_modules/govuk-frontend/govuk/components/error-summary/macro-options.json +6 -0
  150. data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +2 -1
  151. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +4 -4
  152. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +3 -37
  153. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +119 -15
  154. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +6 -0
  155. data/node_modules/govuk-frontend/govuk/components/footer/template.njk +1 -1
  156. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +10 -4
  157. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +11 -11
  158. data/node_modules/govuk-frontend/govuk/components/header/header.js +4 -4
  159. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -3
  160. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +1 -3
  161. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +1 -1
  162. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +40 -40
  163. data/node_modules/govuk-frontend/govuk/components/input/template.njk +4 -3
  164. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +499 -2
  165. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +2 -2
  166. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +0 -8
  167. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +44 -45
  168. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +4 -4
  169. data/node_modules/govuk-frontend/govuk/components/radios/template.njk +2 -9
  170. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +6 -1
  171. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +3 -3
  172. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +13 -0
  173. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +9 -9
  174. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +1108 -0
  175. data/node_modules/govuk-frontend/govuk/components/skip-link/template.njk +1 -1
  176. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +20 -23
  177. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +86 -1
  178. data/node_modules/govuk-frontend/govuk/components/summary-list/template.njk +1 -4
  179. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +2 -2
  180. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +2 -2
  181. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -5
  182. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +2 -2
  183. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +1 -1
  184. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +4 -4
  185. data/node_modules/govuk-frontend/govuk/core/_all.scss +0 -1
  186. data/node_modules/govuk-frontend/govuk/core/_global-styles.scss +0 -6
  187. data/node_modules/govuk-frontend/govuk/core/_links.scss +0 -6
  188. data/node_modules/govuk-frontend/govuk/core/_lists.scss +0 -6
  189. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +0 -6
  190. data/node_modules/govuk-frontend/govuk/core/_typography.scss +0 -6
  191. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  192. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +15 -30
  193. data/node_modules/govuk-frontend/govuk/{core → objects}/_template.scss +1 -5
  194. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +0 -6
  195. data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss +0 -6
  196. data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +0 -6
  197. data/node_modules/govuk-frontend/govuk/overrides/_typography.scss +0 -6
  198. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +0 -6
  199. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
  200. data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -10
  201. data/node_modules/govuk-frontend/govuk/tools/_all.scss +0 -1
  202. data/node_modules/govuk-frontend/package.json +1 -1
  203. metadata +24 -45
  204. data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +0 -100
  205. data/lib/govuk_publishing_components/presenters/select.rb +0 -43
  206. data/lib/tasks/govuk_publishing_components_tasks.rake +0 -49
  207. data/node_modules/govuk-frontend/govuk/tools/_iff.scss +0 -17
@@ -1,7 +1,7 @@
1
1
  (function (global, factory) {
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3
- typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
4
- (global.GOVUKFrontend = factory());
3
+ typeof define === 'function' && define.amd ? define('GOVUKFrontend.Radios', factory) :
4
+ (global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Radios = factory());
5
5
  }(this, (function () { 'use strict';
6
6
 
7
7
  (function(undefined) {
@@ -1056,7 +1056,7 @@ Radios.prototype.init = function () {
1056
1056
 
1057
1057
  // Skip radios without data-aria-controls attributes, or where the
1058
1058
  // target element does not exist.
1059
- if (!target || !$module.querySelector('#' + target)) {
1059
+ if (!target || !document.getElementById(target)) {
1060
1060
  return
1061
1061
  }
1062
1062
 
@@ -1101,7 +1101,7 @@ Radios.prototype.syncAllConditionalReveals = function () {
1101
1101
  * @param {HTMLInputElement} $input Radio input
1102
1102
  */
1103
1103
  Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
1104
- var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
1104
+ var $target = document.getElementById($input.getAttribute('aria-controls'));
1105
1105
 
1106
1106
  if ($target && $target.classList.contains('govuk-radios__conditional')) {
1107
1107
  var inputIsChecked = $input.checked;
@@ -11,13 +11,6 @@
11
11
  aria-describedby – for example hints or error messages -#}
12
12
  {% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
13
13
 
14
- {% set isConditional = false %}
15
- {% for item in params.items %}
16
- {% if item.conditional.html %}
17
- {% set isConditional = true %}
18
- {% endif %}
19
- {% endfor %}
20
-
21
14
  {#- Capture the HTML so we can optionally nest it in a fieldset -#}
22
15
  {% set innerHtml %}
23
16
  {% if params.hint %}
@@ -43,9 +36,9 @@
43
36
  visuallyHiddenText: params.errorMessage.visuallyHiddenText
44
37
  }) | indent(2) | trim }}
45
38
  {% endif %}
46
- <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}{%- if isConditional %} govuk-radios--conditional{% endif -%}"
39
+ <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
47
40
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
48
- {%- if isConditional %} data-module="govuk-radios"{% endif -%}>
41
+ data-module="govuk-radios">
49
42
  {% for item in params.items %}
50
43
  {% if item %}
51
44
  {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -15,6 +15,11 @@
15
15
  padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
16
16
  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
17
17
 
18
+ // Default user agent colours for selects can have low contrast,
19
+ // and may look disabled (#2435)
20
+ color: $govuk-text-colour;
21
+ background-color: govuk-colour("white");
22
+
18
23
  &:focus {
19
24
  outline: $govuk-focus-width solid $govuk-focus-colour;
20
25
  // Ensure outline appears outside of the element
@@ -40,7 +45,7 @@
40
45
  }
41
46
 
42
47
  .govuk-select--error {
43
- border: $govuk-border-width-form-element-error solid $govuk-error-colour;
48
+ border-color: $govuk-error-colour;
44
49
 
45
50
  &:focus {
46
51
  border-color: $govuk-input-border-colour;
@@ -58,7 +58,7 @@
58
58
  }
59
59
  ]
60
60
  },
61
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <span id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
61
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <p id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
62
62
  "hidden": false
63
63
  },
64
64
  {
@@ -297,7 +297,7 @@
297
297
  }
298
298
  ]
299
299
  },
300
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
300
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
301
301
  "hidden": true
302
302
  },
303
303
  {
@@ -320,7 +320,7 @@
320
320
  }
321
321
  ]
322
322
  },
323
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
323
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
324
324
  "hidden": true
325
325
  }
326
326
  ]
@@ -33,4 +33,17 @@
33
33
  }
34
34
  }
35
35
  }
36
+
37
+ .govuk-skip-link-focused-element {
38
+ &:focus {
39
+ // Remove the native visible focus indicator when the element is programmatically focused.
40
+ //
41
+ // We set the focus on the linked element (this is usually the <main> element) when the skip
42
+ // link is activated to improve screen reader announcements. However, we remove the visible
43
+ // focus indicator from the linked element because the user cannot interact with it.
44
+ //
45
+ // A related discussion: https://github.com/w3c/wcag/issues/1001
46
+ outline: none;
47
+ }
48
+ }
36
49
  }
@@ -7,7 +7,7 @@
7
7
  "text": "Skip to main content",
8
8
  "href": "#content"
9
9
  },
10
- "html": "<a href=\"#content\" class=\"govuk-skip-link\">Skip to main content</a>",
10
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to main content</a>",
11
11
  "hidden": false
12
12
  },
13
13
  {
@@ -17,13 +17,13 @@
17
17
  "text": "Skip to main content",
18
18
  "href": "#content"
19
19
  },
20
- "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\">Skip to main content</a>",
20
+ "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\" data-module=\"govuk-skip-link\">Skip to main content</a>",
21
21
  "hidden": false
22
22
  },
23
23
  {
24
24
  "name": "default values",
25
25
  "options": {},
26
- "html": "<a href=\"#content\" class=\"govuk-skip-link\"></a>",
26
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"></a>",
27
27
  "hidden": true
28
28
  },
29
29
  {
@@ -32,7 +32,7 @@
32
32
  "text": "Skip to custom content",
33
33
  "href": "#custom"
34
34
  },
35
- "html": "<a href=\"#custom\" class=\"govuk-skip-link\">Skip to custom content</a>",
35
+ "html": "<a href=\"#custom\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to custom content</a>",
36
36
  "hidden": true
37
37
  },
38
38
  {
@@ -40,7 +40,7 @@
40
40
  "options": {
41
41
  "text": "skip"
42
42
  },
43
- "html": "<a href=\"#content\" class=\"govuk-skip-link\">skip</a>",
43
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">skip</a>",
44
44
  "hidden": true
45
45
  },
46
46
  {
@@ -48,7 +48,7 @@
48
48
  "options": {
49
49
  "text": "<p>skip</p>"
50
50
  },
51
- "html": "<a href=\"#content\" class=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>",
51
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>",
52
52
  "hidden": true
53
53
  },
54
54
  {
@@ -56,7 +56,7 @@
56
56
  "options": {
57
57
  "html": "<p>skip</p>"
58
58
  },
59
- "html": "<a href=\"#content\" class=\"govuk-skip-link\"><p>skip</p></a>",
59
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"><p>skip</p></a>",
60
60
  "hidden": true
61
61
  },
62
62
  {
@@ -65,7 +65,7 @@
65
65
  "text": "Skip link",
66
66
  "classes": "app-skip-link--custom-class"
67
67
  },
68
- "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\">Skip link</a>",
68
+ "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\" data-module=\"govuk-skip-link\">Skip link</a>",
69
69
  "hidden": true
70
70
  },
71
71
  {
@@ -77,7 +77,7 @@
77
77
  "aria-label": "Skip to content"
78
78
  }
79
79
  },
80
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\">Skip link</a>",
80
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\" data-module=\"govuk-skip-link\">Skip link</a>",
81
81
  "hidden": true
82
82
  }
83
83
  ]