From dafa5d2ef6d2681bba623097ca2725c439737428 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Fri, 6 Aug 2021 15:33:52 +0200
Subject: [PATCH] Numberrange view: Various minor improvements (#10452)

---
 .../views/prevalueeditors/numberrange.html    | 53 ++++++++++++-------
 .../views/prevalueeditors/numberrange.less    |  9 +---
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  1 +
 .../Umbraco/config/lang/en_us.xml             |  1 +
 5 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.html
index 6e67c94793..2d223ed40a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.html
@@ -1,25 +1,38 @@
 <div class="umb-property-editor umb-prevalues-numberrange">
-    <ng-form name="prevalueNumberRangeForm">
-        <input name="numberFieldMin" class="__min-input"
-               type="number"
-               ng-model="model.value.min"
-               placeholder="0"
-               min="0"
-               ng-max="model.value.max"
-               fix-number />
+    <ng-form name="prevalueNumberRangeForm" class="flex">
+        <div>
+            <input name="numberFieldMin" class="__min-input"
+            type="number"
+            ng-model="model.value.min"
+            placeholder="0"
+            min="0"
+            ng-max="model.value.max"
+            fix-number
+            id="{{model.alias}}" />
+            <span ng-messages="prevalueNumberRangeForm.numberFieldMin.$error" show-validation-on-submit >
+                <span class="db mt1 red" ng-message="number" aria-describedby="{{model.alias}}">
+                    <localize key="validation_invalidNumber">Not a number</localize>
+                </span>
+            </span>
+        </div>
         <span class="__enDash">–</span>
-        <input name="numberFieldMax" class="__max-input"
-               type="number"
-               ng-model="model.value.max"
-               placeholder="∞"
-               ng-min="model.value.min || 0"
-               fix-number />
+        <div>
+            <label for="validationLimitMax" class="sr-only">
+                <localize key="maxAmount">Maximum amount</localize>
+            </label>
+            <input name="numberFieldMax" class="__max-input"
+                   type="number"
+                   ng-model="model.value.max"
+                   placeholder="∞"
+                   ng-min="model.value.min || 0"
+                   fix-number
+                   id="validationLimitMax" />
 
-        <span ng-messages="prevalueNumberRangeForm.numberFieldMin.$error" show-validation-on-submit >
-            <span class="help-inline" ng-message="number">Not a number</span>
-        </span>
-        <span ng-messages="prevalueNumberRangeForm.numberFieldMax.$error" show-validation-on-submit >
-            <span class="help-inline" ng-message="number">Not a number</span>
-        </span>
+            <span ng-messages="prevalueNumberRangeForm.numberFieldMax.$error" show-validation-on-submit >
+                <span class="db mt1 red" ng-message="number" aria-describedby="amountMax">
+                    <localize key="validation_invalidNumber">Not a number</localize>
+                </span>
+            </span>
+        </div>
     </ng-form>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.less b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.less
index e7ca2dd1cd..cc95b7cb8e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.less
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/numberrange.less
@@ -1,14 +1,7 @@
 .umb-prevalues-numberrange {
-
-    .__min-input {
-    }
-
     .__enDash {
         display: inline-block;
         vertical-align: middle;
-        margin-top: 5px;
-    }
-
-    .__max-input {
+        margin: 5px 2px 0;
     }
 }
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index d3a5be2ebf..7d64ce855f 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1912,6 +1912,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="contextMenuDescription">Udfør handling %0% på %1% noden</key>
     <key alias="addImageCaption">Tilføj billede overskrift</key>
     <key alias="searchContentTree">Søg i indholdstræet</key>
+    <key alias="maxAmount">Maximum antal</key>
   </area>
   <area alias="references">
     <key alias="tabName">Referencer</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index e05f786f13..93c1e9a39d 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2310,6 +2310,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
     <key alias="addImageCaption">Add image caption</key>
     <key alias="searchContentTree">Search content tree</key>
+    <key alias="maxAmount">Maximum amount</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index c74f7ef0de..bcf91812c7 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2329,6 +2329,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
     <key alias="addImageCaption">Add image caption</key>
     <key alias="searchContentTree">Search content tree</key>
+    <key alias="maxAmount">Maximum amount</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>