From 20fd5acae68684a92d035d249cb1cd7c025cc931 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Thu, 17 Oct 2019 17:32:19 +0200
Subject: [PATCH] v8: Extend the umb-checkbox component to handle localization
 (#5635)

---
 .../components/forms/umbcheckbox.directive.js | 22 +++++++++---
 .../src/less/components/umb-list.less         |  4 +++
 .../src/less/properties.less                  |  4 +++
 .../views/components/forms/umb-checkbox.html  |  1 +
 .../src/views/content/overlays/publish.html   | 14 ++++----
 .../content/overlays/publishdescendants.html  | 34 ++++++++-----------
 .../src/views/content/overlays/save.html      | 14 ++++----
 .../src/views/content/overlays/schedule.html  | 14 ++++----
 .../views/content/overlays/sendtopublish.html | 26 +++++++-------
 .../src/views/content/overlays/unpublish.html | 18 +++++-----
 .../src/views/packages/edit.html              | 16 ---------
 .../listview/overlays/listviewpublish.html    | 23 ++++++-------
 .../listview/overlays/listviewunpublish.html  | 17 ++++------
 13 files changed, 97 insertions(+), 110 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index 8560b5a3ea..0f3d251e82 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -26,6 +26,7 @@
 @param {string} value Set the value of the checkbox.
 @param {string} name Set the name of the checkbox.
 @param {string} text Set the text for the checkbox label.
+@param {string} labelKey Set a dictinary/localization string for the checkbox label
 @param {string} serverValidationField Set the <code>val-server-field</code> of the checkbox.
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
@@ -35,13 +36,25 @@
 
 (function () {
     'use strict';
-    
-    function UmbCheckboxController($timeout) {
-        
+
+    function UmbCheckboxController($timeout, localizationService) {
+
         var vm = this;
 
+        vm.$onInit = onInit;
         vm.change = change;
 
+        function onInit() {
+            // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
+            if (vm.labelKey) {
+                 localizationService.localize(vm.labelKey).then(function (data) {
+                      if(data.indexOf('[') === -1){
+                        vm.text = data;
+                      }
+                 });
+            }
+        }
+
         function change() {
             if (vm.onChange) {
                 $timeout(function () {
@@ -50,7 +63,7 @@
             }
         }
     }
-    
+
     var component = {
         templateUrl: 'views/components/forms/umb-checkbox.html',
         controller: UmbCheckboxController,
@@ -61,6 +74,7 @@
             value: "@",
             name: "@",
             text: "@",
+            labelKey: "@?",
             serverValidationField: "@",
             disabled: "<",
             required: "<",
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less
index 12d7085b0a..94cfa6f62c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less
@@ -36,6 +36,10 @@ a.umb-list-item:focus {
     color: @gray-4;
 }
 
+.umb-list-item__description--checkbox{
+    margin: 0 0 0 26px;
+}
+
 .umb-list-checkbox {
     position: absolute;
     opacity: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/properties.less b/src/Umbraco.Web.UI.Client/src/less/properties.less
index e14bb5c0d6..152ea49bbd 100644
--- a/src/Umbraco.Web.UI.Client/src/less/properties.less
+++ b/src/Umbraco.Web.UI.Client/src/less/properties.less
@@ -48,6 +48,10 @@
     flex-direction: row;
 }
 
+.date-wrapper-mini--checkbox{
+    margin: 0 0 0 26px;
+}
+
 .date-wrapper-mini__date {
     display: flex;
     
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index fd3b451e90..c35c600ce1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -15,5 +15,6 @@
             <i class="umb-form-check__icon icon-check"></i>
         </span>
     </span>
+
     <span class="umb-form-check__text">{{vm.text}}</span>
 </label>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
index d4a3bdd2a0..9e3499db6f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
@@ -13,32 +13,30 @@
         <div class="umb-list-item"
              ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
             <ng-form name="publishVariantSelectorForm">
-                <div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
+                <div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
 
                     <umb-checkbox input-id="{{variant.htmlId}}"
                                   name="publishVariantSelector"
                                   model="variant.publish"
                                   on-change="vm.changeSelection(variant)"
                                   disabled="(variant.canPublish === false)"
-                                  server-validation-field="{{variant.htmlId}}" />
+                                  server-validation-field="{{variant.htmlId}}" 
+                                  text="{{ variant.language.name }}"
+                    />
                     <div>
-                        <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
-                            <span>{{ variant.language.name }}</span>
                             <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
 
-                            <span class="db umb-list-item__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
+                            <span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
                                 <span ng-if="variant.language.isMandatory"> - </span>
                                 <span ng-if="variant.language.isMandatory" ng-class="{'text-error': (variant.language.isMandatory && variant.willPublish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
                             </span>
 
                             <span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
-                                <span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
+                                <span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
                             </span>
 
                             <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
-
-                        </label>
                     </div>
                 </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
index 5002007e20..7256fefbf7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
@@ -6,12 +6,11 @@
         </div>
 
         <div class="flex mb3">
-
-            <umb-checkbox input-id="includeUnpublishedSelector" model="model.includeUnpublished" />
-
-            <label for="includeUnpublishedSelector">
-                <localize key="content_includeUnpublished"></localize>
-            </label>
+            <umb-checkbox
+                model="model.includeUnpublished"
+                text="Include drafts: also publish unpublished content items."
+                label-key="content_includeUnpublished"
+            />
         </div>
 
     </div>
@@ -23,12 +22,11 @@
         </div>
 
         <div class="flex mb3">
-
-            <umb-checkbox input-id="includeUnpublishedSelector" model="model.includeUnpublished" />
-
-            <label for="includeUnpublishedSelector">
-                <localize key="content_includeUnpublished"></localize>
-            </label>
+            <umb-checkbox
+                model="model.includeUnpublished"
+                text="Include drafts: also publish unpublished content items."
+                label-key="content_includeUnpublished"
+            />
         </div>
 
         <div class="bold mb1">
@@ -39,17 +37,17 @@
 
             <div class="umb-list-item umb-list--condensed" ng-repeat="variant in vm.variants">
                 <ng-form name="publishVariantSelectorForm">
-                    <div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
+                    <div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
 
                         <umb-checkbox
-                            input-id="{{variant.htmlId}}"
                             name="publishVariantSelector"
                             model="variant.publish"
                             on-change="vm.changeSelection(variant)"
-                            server-validation-field="{{variant.htmlId}}"/>
+                            server-validation-field="{{variant.htmlId}}"
+                            text="{{variant.language.name}}"/>
 
                         <div>
-                            <label for="{{variant.htmlId}}" class="mb0">
+                            <span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <span>{{variant.language.name}}</span>
 
                                 <span class="db umb-list-item__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
@@ -58,12 +56,10 @@
                                 </span>
 
                                 <span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
-                                    <span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
+                                    <span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
                                 </span>
 
                                 <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
-
-                            </label>
                         </div>
                     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
index 4ca52ffc85..ef135b7b48 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
@@ -17,31 +17,29 @@
             <div class="umb-list-item"
                  ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
                 <ng-form name="saveVariantSelectorForm">
-                    <div class="flex" ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
+                    <div ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
 
                         <umb-checkbox
                             input-id="{{variant.htmlId}}"
                             name="saveVariantSelector"
                             model="variant.save"
                             on-change="vm.changeSelection(variant)"
-                            server-validation-field="{{variant.htmlId}}"/>
+                            server-validation-field="{{variant.htmlId}}"
+                            text="{{variant.language.name}}"
+                        />
 
                         <div>
-                            <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
-                                <span>{{ variant.language.name }}</span>
                                 <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
 
                                 <span class="db" ng-if="!saveVariantSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
-                                    <umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
+                                    <umb-variant-state class="umb-list-item__description umb-list-item__description--checkbox" variant="variant"></umb-variant-state>
                                 </span>
 
                                 <span class="db" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
-                                    <span class="db umb-list-item__description text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
+                                    <span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
                                 </span>
 
                                 <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
-
-                            </label>
                         </div>
                     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
index 4b0bd55e49..4f4e3c2874 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
@@ -86,27 +86,25 @@
 
             <div class="umb-list-item" ng-repeat="variant in vm.variants">
                 <ng-form name="scheduleSelectorForm" style="width:100%;">
-                    <div class="flex" ng-class="{'umb-list-item--error': scheduleSelectorForm.saveVariantReleaseDate.$invalid}">
+                    <div ng-class="{'umb-list-item--error': scheduleSelectorForm.saveVariantReleaseDate.$invalid}">
 
                         <umb-checkbox
                             input-id="{{'saveVariantSelector_' + variant.language.culture}}"
                             name="saveVariantSelector"
                             model="variant.save"
-                            on-change="vm.changeSelection(variant)"/>
+                            on-change="vm.changeSelection(variant)"
+                            text="{{variant.language.name}}"
+                        />
 
                         <div>
 
-                            <label for="{{'saveVariantSelector_' + variant.language.culture}}" style="margin-bottom: 2px;">
-                                <span>{{ variant.language.name }}</span>
-
-                                <span class="db umb-list-item__description"
+                                <span class="db umb-list-item__description umb-list-item__description--checkbox"
                                       ng-if="!scheduleSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                     <umb-variant-state variant="variant"></umb-variant-state>
                                     <span ng-show="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
                                 </span>
-                            </label>
 
-                            <div class="date-wrapper-mini">
+                            <div class="date-wrapper-mini date-wrapper-mini--checkbox">
                                 <div class="date-wrapper-mini__date" ng-if="vm.dirtyVariantFilter(variant) && (variant.releaseDate || variant.save)">
 
                                     <div style="font-size: 13px; margin-right: 5px;">Publish:<em ng-show="!variant.save">&nbsp;&nbsp;{{variant.releaseDateFormatted}}</em></div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
index 55e2121d28..ee20680089 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
@@ -12,31 +12,29 @@
 
         <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.modifiedVariantFilter">
             <ng-form name="publishVariantSelectorForm">
-                <div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
+                <div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
 
                     <umb-checkbox
                         input-id="{{variant.htmlId}}"
                         name="publishVariantSelector"
                         model="variant.save"
                         on-change="vm.changeSelection(variant)"
-                        server-validation-field="{{variant.htmlId}}"/>
+                        server-validation-field="{{variant.htmlId}}"
+                        text="{{ variant.language.name }}"
+                    />
 
                     <div>
-                        <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
-                            <span>{{ variant.language.name }}</span>
-                            <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
+                        <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
 
-                            <span class="db" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
-                                <umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
-                            </span>
+                        <span class="db" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
+                            <umb-variant-state class="umb-list-item__description umb-list-item__description--checkbox" variant="variant"></umb-variant-state>
+                        </span>
 
-                            <span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
-                                <span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
-                            </span>
+                        <span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
+                            <span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
+                        </span>
 
-                            <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
-
-                        </label>
+                        <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
                     </div>
                 </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
index 32b1d38841..e384823cc3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
@@ -15,7 +15,7 @@
     
             <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.publishedVariantFilter">
                 <ng-form name="unpublishVariantSelectorForm">
-                    <div class="flex">
+                    <div>
 
                         <umb-checkbox
                             input-id="{{variant.htmlId}}"
@@ -23,17 +23,15 @@
                             model="variant.save"
                             on-change="vm.changeSelection(variant)"
                             disabled="variant.disabled"
-                            server-validation-field="{{variant.htmlId}}"/>
+                            server-validation-field="{{variant.htmlId}}"
+                            text="{{ variant.language.name }}"
+                        />
 
                         <div>
-                            <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
-                                <span>{{ variant.language.name }}</span>
-
-                                <span class="db umb-list-item__description">
-                                    <umb-variant-state variant="variant"></umb-variant-state>
-                                    <span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
-                                </span>
-                            </label>    
+                            <span class="db umb-list-item__description umb-list-item__description--checkbox">
+                                <umb-variant-state variant="variant"></umb-variant-state>
+                                <span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                            </span>
                         </div>
                     </div>
     
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
index 53a8e58b58..9f91e1d0f7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
@@ -131,80 +131,64 @@
                                 <localize key="general_add">Add</localize>
                             </a>
 
-                            <label style="padding-left: 0;">
                                 <umb-checkbox model="vm.package.contentLoadChildNodes"
                                                 disabled="!vm.package.contentNodeId"
                                                 text="{{vm.labels.includeAllChildNodes}}" />
-                            </label>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_documentTypes">
                             <div ng-repeat="doctype in ::vm.documentTypes | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="doctype.selected"
                                                   on-change="vm.selectDocumentType(doctype)"
                                                   text="{{doctype.name}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_templates">
                             <div ng-repeat="template in ::vm.templates | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="template.selected"
                                                   on-change="vm.selectTemplate(template)"
                                                   text="{{template.name}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_stylesheets">
                             <div ng-repeat="stylesheet in ::vm.stylesheets | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="stylesheet.selected"
                                                   on-change="vm.selectStyleSheet(stylesheet)"
                                                   text="{{stylesheet.path}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_macros">
                             <div ng-repeat="macro in ::vm.macros | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="macro.selected"
                                                   on-change="vm.selectMacro(macro)"
                                                   text="{{macro.name}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_languages">
                             <div ng-repeat="language in ::vm.languages | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="language.selected"
                                                   on-change="vm.selectLanguage(language)"
                                                   text="{{language.name}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_dictionary">
                             <div ng-repeat="dictionaryItem in ::vm.dictionaryItems | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="dictionaryItem.selected"
                                                   on-change="vm.selectDictionaryItem(dictionaryItem)"
                                                   text="{{dictionaryItem.name}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_dataTypes">
                             <div ng-repeat="dataType in ::vm.dataTypes | orderBy:'name'">
-                                <label>
                                     <umb-checkbox model="dataType.selected"
                                                   on-change="vm.selectDataType(dataType)"
                                                   text="{{dataType.name}}" />
-                                </label>
                             </div>
                         </umb-control-group>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewpublish.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewpublish.html
index abe1db73d2..88dfb45d4a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewpublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewpublish.html
@@ -4,11 +4,11 @@
         <div ng-if="!vm.languages">
             <p><localize key="prompt_confirmListViewPublish"></localize></p>
         </div>
-        
+
         <div ng-if="vm.loading" style="min-height: 50px; position: relative;">
                 <umb-load-indicator></umb-load-indicator>
         </div>
-        
+
         <!-- Multiple languages -->
         <div ng-if="vm.languages.length > 1 && !vm.loading">
 
@@ -26,20 +26,17 @@
                     <ng-form name="publishLanguageSelectorForm">
                         <div class="flex">
 
-                            <umb-checkbox input-id="publishLanguage_{{language.culture}}"
-                                          name="publishLanguageSelector"
+                            <umb-checkbox name="publishLanguageSelector"
                                           model="language.publish"
-                                          on-change="vm.changeSelection(language)" />
+                                          on-change="vm.changeSelection(language)"
+                                          text="{{language.name}}"
+                                           />
 
                             <div>
-                                <label for="publishLanguage_{{language.culture}}" class="mb0">
-                                    <span>{{language.name}}</span>
-
-                                    <span class="db umb-list-item__description">
-                                        <span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
-                                    </span>
-                                </label>
-                            </div>    
+                                <span class="db umb-list-item__description">
+                                    <span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
+                                </span>
+                            </div>
 
                         </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewunpublish.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewunpublish.html
index f59b351181..d7f33db58b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewunpublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/listviewunpublish.html
@@ -26,19 +26,16 @@
                     <ng-form name="unpublishLanguageSelectorForm">
                         <div class="flex">
 
-                            <umb-checkbox input-id="unpublishLanguage_{{language.culture}}"
-                                          name="unpublishLanguageSelector"
+                            <umb-checkbox name="unpublishLanguageSelector"
                                           model="language.unpublish"
-                                          on-change="vm.changeSelection(language)" />
+                                          on-change="vm.changeSelection(language)"
+                                          text="{{language.name}}"
+                                           />
 
                             <div>
-                                <label for="unpublishLanguage_{{language.culture}}" class="mb0">
-                                    <span>{{language.name}}</span>
-
-                                    <span class="db umb-list-item__description">
-                                        <span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
-                                    </span>
-                                </label>
+                                <span class="db umb-list-item__description">
+                                    <span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
+                                </span>
                             </div>
 
                         </div>