hmrc-frontend 6.47.0 → 6.50.0

package/hmrc/VERSION.txt

@@ -1 +1 @@
-6.47.0
+6.50.0

package/hmrc/{accessible-autocomplete-6.47.0.css → accessible-autocomplete-6.50.0.css}

@@ -1,2 +1,2 @@
-.autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #0b0c0c;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;height:2.5rem;line-height:1.25;margin-bottom:0;width:100%}.autocomplete__input{background-color:rgba(0,0,0,0);position:relative}.autocomplete__hint{color:#505a5f;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{-webkit-box-shadow:inset 0 0 0 2px;box-shadow:inset 0 0 0 2px;outline:3px solid #fd0;outline-offset:0}.autocomplete__input--show-all-values{cursor:pointer;padding:5px 35px 5px 5px}.autocomplete__dropdown-arrow-down{display:inline-block;height:24px;position:absolute;right:8px;top:10px;width:24px;z-index:-1}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{-webkit-box-shadow:0 2px 6px rgba(0,0,0,.257);box-shadow:0 2px 6px rgba(0,0,0,.257);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:1px solid #b1b4b6;border-left-width:0;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#f3f2f1}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:none}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{background-color:Highlight;background-color:SelectedItem;border-color:SelectedItem;color:HighlightText;color:SelectedItemText;forced-color-adjust:none;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#f3f2f1;color:#505a5f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1rem;font-weight:400}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1.1875rem;line-height:1.3157894737}}.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1rem;line-height:1.25}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-family:sans-serif}}@media (min-width:40.0625em){.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-size:1.1875rem;line-height:1.3157894737}}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-size:14pt;line-height:1.15}}
-/*# sourceMappingURL=maps/accessible-autocomplete-6.47.0.css.map */
+.autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #0b0c0c;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;height:2.5rem;line-height:1.25;margin-bottom:0;width:100%}.autocomplete__input{background-color:rgba(0,0,0,0);position:relative}.autocomplete__hint{color:#505a5f;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{-webkit-box-shadow:inset 0 0 0 2px;box-shadow:inset 0 0 0 2px;outline:3px solid #fd0;outline-offset:0}.autocomplete__input--show-all-values{cursor:pointer;padding:5px 35px 5px 5px}.autocomplete__dropdown-arrow-down{display:inline-block;height:24px;position:absolute;right:8px;top:10px;width:24px;z-index:-1}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{-webkit-box-shadow:0 2px 6px rgba(0,0,0,.257);box-shadow:0 2px 6px rgba(0,0,0,.257);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:1px solid #b1b4b6;border-left-width:0;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#f3f2f1}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:none}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{background-color:Highlight;background-color:SelectedItem;border-color:SelectedItem;color:HighlightText;color:SelectedItemText;forced-color-adjust:none;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#f3f2f1;color:#505a5f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1rem;font-weight:400}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1.1875rem;line-height:1.3157894737}}.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1rem;line-height:1.25}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-family:sans-serif}}@media (min-width:40.0625em){.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-size:1.1875rem;line-height:1.3157894737}}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-size:14pt;line-height:1.15}}.govuk-form-group--error div:has(+.govuk-select--error[data-module=hmrc-accessible-autocomplete])>.autocomplete__wrapper .autocomplete__input{border-color:#d4351c}.autocomplete__dropdown-arrow-down{z-index:0;pointer-events:none}
+/*# sourceMappingURL=maps/accessible-autocomplete-6.50.0.css.map */

package/hmrc/{accessible-autocomplete-6.47.0.js → accessible-autocomplete-6.50.0.js}

@@ -2851,18 +2851,30 @@
 	}
 	AccessibleAutoComplete.prototype.init = function init() {
 	  if (this.$module) {
-	    var showAllValues = this.$module.getAttribute('data-show-all-values') === 'true';
-	    var autoselect = this.$module.getAttribute('data-auto-select') === 'true';
-	    var defaultValue = this.$module.getAttribute('data-default-value');
-	    var minLength = this.$module.getAttribute('data-min-length');
+	    var selectElement = this.$module;
+	    var selectOptions = Array.from(selectElement.options);
+	    var autocompleteId = selectElement.id;
+	    var showAllValues = selectElement.getAttribute('data-show-all-values') === 'true';
+	    var autoselect = selectElement.getAttribute('data-auto-select') === 'true';
+	    var defaultValue = selectElement.getAttribute('data-default-value');
+	    var minLength = selectElement.getAttribute('data-min-length');
 	    var configurationOptions = {
-	      selectElement: this.$module,
+	      selectElement: selectElement,
 	      showAllValues: showAllValues,
 	      autoselect: autoselect,
 	      defaultValue: defaultValue,
-	      minLength: minLength
+	      minLength: minLength,
+	      onConfirm: function onConfirm(chosenOption) {
+	        var _document$getElementB;
+	        selectElement.value = '';
+	        var chosenOptionOrCurrentValue = typeof chosenOption !== 'undefined' ? chosenOption : (_document$getElementB = document.getElementById(autocompleteId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.value;
+	        var selectedOption = [].filter.call(selectOptions, function (option) {
+	          return (option.textContent || option.innerText) === chosenOptionOrCurrentValue;
+	        })[0];
+	        if (selectedOption) selectedOption.selected = true;
+	      }
 	    };
-	    var language = this.$module.getAttribute('data-language') || 'en';
+	    var language = selectElement.getAttribute('data-language') || 'en';
 	    if (language === 'cy') {
 	      configurationOptions.tAssistiveHint = function () {
 	        return 'Pan fydd canlyniadau awtogwblhau ar gael, defnyddiwch y saethau i fyny ac i lawr i’w hadolygu a phwyswch y fysell ’enter’ i’w dewis.' + ' Gall defnyddwyr dyfeisiau cyffwrdd, archwilio drwy gyffwrdd â’r sgrin neu drwy sweipio.';
@@ -2885,6 +2897,22 @@
 	      };
 	    }
 	    window.HMRCAccessibleAutocomplete.enhanceSelectElement(configurationOptions);
+	    var selectElementAriaDescribedBy = selectElement.getAttribute('aria-describedby') || '';
+	    var autocompleteElement = document.getElementById(autocompleteId);
+	    var autocompleteElementAriaDescribedBy = autocompleteElement && autocompleteElement.getAttribute('aria-describedby') || '';
+	    var autocompleteElementMissingAriaDescribedAttrs = autocompleteElement && autocompleteElement.tagName !== 'select' && !autocompleteElementAriaDescribedBy.includes(selectElementAriaDescribedBy);
+	    if (autocompleteElementMissingAriaDescribedAttrs) {
+	      // if there is a hint and/or error then the autocomplete element
+	      // needs to be aria-describedby these, which it isn't be default
+	      // we need to check if it hasn't already been done to avoid
+	      autocompleteElement.setAttribute('aria-describedby', "".concat(selectElementAriaDescribedBy, " ").concat(autocompleteElementAriaDescribedBy));
+	      // and in case page is still using adam's patch, this should stop
+	      // the select elements aria described by being added to the
+	      // autocomplete element twice when that runs (though unsure if a
+	      // screen reader would actually announce the elements twice if same
+	      // element was listed twice in the aria-describedby attribute)
+	      selectElement.setAttribute('aria-describedby', '');
+	    }
 	  }
 	};
 

package/hmrc/accessible-autocomplete.scss

@@ -11,3 +11,17 @@ $govuk-include-default-font-face: false;
 .autocomplete__hint {
   @include govuk-font($size: 19);
 }
+
+// the following makes the autocomplete inherit error styles
+// it won't work in IE11 but selects won't be enhanced into autocompletes in IE11
+
+.govuk-form-group--error div:has(+ .govuk-select--error[data-module='hmrc-accessible-autocomplete']) > .autocomplete__wrapper .autocomplete__input {
+  border-color: #d4351c;
+}
+
+// the following makes the dropdown arrow appear when showing all values
+
+.autocomplete__dropdown-arrow-down {
+  z-index: 0;
+  pointer-events: none;
+}

package/hmrc/all.js

@@ -489,12 +489,6 @@
         }
       });
     };
-    var wrapLink = function wrapLink($elem) {
-      var $wrapper = document.createElement('div');
-      $wrapper.classList.add('hmrc-timeout-dialog__link-wrapper');
-      $wrapper.appendChild($elem);
-      return $wrapper;
-    };
     var setupDialog = function setupDialog(signoutTime) {
       var $element = utils.generateDomElementFromString('<div>');
       if (settings.title) {
@@ -511,17 +505,20 @@
         $visualMessge.appendChild(document.createTextNode(" ".concat(settings.messageSuffix)));
       }
       var $staySignedInButton = utils.generateDomElementFromStringAndAppendText('<button id="hmrc-timeout-keep-signin-btn" class="govuk-button">', settings.keepAliveButtonText);
+      var $wrapper = document.createElement('div');
+      $wrapper.classList.add('govuk-button-group');
+      $wrapper.appendChild($staySignedInButton);
       $element.appendChild($visualMessge);
       $element.appendChild($audibleMessage);
-      $element.appendChild($staySignedInButton);
       $staySignedInButton.addEventListener('click', keepAliveAndClose);
       $element.appendChild(document.createTextNode(' '));
       if (!settings.hideSignOutButton) {
         var $signOutButton = utils.generateDomElementFromStringAndAppendText('<a id="hmrc-timeout-sign-out-link" class="govuk-link hmrc-timeout-dialog__link">', settings.signOutButtonText);
         $signOutButton.addEventListener('click', signOut);
         $signOutButton.setAttribute('href', settings.signOutUrl);
-        $element.appendChild(wrapLink($signOutButton));
+        $wrapper.appendChild($signOutButton);
       }
+      $element.appendChild($wrapper);
       var dialogControl = dialog.displayDialog($element);
       cleanupFunctions.push(function () {
         dialogControl.closeDialog();

package/hmrc/components/accessible-autocomplete/__tests__/2024-12-adams-polyfill.js.txt

@@ -0,0 +1,119 @@
+// Copied from https://gist.github.com/adamliptrot-oc/f7cbb92f040082cc17cff27416ae348b
+// Not intended for use by teams, fixes for the following are now built into hmrc-frontend
+// This is included here for use during automated testing to check that our fixes don't
+// conflict with the polyfill if teams are still using it when they upgrade to a new version
+// of hmrc-frontend which has the fixes built in.
+// ---------------------------
+
+// Note - updated to work with the HMRC Frontend implementation
+// https://github.com/hmrc/play-frontend-hmrc#adding-accessible-autocomplete-css-and-javascript
+
+if (typeof HMRCAccessibleAutocomplete != 'undefined' && document.querySelector('[data-module="hmrc-accessible-autocomplete"]') != null) {
+    var originalSelect = document.querySelector('[data-module="hmrc-accessible-autocomplete"]');
+    // load autocomplete - now handled by the HMRC component wrapper in Twirl
+    // accessibleAutocomplete.enhanceSelectElement({
+    //     selectElement: originalSelect,
+    //     showAllValues: true
+    // });
+
+    // =====================================================
+    // Polyfill autocomplete once loaded
+    // =====================================================
+    var checkForLoad = setInterval(checkForAutocompleteLoad, 50);
+    var parentForm = upTo(originalSelect, 'form');
+
+    function polyfillAutocomplete(){
+        var combo = parentForm.querySelector('[role="combobox"]');
+
+        // =====================================================
+        // Update autocomplete once loaded with fallback's aria attributes
+        // Ensures hint and error are read out before usage instructions
+        // =====================================================
+        if(originalSelect && originalSelect.getAttribute('aria-describedby') > ""){
+            if(parentForm){
+                if(combo){
+                    combo.setAttribute('aria-describedby', originalSelect.getAttribute('aria-describedby') + ' ' + combo.getAttribute('aria-describedby'));
+                }
+            }
+        }
+        // =====================================================
+        // Update autocomplete once loaded with error styling if needed
+        // This won't work if the autocomplete css is loaded after the frontend library css because
+        // the autocomplete's border will override the error class's border (they are both the same specificity)
+        // but we can use the class assigned to build a more specific rule
+        // =====================================================
+        setErrorClass();
+        function setErrorClass(){
+            if(originalSelect && originalSelect.classList.contains("govuk-select--error")){
+                if(parentForm){
+                    if(combo){
+                        combo.classList.add("govuk-input--error");
+                        // Also set up an event listener to check for changes to input so we know when to repeat the copy
+                        combo.addEventListener('focus', function(){setErrorClass()});
+                        combo.addEventListener('blur', function(){setErrorClass()});
+                        combo.addEventListener('change', function(){setErrorClass()});
+                    }
+                }
+            }
+        }
+
+        // =====================================================
+        // Ensure when user replaces valid answer with a non-valid answer, then valid answer is not retained
+        // =====================================================
+        var holdSubmit = true;
+        parentForm.addEventListener('submit', function(e){
+            if(holdSubmit){
+                e.preventDefault()
+                if(originalSelect.querySelectorAll('[selected]').length > 0 || originalSelect.value > ""){
+
+                    var resetSelect = false;
+
+                    if(originalSelect.value){
+                        if(combo.value != originalSelect.querySelector('option[value="' + originalSelect.value +'"]').text){
+                            resetSelect = true;
+                        }
+                    }
+                    if(resetSelect){
+                        originalSelect.value = "";
+                        if(originalSelect.querySelectorAll('[selected]').length > 0){
+                            originalSelect.querySelectorAll('[selected]')[0].removeAttribute('selected');
+                        }
+                    }
+                }
+
+                holdSubmit = false;
+                //parentForm.submit();
+                HTMLFormElement.prototype.submit.call(parentForm); // because submit buttons have id of "submit" which masks the form's natural form.submit() function
+            }
+        })
+
+    }
+    function checkForAutocompleteLoad(){
+        if(parentForm.querySelector('[role="combobox"]')){
+            clearInterval(checkForLoad)
+            polyfillAutocomplete();
+        }
+    }
+
+
+}
+
+
+// Find first ancestor of el with tagName
+// or undefined if not found
+function upTo(el, tagName) {
+    tagName = tagName.toLowerCase();
+
+    while (el && el.parentNode) {
+      el = el.parentNode;
+      if (el.tagName && el.tagName.toLowerCase() == tagName) {
+        return el;
+      }
+    }
+
+    // Many DOM methods return null if they don't
+    // find the element they are searching for
+    // It would be OK to omit the following and just
+    // return undefined
+    return null;
+  }

package/hmrc/components/accessible-autocomplete/accessible-autocomplete.js

@@ -6,20 +6,34 @@ function AccessibleAutoComplete($module, window, document) {
 
 AccessibleAutoComplete.prototype.init = function init() {
   if (this.$module) {
-    const showAllValues = (this.$module.getAttribute('data-show-all-values') === 'true');
-    const autoselect = (this.$module.getAttribute('data-auto-select') === 'true');
-    const defaultValue = this.$module.getAttribute('data-default-value');
-    const minLength = this.$module.getAttribute('data-min-length');
+    const selectElement = this.$module;
+    const selectOptions = Array.from(selectElement.options);
+    const autocompleteId = selectElement.id;
+    const showAllValues = (selectElement.getAttribute('data-show-all-values') === 'true');
+    const autoselect = (selectElement.getAttribute('data-auto-select') === 'true');
+    const defaultValue = selectElement.getAttribute('data-default-value');
+    const minLength = selectElement.getAttribute('data-min-length');
 
     const configurationOptions = {
-      selectElement: this.$module,
+      selectElement,
       showAllValues,
       autoselect,
       defaultValue,
       minLength,
+      onConfirm: (chosenOption) => {
+        selectElement.value = '';
+        const chosenOptionOrCurrentValue = (typeof chosenOption !== 'undefined')
+          ? chosenOption
+          : document.getElementById(autocompleteId)?.value;
+        const selectedOption = [].filter.call(
+          selectOptions,
+          (option) => (option.textContent || option.innerText) === chosenOptionOrCurrentValue,
+        )[0];
+        if (selectedOption) selectedOption.selected = true;
+      },
     };
 
-    const language = this.$module.getAttribute('data-language') || 'en';
+    const language = selectElement.getAttribute('data-language') || 'en';
 
     if (language === 'cy') {
       configurationOptions.tAssistiveHint = () => 'Pan fydd canlyniadau awtogwblhau ar gael, defnyddiwch y saethau i fyny ac i lawr i’w hadolygu a phwyswch y fysell ’enter’ i’w dewis.'
@@ -35,6 +49,30 @@ AccessibleAutoComplete.prototype.init = function init() {
     }
 
     window.HMRCAccessibleAutocomplete.enhanceSelectElement(configurationOptions);
+
+    const selectElementAriaDescribedBy = selectElement.getAttribute('aria-describedby') || '';
+    const autocompleteElement = document.getElementById(autocompleteId);
+    const autocompleteElementAriaDescribedBy = (autocompleteElement && autocompleteElement.getAttribute('aria-describedby')) || '';
+    const autocompleteElementMissingAriaDescribedAttrs = (
+      autocompleteElement
+      && autocompleteElement.tagName !== 'select'
+      && !autocompleteElementAriaDescribedBy.includes(selectElementAriaDescribedBy)
+    );
+    if (autocompleteElementMissingAriaDescribedAttrs) {
+      // if there is a hint and/or error then the autocomplete element
+      // needs to be aria-describedby these, which it isn't be default
+      // we need to check if it hasn't already been done to avoid
+      autocompleteElement.setAttribute(
+        'aria-describedby',
+        `${selectElementAriaDescribedBy} ${autocompleteElementAriaDescribedBy}`,
+      );
+      // and in case page is still using adam's patch, this should stop
+      // the select elements aria described by being added to the
+      // autocomplete element twice when that runs (though unsure if a
+      // screen reader would actually announce the elements twice if same
+      // element was listed twice in the aria-describedby attribute)
+      selectElement.setAttribute('aria-describedby', '');
+    }
   }
 };
 

package/hmrc/components/timeout-dialog/_timeout-dialog.scss

@@ -40,6 +40,10 @@ html {
   @include govuk-media-query($from: tablet) {
     width: 435px;
   }
+
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+  }
 }
 
 .hmrc-timeout-dialog__message {
@@ -54,25 +58,13 @@ html {
   white-space: nowrap;
 }
 
-.hmrc-timeout-dialog__link-wrapper {
-  @include govuk-media-query($from: tablet) {
-    display: inline-block;
-    line-height: 2.5em;
-    vertical-align: baseline;
-  }
-}
-
 .hmrc-timeout-dialog__link {
   @include govuk-font($size: 24);
 
-  display: inline-block;
-
   @include govuk-media-query($from: tablet) {
     @include govuk-font($size: 19);
 
-    position: relative;
-    top: 2px;
-    padding: 0.526315em 0.789473em 0.263157em;
-    line-height: 1.5;
+    // Same padding as govuk-button
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($govuk-border-width-form-element / 2));
   }
 }

package/hmrc/components/timeout-dialog/timeout-dialog.js

@@ -141,14 +141,6 @@ function TimeoutDialog($module, $sessionActivityService) {
     });
   };
 
-  const wrapLink = ($elem) => {
-    const $wrapper = document.createElement('div');
-    $wrapper.classList.add('hmrc-timeout-dialog__link-wrapper');
-    $wrapper.appendChild($elem);
-
-    return $wrapper;
-  };
-
   const setupDialog = (signoutTime) => {
     const $element = utils.generateDomElementFromString('<div>');
 
@@ -181,9 +173,12 @@ function TimeoutDialog($module, $sessionActivityService) {
       settings.keepAliveButtonText,
     );
 
+    const $wrapper = document.createElement('div');
+    $wrapper.classList.add('govuk-button-group');
+    $wrapper.appendChild($staySignedInButton);
+
     $element.appendChild($visualMessge);
     $element.appendChild($audibleMessage);
-    $element.appendChild($staySignedInButton);
     $staySignedInButton.addEventListener('click', keepAliveAndClose);
     $element.appendChild(document.createTextNode(' '));
 
@@ -195,9 +190,11 @@ function TimeoutDialog($module, $sessionActivityService) {
       $signOutButton.addEventListener('click', signOut);
       $signOutButton.setAttribute('href', settings.signOutUrl);
 
-      $element.appendChild(wrapLink($signOutButton));
+      $wrapper.appendChild($signOutButton);
     }
 
+    $element.appendChild($wrapper);
+
     const dialogControl = dialog.displayDialog($element);
 
     cleanupFunctions.push(() => {