ID-48 Build latest package and dist

This includes latest build of package and dist folders.

package/govuk/components/checkboxes/template.njk

@@ -52,6 +52,8 @@
   <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if isConditional %} data-module="govuk-checkboxes"{% endif -%}>
+    <fieldset class="govuk-fieldset">
+      <legend class="govuk-legend">Akordeón: </legend>
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -94,14 +96,15 @@
             text: item.hint.text
           }) | indent(6) | trim }}
           {% endif %}
-        </div>
+        </div>      
         {% if item.conditional %}
           <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>
         {% endif %}
       {% endif %}
     {% endfor %}
+    </fieldset>
   </div>
 {% endset -%}
 

package/idsk/all.js

@@ -1943,7 +1943,7 @@ FooterExtended.prototype.handleSubmitButtonClick = function (e) {
         var subject = $feedbackInfo.getAttribute("data-subject");
         var emailBody = $feedbackInfo.textContent;
         emailBody = emailBody.replace("%issue%", selectedOption).replace("%description%", issueText);
-        document.location = "mailto:"+email+"?subject="+subject+"&body="+emailBody;
+        document.location = "mailto:"+email+"?subject="+subject+"&body="+encodeURIComponent(emailBody);
     }
 };
 
@@ -2511,9 +2511,6 @@ HeaderWeb.prototype.init = function () {
         nodeListForEach($lastLanguageItems, function ($lastLanguageItem) {
             $lastLanguageItem.addEventListener('blur', this.checkBlurLanguageSwitcherClick.bind(this));
         }.bind(this));
-
-        // close language list if user back tabbing
-        this.$languageBtn.addEventListener('keydown', this.handleBackTabbing.bind(this));
     }
 
     $module.boundCheckBlurLanguageSwitcherClick = this.checkBlurLanguageSwitcherClick.bind(this);
@@ -2611,13 +2608,6 @@ HeaderWeb.prototype.checkBlurLanguageSwitcherClick = function (e) {
     }
 };
 
-HeaderWeb.prototype.handleBackTabbing = function (e) {
-    //shift was down when tab was pressed
-    if(e.shiftKey && e.keyCode == 9 && document.activeElement == this.$languageBtn) {
-        this.handleLanguageSwitcherClick(e);
-    }
-};
-
 HeaderWeb.prototype.languegeEscPressed = function (e) {
     if(e.key === "Escape" && this.$languageBtn.getAttribute('aria-expanded') == 'true') {
         this.handleLanguageSwitcherClick(e);
@@ -2747,7 +2737,7 @@ HeaderWeb.prototype.checkBlurMenuItemClick = function (e) {
  * @param {object} e
  */
 HeaderWeb.prototype.showMobileMenu = function () {
-    var closeText = this.menuBtnText ? 'Zavrieť' : '';
+    var closeText = this.$menuButton.getAttribute('data-text-for-close') ? this.$menuButton.getAttribute('data-text-for-close') : '';
     var $mobileMenu = this.$module.querySelector('.idsk-header-web__nav');
     toggleClass($mobileMenu, 'idsk-header-web__nav--mobile');
     toggleClass(this.$menuButton, 'idsk-header-web__main-headline-menu-button--active');
@@ -4278,6 +4268,7 @@ Crossroad.prototype.handleShowItems = function (e) {
   var $uncollapseDiv = this.$module.querySelector('.idsk-crossroad__uncollapse-div');
   var $crossroadTitles = this.$module.querySelectorAll('.idsk-crossroad-title');
   var $crossroadSubtitles = this.$module.querySelectorAll('.idsk-crossroad-subtitle');
+  var $expandedButton = this.$module.querySelector('.idsk-crossroad__colapse--button');
 
   $crossroadItems.forEach(function (crossroadItem) {
     toggleClass(crossroadItem, 'idsk-crossroad__item--two-columns-show');
@@ -4291,6 +4282,13 @@ Crossroad.prototype.handleShowItems = function (e) {
   toggleClass(e.srcElement, 'idsk-crossroad__colapse--button-show');
   toggleClass($uncollapseDiv, 'idsk-crossroad__collapse--shadow');
   toggleClass($uncollapseDiv, 'idsk-crossroad__collapse--arrow');
+  if($expandedButton.classList.contains('idsk-crossroad__colapse--button-show')) {
+    $expandedButton.setAttribute('aria-expanded', 'true');
+    $expandedButton.setAttribute('aria-label', $expandedButton.getAttribute('data-text-for-show'));
+  } else {
+    $expandedButton.setAttribute('aria-expanded', 'false');
+    $expandedButton.setAttribute('aria-label', $expandedButton.getAttribute('data-text-for-hide'));
+  }
 };
 
 function InPageNavigation($module) {
@@ -4361,9 +4359,12 @@ InPageNavigation.prototype.handleClickLink = function (e) {
 InPageNavigation.prototype.handleClickLinkPanel = function (e) {
     var $module = this.$module;
     var $linkPanelButton = $module.querySelector('.idsk-in-page-navigation__link-panel');
+    var $expandedButton = $module.querySelector('.idsk-in-page-navigation__link-panel-button');
 
     $module.classList.add('idsk-in-page-navigation--expand');
     $linkPanelButton.removeEventListener('click', $module.boundHandleClickLinkPanel, true);
+    $expandedButton.setAttribute('aria-expanded', 'true');
+    $expandedButton.setAttribute('aria-label', $expandedButton.getAttribute('data-text-for-show'));
     document.addEventListener('click', $module.boundCheckCloseClick, true);
 };
 
@@ -4376,12 +4377,15 @@ InPageNavigation.prototype.checkCloseClick = function (e) {
     var $navigationList = $el.closest('.idsk-in-page-navigation__list');
     var $module = this.$module;
     var $linkPanelButton = $module.querySelector('.idsk-in-page-navigation__link-panel');
+    var $expandedButton = $module.querySelector('.idsk-in-page-navigation__link-panel-button');
 
     if ($navigationList == null) {
         e.stopPropagation(); // prevent bubbling
         $module.classList.remove('idsk-in-page-navigation--expand');
         $linkPanelButton.addEventListener('click', $module.boundHandleClickLinkPanel, true);
         document.removeEventListener('click', $module.boundCheckCloseClick, true);
+        $expandedButton.setAttribute('aria-expanded', 'false');
+        $expandedButton.setAttribute('aria-label', $expandedButton.getAttribute('data-text-for-hide'));
     }
 };
 
@@ -4571,8 +4575,11 @@ TableFilter.prototype.handleClickTogglePanel = function (e) {
   // set text for toggle
   var hidden = $content.style.height === '0px';
   var newToggleText = hidden ? openText : closeText;
+  var newToggleButton = hidden ? 'false' : 'true';
+  var $ariaToggleForm = document.querySelector('.idsk-table-filter__content');
   $el.innerHTML = newToggleText;
   $el.setAttribute('aria-label', newToggleText + ($el.dataset.categoryName ? ' ' + $el.dataset.categoryName : ''));
+  $ariaToggleForm.setAttribute('aria-hidden', newToggleButton);
 
   // toggle tabbable if content is shown or not
   var $items = $content.querySelectorAll(':scope > .idsk-table-filter__filter-inputs input, :scope > .idsk-table-filter__filter-inputs select, .idsk-filter-menu__toggle');
@@ -4811,7 +4818,6 @@ Stepper.prototype.initControls = function () {
     // Create "Zobraziť všetko" button and set attributes
     this.$openAllButton = document.createElement('button');
     this.$openAllButton.setAttribute('type', 'button');
-    this.$openAllButton.innerHTML = $accordionControls.dataset.line1 + ' <span class="govuk-visually-hidden">sections</span>';
     this.$openAllButton.setAttribute('class', this.$openAllClass);
     this.$openAllButton.setAttribute('aria-expanded', 'false');
     this.$openAllButton.setAttribute('type', 'button');
@@ -4978,7 +4984,6 @@ Stepper.prototype.updateOpenAllButton = function ($expanded) {
 
   if ($accordionControls) {
     var $newButtonText = $expanded ? $accordionControls.dataset.line2 : $accordionControls.dataset.line1;
-    $newButtonText += '<span class="govuk-visually-hidden"> sections</span>';
     this.$openAllButton.setAttribute('aria-expanded', $expanded);
     this.$openAllButton.innerHTML = $newButtonText;
   } else {
@@ -5604,6 +5609,16 @@ Tabs$1.prototype.toggleMobileTab = function ($tab, currentTab) {
   if ($mobileTab.classList.contains('idsk-tabs__mobile-tab--selected') && currentTab) {
     $mobileTab.classList.remove('idsk-tabs__mobile-tab--selected');
     $mobilePanel.classList.add(this.mobileTabHiddenClass);
+    $mobileTab.setAttribute('aria-expanded', 'false');
+    $mobileTab.setAttribute('aria-label', $mobileTab.getAttribute('text-for-hide'));
+  }
+  else if ($mobileTab.classList.contains('idsk-tabs__mobile-tab--selected')) {
+    $mobileTab.setAttribute('aria-expanded', 'true');
+    $mobileTab.setAttribute('aria-label', $mobileTab.getAttribute('text-for-show'));
+  }
+  else {
+    $mobileTab.setAttribute('aria-expanded', 'false');
+    $mobileTab.setAttribute('aria-label', $mobileTab.getAttribute('text-for-hide'));
   }
 };
 
@@ -5901,6 +5916,59 @@ function initAll(options) {
   initExtended(options);
 }
 
+function Header$1($module) {
+  this.$module = $module;
+}
+
+Header$1.prototype.init = function () {
+  // Check for module
+  var $module = this.$module;
+  if (!$module) {
+    return
+  }
+
+  // Check for button
+  var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
+  if (!$toggleButton) {
+    return
+  }
+
+  // Handle $toggleButton click events
+  $toggleButton.addEventListener('click', this.handleClick.bind(this));
+};
+
+/**
+* Toggle class
+* @param {object} node element
+* @param {string} className to toggle
+*/
+Header$1.prototype.toggleClass = function (node, className) {
+  if (node.className.indexOf(className) > 0) {
+    node.className = node.className.replace(' ' + className, '');
+  } else {
+    node.className += ' ' + className;
+  }
+};
+
+/**
+* An event handler for click event on $toggleButton
+* @param {object} event event
+*/
+Header$1.prototype.handleClick = function (event) {
+  var $module = this.$module;
+  var $toggleButton = event.target || event.srcElement;
+  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
+
+  // If a button with aria-controls, handle click
+  if ($toggleButton && $target) {
+    this.toggleClass($target, 'idsk-header__navigation--open');
+    this.toggleClass($toggleButton, 'idsk-header__menu-button--open');
+
+    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
+    $target.setAttribute('aria-hidden', ($target.getAttribute('aria-hidden') === 'false').toString());
+  }
+};
+
 /**
  * Header for extended websites
  */
@@ -6244,9 +6312,17 @@ SearchResultsFilter.prototype.handleClickLinkPanel = function (e) {
     var $el = e.target || e.srcElement;
     var $linkPanelButton = $el.closest('.idsk-search-results__link-panel');
     var $contentPanel = $linkPanelButton.querySelector('.idsk-search-results__list');
+    var $ariaLabelComponent = $el.closest('.idsk-search-results__link-panel-button');
 
     toggleClass($contentPanel, 'idsk-search-results--hidden');
     toggleClass($linkPanelButton, 'idsk-search-results--expand');
+    if ($linkPanelButton.classList.contains('idsk-search-results--expand')) {
+        $ariaLabelComponent.setAttribute('aria-expanded', 'true');  
+        $ariaLabelComponent.setAttribute('aria-label', $ariaLabelComponent.getAttribute('data-text-for-hide')); 
+    } else {
+        $ariaLabelComponent.setAttribute('aria-expanded', 'false');
+        $ariaLabelComponent.setAttribute('aria-label', $ariaLabelComponent.getAttribute('data-text-for-show'));
+    }
 };
 
 function initAll$1(options) {
@@ -6257,6 +6333,11 @@ function initAll$1(options) {
   // Defaults to the entire document if nothing is set.
   var scope = typeof options.scope !== 'undefined' ? options.scope : document;
 
+  var $headers = scope.querySelectorAll('[data-module="idsk-header"]');
+  nodeListForEach($headers, function ($headers) {
+    new Header$1($headers).init();
+  });
+
   // Find first Header-extended module to enhance.
   var $headersExtended = scope.querySelectorAll('[data-module="idsk-header-extended"]');
   nodeListForEach($headersExtended, function ($headerExtended) {
@@ -6275,6 +6356,7 @@ function initAll$1(options) {
 }
 
 exports.initAll = initAll$1;
+exports.Header = Header$1;
 exports.HeaderExtended = HeaderExtended;
 exports.SearchResultsFilter = SearchResultsFilter;
 

package/idsk/components/address/macro-options.json

@@ -56,5 +56,11 @@
                 "description": "href link address"
             }
         ]
+    },
+    {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": "text representing address"
     }
 ]

package/idsk/components/address/template.njk

@@ -22,6 +22,7 @@
         </div>
         <iframe
             class="idsk-address__map"
+            title="{{params.title}}"
             loading="lazy"
             allowfullscreen
             src="{{ params.googleMapsLink }}">

package/idsk/components/card/template.njk

@@ -15,8 +15,8 @@
 <div class="idsk-card idsk-card-{{ type }}">
 
     {% if params.imgSrc %}
-    <a href="{{params.link}}" title="{{ params.heading }}">
-        <img class="idsk-card-img idsk-card-img-{{type}}" src="{{ params.imgSrc }}" alt="{{ params.heading }}" aria-hidden="true" />
+    <a href="{{params.link}}" title="{{ params.heading }}" aria-hidden="true">
+        <img class="idsk-card-img idsk-card-img-{{type}}" src="{{ params.imgSrc }}" alt="{{ params.heading }}" />
     </a>
     {% endif %}
 
@@ -25,9 +25,9 @@
         {{ dateAndTag | safe }}
         {% endif %}
 
-        <div class="idsk-heading idsk-heading-{{ type }}">
+        <h1 class="idsk-heading idsk-heading-{{ type }}">
             <a href="{{params.link}}" class="idsk-card-title govuk-link" title="{{ params.heading }}">{{ params.heading }}</a>
-        </div>
+        </h1>
 
         {% if params.description %}
         {% if type != 'profile-horizontal' and type != 'profile-vertical' %}
@@ -56,7 +56,7 @@
                 <image href="/assets/images/quote-left.png" xlink:href="" width="29" height="25"></image>
             </svg>
         </div>
-        <div class="idsk-quote"> {{ params.quote }}</div>
+        <blockquote class="idsk-quote"> {{ params.quote }}</blockquote>
         <div class="idsk-quote-right" aria-hidden="true">
             <svg width="24" height="20" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2.1662 24.4934C4.93513 24.2808 8.60138 21.6273 11.4456 17.4817C13.4684 14.5332 15.6824 9.84205 15.6824 6.08707C15.6824 3.14154 13.3705 0.753727 10.5187 0.753727C7.66689 0.753727 5.35503 3.14154 5.35503 6.08707C5.35503 8.59472 7.03065 10.6982 9.28852 11.2681C8.72202 13.2493 7.70737 15.404 6.28192 17.4817C4.38369 20.2485 2.1193 22.3506 -0.000114441 23.5061L2.1662 24.4934Z" fill="#003078"/>