katalyst-govuk-formbuilder 1.7.0 → 1.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/katalyst/govuk/formbuilder.css +56 -103
  3. data/app/assets/builds/katalyst/govuk/formbuilder.js +69 -58
  4. data/app/assets/builds/katalyst/govuk/formbuilder.min.js +12 -12
  5. data/lib/katalyst/govuk/formbuilder/extensions.rb +16 -0
  6. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/accordion/_index.scss +1 -1
  7. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/back-link/_index.scss +1 -1
  8. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/button/_index.scss +1 -1
  9. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/character-count/_index.scss +1 -1
  10. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/checkboxes/_index.scss +46 -53
  11. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/error-summary/_index.scss +1 -1
  12. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/fieldset/_index.scss +3 -3
  13. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/footer/_index.scss +1 -1
  14. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/header/_index.scss +24 -7
  15. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/input/_index.scss +5 -10
  16. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/label/_index.scss +3 -3
  17. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/notification-banner/_index.scss +2 -2
  18. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/panel/_index.scss +2 -2
  19. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/phase-banner/_index.scss +8 -2
  20. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/radios/_index.scss +52 -59
  21. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/skip-link/_index.scss +1 -1
  22. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/summary-list/_index.scss +1 -1
  23. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/table/_index.scss +14 -4
  24. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/tabs/_index.scss +1 -1
  25. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_all.scss +1 -1
  26. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss +12 -0
  27. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_typography.scss +3 -1
  28. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/helpers/_typography.scss +102 -24
  29. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/overrides/_typography.scss +11 -2
  30. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/settings/_measurements.scss +1 -1
  31. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/settings/_media-queries.scss +1 -1
  32. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/settings/_typography-responsive.scss +177 -13
  33. metadata +4 -4
  34. data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_govuk-frontend-version.scss +0 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: da18c9d693b01288822028e2c8a5ba21100f572a6456e71139cb494bdf71055b
4
- data.tar.gz: 82a435c77c19acc42f02b130d3a01b6471829295d7ff3c3c99c2b005cf4e87f2
3
+ metadata.gz: 8128c90fe1dd5ef017be23e39971ca0d829c7ff6a5b27c9927945711f727f4b1
4
+ data.tar.gz: 011ad3d671a3b7529f2bf03fa23064e2f91a92de40eaba610b268620dafe8b51
5
5
  SHA512:
6
- metadata.gz: e6c9fa57613d0f2bec841a478cfcaa2a283b006f3d7f2d8fb2802859bc5eb9d0c409b598aa143fa15ec8147f417433a508ddc5ce4b42f8a4ff57028fa48a5d5a
7
- data.tar.gz: f4cd060ee723cc5f029ec7270969f262afd8a0dbf4a6a1d55f86b660d84a68d9b23d650e3722bbdc3ec1e23da7b1b37acf4d5a90e0916aef1a5c090073cf299b
6
+ metadata.gz: 6ccd164dbd7ed8a716b1d81feecc90b87ef94dda9e6953914f0078127217747b2f34620b3d5932b69874b1327077a9c83da7ea9525a6cdb1f2ec515ca24fa687
7
+ data.tar.gz: df2561a7bb8d78d45b0932a820e2b951de1bcb8765b960c5f5fac5c967a7262e8d103767bdd6de82ab2ca00231ceeef3aea712b586f7699f7564b601e776e033
@@ -43,7 +43,10 @@
43
43
 
44
44
 
45
45
  :root {
46
- --govuk-frontend-version: "5.0.0";
46
+ --govuk-frontend-version: "5.2.0";
47
+ --govuk-frontend-breakpoint-mobile: 20rem;
48
+ --govuk-frontend-breakpoint-tablet: 40.0625rem;
49
+ --govuk-frontend-breakpoint-desktop: 48.0625rem;
47
50
  }
48
51
 
49
52
 
@@ -1823,12 +1826,10 @@
1823
1826
 
1824
1827
 
1825
1828
  .govuk-checkboxes__item {
1826
- display: block;
1829
+ display: flex;
1830
+ flex-wrap: wrap;
1827
1831
  position: relative;
1828
- min-height: 40px;
1829
1832
  margin-bottom: 10px;
1830
- padding-left: 40px;
1831
- clear: left;
1832
1833
  }
1833
1834
 
1834
1835
  .govuk-checkboxes__item:last-child,
@@ -1837,10 +1838,7 @@
1837
1838
  }
1838
1839
 
1839
1840
  .govuk-checkboxes__input {
1840
- position: absolute;
1841
1841
  z-index: 1;
1842
- top: -2px;
1843
- left: -2px;
1844
1842
  width: 44px;
1845
1843
  height: 44px;
1846
1844
  margin: 0;
@@ -1849,9 +1847,10 @@
1849
1847
  }
1850
1848
 
1851
1849
  .govuk-checkboxes__label {
1852
- display: inline-block;
1850
+ align-self: center;
1851
+ max-width: calc(100% - 74px);
1853
1852
  margin-bottom: 0;
1854
- padding: 8px 15px 5px;
1853
+ padding: 7px 15px;
1855
1854
  cursor: pointer;
1856
1855
  touch-action: manipulation;
1857
1856
  }
@@ -1860,8 +1859,8 @@
1860
1859
  content: "";
1861
1860
  box-sizing: border-box;
1862
1861
  position: absolute;
1863
- top: 0;
1864
- left: 0;
1862
+ top: 2px;
1863
+ left: 2px;
1865
1864
  width: 40px;
1866
1865
  height: 40px;
1867
1866
  border: 2px solid currentcolor;
@@ -1872,8 +1871,8 @@
1872
1871
  content: "";
1873
1872
  box-sizing: border-box;
1874
1873
  position: absolute;
1875
- top: 11px;
1876
- left: 9px;
1874
+ top: 13px;
1875
+ left: 10px;
1877
1876
  width: 23px;
1878
1877
  height: 12px;
1879
1878
  transform: rotate(-45deg);
@@ -1886,8 +1885,14 @@
1886
1885
 
1887
1886
  .govuk-checkboxes__hint {
1888
1887
  display: block;
1888
+ width: 100%;
1889
+ margin-top: -5px;
1889
1890
  padding-right: 15px;
1890
- padding-left: 15px;
1891
+ padding-left: 59px;
1892
+ }
1893
+
1894
+ .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-checkboxes__hint {
1895
+ margin-bottom: 0;
1891
1896
  }
1892
1897
 
1893
1898
  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
@@ -1970,49 +1975,33 @@
1970
1975
  }
1971
1976
 
1972
1977
  .govuk-checkboxes--small .govuk-checkboxes__item {
1973
- min-height: 0;
1974
1978
  margin-bottom: 0;
1975
- padding-left: 34px;
1976
- float: left;
1977
- }
1978
- .govuk-checkboxes--small .govuk-checkboxes__item::after {
1979
- content: "";
1980
- display: block;
1981
- clear: both;
1982
1979
  }
1983
1980
  .govuk-checkboxes--small .govuk-checkboxes__input {
1984
- left: -10px;
1981
+ margin-left: -10px;
1985
1982
  }
1986
1983
  .govuk-checkboxes--small .govuk-checkboxes__label {
1987
- margin-top: -2px;
1988
- padding: 13px 15px 13px 1px;
1989
- float: left;
1990
- }
1991
- @media (min-width: 40.0625em) {
1992
- .govuk-checkboxes--small .govuk-checkboxes__label {
1993
- padding: 11px 15px 10px 1px;
1994
- }
1984
+ padding-left: 1px;
1995
1985
  }
1996
1986
  .govuk-checkboxes--small .govuk-checkboxes__label::before {
1997
- top: 8px;
1987
+ top: 10px;
1988
+ left: 0;
1998
1989
  width: 24px;
1999
1990
  height: 24px;
2000
1991
  }
2001
1992
  .govuk-checkboxes--small .govuk-checkboxes__label::after {
2002
- top: 15px;
1993
+ top: 17px;
2003
1994
  left: 6px;
2004
1995
  width: 12px;
2005
1996
  height: 6.5px;
2006
1997
  border-width: 0 0 3px 3px;
2007
1998
  }
2008
1999
  .govuk-checkboxes--small .govuk-checkboxes__hint {
2009
- padding: 0;
2010
- clear: both;
2000
+ padding-left: 34px;
2011
2001
  }
2012
2002
  .govuk-checkboxes--small .govuk-checkboxes__conditional {
2013
2003
  margin-left: 10px;
2014
2004
  padding-left: 20px;
2015
- clear: both;
2016
2005
  }
2017
2006
  .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
2018
2007
  outline: 3px dashed transparent;
@@ -2105,24 +2094,9 @@
2105
2094
  }
2106
2095
 
2107
2096
  .govuk-input--extra-letter-spacing {
2108
- font-family: "Open Sans", sans-serif;
2109
- -webkit-font-smoothing: antialiased;
2110
- -moz-osx-font-smoothing: grayscale;
2111
- font-feature-settings: "tnum" 1;
2112
- font-weight: 400;
2097
+ font-variant-numeric: tabular-nums;
2113
2098
  letter-spacing: 0.05em;
2114
2099
  }
2115
- @media print {
2116
- .govuk-input--extra-letter-spacing {
2117
- font-family: sans-serif;
2118
- }
2119
- }
2120
- @supports (font-variant-numeric: tabular-nums) {
2121
- .govuk-input--extra-letter-spacing {
2122
- font-feature-settings: normal;
2123
- font-variant-numeric: tabular-nums;
2124
- }
2125
- }
2126
2100
 
2127
2101
  .govuk-input--width-30 {
2128
2102
  max-width: 29.5em;
@@ -2179,7 +2153,9 @@
2179
2153
  font-size: 1rem;
2180
2154
  line-height: 1.25;
2181
2155
  box-sizing: border-box;
2182
- display: inline-block;
2156
+ display: flex;
2157
+ align-items: center;
2158
+ justify-content: center;
2183
2159
  min-width: 2.5rem;
2184
2160
  height: 2.5rem;
2185
2161
  padding: 5px;
@@ -2210,12 +2186,6 @@
2210
2186
  line-height: 1.15;
2211
2187
  }
2212
2188
  }
2213
- @media (max-width: 40.0525em) {
2214
- .govuk-input__prefix,
2215
- .govuk-input__suffix {
2216
- line-height: 1.6;
2217
- }
2218
- }
2219
2189
  @media (max-width: 19.99em) {
2220
2190
  .govuk-input__prefix,
2221
2191
  .govuk-input__suffix {
@@ -2476,12 +2446,10 @@
2476
2446
 
2477
2447
 
2478
2448
  .govuk-radios__item {
2479
- display: block;
2449
+ display: flex;
2450
+ flex-wrap: wrap;
2480
2451
  position: relative;
2481
- min-height: 40px;
2482
2452
  margin-bottom: 10px;
2483
- padding-left: 40px;
2484
- clear: left;
2485
2453
  }
2486
2454
 
2487
2455
  .govuk-radios__item:last-child,
@@ -2490,10 +2458,7 @@
2490
2458
  }
2491
2459
 
2492
2460
  .govuk-radios__input {
2493
- position: absolute;
2494
2461
  z-index: 1;
2495
- top: -2px;
2496
- left: -2px;
2497
2462
  width: 44px;
2498
2463
  height: 44px;
2499
2464
  margin: 0;
@@ -2502,9 +2467,10 @@
2502
2467
  }
2503
2468
 
2504
2469
  .govuk-radios__label {
2505
- display: inline-block;
2470
+ align-self: center;
2471
+ max-width: calc(100% - 74px);
2506
2472
  margin-bottom: 0;
2507
- padding: 8px 15px 5px;
2473
+ padding: 7px 15px;
2508
2474
  cursor: pointer;
2509
2475
  touch-action: manipulation;
2510
2476
  }
@@ -2513,8 +2479,8 @@
2513
2479
  content: "";
2514
2480
  box-sizing: border-box;
2515
2481
  position: absolute;
2516
- top: 0;
2517
- left: 0;
2482
+ top: 2px;
2483
+ left: 2px;
2518
2484
  width: 40px;
2519
2485
  height: 40px;
2520
2486
  border: 2px solid currentcolor;
@@ -2525,8 +2491,8 @@
2525
2491
  .govuk-radios__label::after {
2526
2492
  content: "";
2527
2493
  position: absolute;
2528
- top: 10px;
2529
- left: 10px;
2494
+ top: 12px;
2495
+ left: 12px;
2530
2496
  width: 0;
2531
2497
  height: 0;
2532
2498
  border: 10px solid currentcolor;
@@ -2537,8 +2503,14 @@
2537
2503
 
2538
2504
  .govuk-radios__hint {
2539
2505
  display: block;
2506
+ width: 100%;
2507
+ margin-top: -5px;
2540
2508
  padding-right: 15px;
2541
- padding-left: 15px;
2509
+ padding-left: 59px;
2510
+ }
2511
+
2512
+ .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {
2513
+ margin-bottom: 0;
2542
2514
  }
2543
2515
 
2544
2516
  .govuk-radios__input:focus + .govuk-radios__label::before {
@@ -2568,15 +2540,13 @@
2568
2540
  }
2569
2541
 
2570
2542
  @media (min-width: 40.0625em) {
2571
- .govuk-radios--inline::after {
2572
- content: "";
2573
- display: block;
2574
- clear: both;
2543
+ .govuk-radios--inline {
2544
+ display: flex;
2545
+ flex-wrap: wrap;
2546
+ align-items: flex-start;
2575
2547
  }
2576
2548
  .govuk-radios--inline .govuk-radios__item {
2577
2549
  margin-right: 20px;
2578
- float: left;
2579
- clear: none;
2580
2550
  }
2581
2551
  }
2582
2552
 
@@ -2634,48 +2604,31 @@
2634
2604
  }
2635
2605
 
2636
2606
  .govuk-radios--small .govuk-radios__item {
2637
- min-height: 0;
2638
2607
  margin-bottom: 0;
2639
- padding-left: 34px;
2640
- float: left;
2641
- }
2642
- .govuk-radios--small .govuk-radios__item::after {
2643
- content: "";
2644
- display: block;
2645
- clear: both;
2646
2608
  }
2647
2609
  .govuk-radios--small .govuk-radios__input {
2648
- left: -10px;
2610
+ margin-left: -10px;
2649
2611
  }
2650
2612
  .govuk-radios--small .govuk-radios__label {
2651
- margin-top: -2px;
2652
- padding: 13px 15px 13px 1px;
2653
- float: left;
2654
- }
2655
- @media (min-width: 40.0625em) {
2656
- .govuk-radios--small .govuk-radios__label {
2657
- padding: 11px 15px 10px 1px;
2658
- }
2613
+ padding-left: 1px;
2659
2614
  }
2660
2615
  .govuk-radios--small .govuk-radios__label::before {
2661
- top: 8px;
2616
+ top: 10px;
2617
+ left: 0;
2662
2618
  width: 24px;
2663
2619
  height: 24px;
2664
2620
  }
2665
2621
  .govuk-radios--small .govuk-radios__label::after {
2666
- top: 15px;
2622
+ top: 17px;
2667
2623
  left: 7px;
2668
2624
  border-width: 5px;
2669
2625
  }
2670
2626
  .govuk-radios--small .govuk-radios__hint {
2671
- padding: 0;
2672
- clear: both;
2673
- pointer-events: none;
2627
+ padding-left: 34px;
2674
2628
  }
2675
2629
  .govuk-radios--small .govuk-radios__conditional {
2676
2630
  margin-left: 10px;
2677
2631
  padding-left: 20px;
2678
- clear: both;
2679
2632
  }
2680
2633
  .govuk-radios--small .govuk-radios__divider {
2681
2634
  width: 24px;
@@ -43,6 +43,38 @@ function getFragmentFromUrl(url) {
43
43
  }
44
44
  return url.split('#').pop();
45
45
  }
46
+ function getBreakpoint(name) {
47
+ const property = `--govuk-frontend-breakpoint-${name}`;
48
+ const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
49
+ return {
50
+ property,
51
+ value: value || undefined
52
+ };
53
+ }
54
+ function setFocus($element, options = {}) {
55
+ var _options$onBeforeFocu;
56
+ const isFocusable = $element.getAttribute('tabindex');
57
+ if (!isFocusable) {
58
+ $element.setAttribute('tabindex', '-1');
59
+ }
60
+ function onFocus() {
61
+ $element.addEventListener('blur', onBlur, {
62
+ once: true
63
+ });
64
+ }
65
+ function onBlur() {
66
+ var _options$onBlur;
67
+ (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
68
+ if (!isFocusable) {
69
+ $element.removeAttribute('tabindex');
70
+ }
71
+ }
72
+ $element.addEventListener('focus', onFocus, {
73
+ once: true
74
+ });
75
+ (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
76
+ $element.focus();
77
+ }
46
78
  function isSupported($scope = document.body) {
47
79
  if (!$scope) {
48
80
  return false;
@@ -1138,18 +1170,10 @@ class ErrorSummary extends GOVUKFrontendComponent {
1138
1170
  }
1139
1171
  this.$module = $module;
1140
1172
  this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset($module.dataset));
1141
- this.setFocus();
1142
- this.$module.addEventListener('click', event => this.handleClick(event));
1143
- }
1144
- setFocus() {
1145
- if (this.config.disableAutoFocus) {
1146
- return;
1173
+ if (!this.config.disableAutoFocus) {
1174
+ setFocus(this.$module);
1147
1175
  }
1148
- this.$module.setAttribute('tabindex', '-1');
1149
- this.$module.addEventListener('blur', () => {
1150
- this.$module.removeAttribute('tabindex');
1151
- });
1152
- this.$module.focus();
1176
+ this.$module.addEventListener('click', event => this.handleClick(event));
1153
1177
  }
1154
1178
  handleClick(event) {
1155
1179
  const $target = event.target;
@@ -1479,16 +1503,26 @@ class Header extends GOVUKFrontendComponent {
1479
1503
  }
1480
1504
  this.$menu = $menu;
1481
1505
  this.$menuButton = $menuButton;
1482
- this.mql = window.matchMedia('(min-width: 48.0625em)');
1506
+ this.setupResponsiveChecks();
1507
+ this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
1508
+ }
1509
+ setupResponsiveChecks() {
1510
+ const breakpoint = getBreakpoint('desktop');
1511
+ if (!breakpoint.value) {
1512
+ throw new ElementError({
1513
+ componentName: 'Header',
1514
+ identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
1515
+ });
1516
+ }
1517
+ this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
1483
1518
  if ('addEventListener' in this.mql) {
1484
- this.mql.addEventListener('change', () => this.syncState());
1519
+ this.mql.addEventListener('change', () => this.checkMode());
1485
1520
  } else {
1486
- this.mql.addListener(() => this.syncState());
1521
+ this.mql.addListener(() => this.checkMode());
1487
1522
  }
1488
- this.syncState();
1489
- this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
1523
+ this.checkMode();
1490
1524
  }
1491
- syncState() {
1525
+ checkMode() {
1492
1526
  if (!this.mql || !this.$menu || !this.$menuButton) {
1493
1527
  return;
1494
1528
  }
@@ -1507,7 +1541,7 @@ class Header extends GOVUKFrontendComponent {
1507
1541
  }
1508
1542
  handleMenuButtonClick() {
1509
1543
  this.menuIsOpen = !this.menuIsOpen;
1510
- this.syncState();
1544
+ this.checkMode();
1511
1545
  }
1512
1546
  }
1513
1547
  Header.moduleName = 'govuk-header';
@@ -1535,22 +1569,9 @@ class NotificationBanner extends GOVUKFrontendComponent {
1535
1569
  }
1536
1570
  this.$module = $module;
1537
1571
  this.config = mergeConfigs(NotificationBanner.defaults, config, normaliseDataset($module.dataset));
1538
- this.setFocus();
1539
- }
1540
- setFocus() {
1541
- if (this.config.disableAutoFocus) {
1542
- return;
1572
+ if (this.$module.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
1573
+ setFocus(this.$module);
1543
1574
  }
1544
- if (this.$module.getAttribute('role') !== 'alert') {
1545
- return;
1546
- }
1547
- if (!this.$module.getAttribute('tabindex')) {
1548
- this.$module.setAttribute('tabindex', '-1');
1549
- this.$module.addEventListener('blur', () => {
1550
- this.$module.removeAttribute('tabindex');
1551
- });
1552
- }
1553
- this.$module.focus();
1554
1575
  }
1555
1576
  }
1556
1577
 
@@ -1676,8 +1697,6 @@ class SkipLink extends GOVUKFrontendComponent {
1676
1697
  var _this$$module$getAttr;
1677
1698
  super();
1678
1699
  this.$module = void 0;
1679
- this.$linkedElement = void 0;
1680
- this.linkedElementListener = false;
1681
1700
  if (!($module instanceof HTMLAnchorElement)) {
1682
1701
  throw new ElementError({
1683
1702
  componentName: 'Skip link',
@@ -1710,29 +1729,14 @@ class SkipLink extends GOVUKFrontendComponent {
1710
1729
  identifier: `Target content (\`id="${linkedElementId}"\`)`
1711
1730
  });
1712
1731
  }
1713
- this.$linkedElement = $linkedElement;
1714
- this.$module.addEventListener('click', () => this.focusLinkedElement());
1715
- }
1716
- focusLinkedElement() {
1717
- if (!this.$linkedElement) {
1718
- return;
1719
- }
1720
- if (!this.$linkedElement.getAttribute('tabindex')) {
1721
- this.$linkedElement.setAttribute('tabindex', '-1');
1722
- this.$linkedElement.classList.add('govuk-skip-link-focused-element');
1723
- if (!this.linkedElementListener) {
1724
- this.$linkedElement.addEventListener('blur', () => this.removeFocusProperties());
1725
- this.linkedElementListener = true;
1732
+ this.$module.addEventListener('click', () => setFocus($linkedElement, {
1733
+ onBeforeFocus() {
1734
+ $linkedElement.classList.add('govuk-skip-link-focused-element');
1735
+ },
1736
+ onBlur() {
1737
+ $linkedElement.classList.remove('govuk-skip-link-focused-element');
1726
1738
  }
1727
- }
1728
- this.$linkedElement.focus();
1729
- }
1730
- removeFocusProperties() {
1731
- if (!this.$linkedElement) {
1732
- return;
1733
- }
1734
- this.$linkedElement.removeAttribute('tabindex');
1735
- this.$linkedElement.classList.remove('govuk-skip-link-focused-element');
1739
+ }));
1736
1740
  }
1737
1741
  }
1738
1742
  SkipLink.moduleName = 'govuk-skip-link';
@@ -1802,7 +1806,14 @@ class Tabs extends GOVUKFrontendComponent {
1802
1806
  this.setupResponsiveChecks();
1803
1807
  }
1804
1808
  setupResponsiveChecks() {
1805
- this.mql = window.matchMedia('(min-width: 40.0625em)');
1809
+ const breakpoint = getBreakpoint('tablet');
1810
+ if (!breakpoint.value) {
1811
+ throw new ElementError({
1812
+ componentName: 'Tabs',
1813
+ identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
1814
+ });
1815
+ }
1816
+ this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
1806
1817
  if ('addEventListener' in this.mql) {
1807
1818
  this.mql.addEventListener('change', () => this.checkMode());
1808
1819
  } else {