From 0bade7d3e463ae2e1102e162e844bdadb46fd809 Mon Sep 17 00:00:00 2001
From: Rachel Breeze <rachel.breeze@sigma.se>
Date: Sun, 31 Jan 2021 12:43:05 +0000
Subject: [PATCH 1/3] Added support for screeen reader alerts on the embed so
 that assitive technology knows when a url retrieve has been succesfull. Added
 labels for the controls Preview reload only triggered if the values for
 height and width change

---
 .../infiniteeditors/embed/embed.controller.js | 38 +++++++++++++------
 .../common/infiniteeditors/embed/embed.html   | 17 +++++----
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
index c3d1312109ee..e29ba996c7c9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
@@ -18,8 +18,11 @@
             preview: "",
             success: false,
             info: "",
-            supportsDimensions: false
-        };
+            a11yInfo: "",
+            supportsDimensions: false,
+            originalWidth: 360,
+            originalHeight: 240
+   };
 
         if ($scope.model.modify) {
             Utilities.extend($scope.model.embed, $scope.model.modify);
@@ -32,8 +35,8 @@
         vm.changeSize = changeSize;
         vm.submit = submit;
         vm.close = close;
-
-        function onInit() {
+        
+       function onInit() {
             if (!$scope.model.title) {
                 localizationService.localize("general_embed").then(function(value){
                     $scope.model.title = value;
@@ -46,8 +49,8 @@
             if ($scope.model.embed.url) {
                 $scope.model.embed.show = true;
                 $scope.model.embed.info = "";
+                $scope.model.embed.a11yInfo = "";
                 $scope.model.embed.success = false;
-
                 vm.loading = true;
 
                 $http({
@@ -67,6 +70,7 @@
                             //not supported
                             $scope.model.embed.preview = "";
                             $scope.model.embed.info = "Not supported";
+                            $scope.model.embed.a11yInfo = $scope.model.embed.info;
                             $scope.model.embed.success = false;
                             $scope.model.embed.supportsDimensions = false;
                             vm.trustedPreview = null;
@@ -75,6 +79,7 @@
                             //error
                             $scope.model.embed.preview = "";
                             $scope.model.embed.info = "Could not embed media - please ensure the URL is valid";
+                            $scope.model.embed.a11yInfo = $scope.model.embed.info;
                             $scope.model.embed.success = false;
                             $scope.model.embed.supportsDimensions = false;
                             vm.trustedPreview = null;
@@ -83,6 +88,8 @@
                             $scope.model.embed.success = true;
                             $scope.model.embed.supportsDimensions = response.data.SupportsDimensions;
                             $scope.model.embed.preview = response.data.Markup;
+                            $scope.model.embed.info = "";
+                            $scope.model.embed.a11yInfo = "Retrieved URL";
                             vm.trustedPreview = $sce.trustAsHtml(response.data.Markup);
                             break;
                     }
@@ -94,24 +101,28 @@
                     $scope.model.embed.supportsDimensions = false;
                     $scope.model.embed.preview = "";
                     $scope.model.embed.info = "Could not embed media - please ensure the URL is valid";
-
+                    $scope.model.embed.a11yInfo = $scope.model.embed.info;
                     vm.loading = false;
                 });
             } else {
                 $scope.model.embed.supportsDimensions = false;
                 $scope.model.embed.preview = "";
                 $scope.model.embed.info = "Please enter a URL";
+                $scope.model.embed.a11yInfo = $scope.model.embed.info;
             }
         }
 
        function changeSize(type) {
 
-           var width, height;
+           var width = parseInt($scope.model.embed.width, 10);
+           var height = parseInt($scope.model.embed.height, 10);
+           var originalWidth = parseInt($scope.model.embed.originalWidth, 10);
+           var originalHeight = parseInt($scope.model.embed.originalHeight, 10);
+           var resize = originalWidth !== width || originalHeight !== height;
 
            if ($scope.model.embed.constrain) {
-               width = parseInt($scope.model.embed.width, 10);
-               height = parseInt($scope.model.embed.height, 10);
-               if (type == 'width') {
+
+               if (type === 'width') {
                    origHeight = Math.round((width / origWidth) * height);
                    $scope.model.embed.height = origHeight;
                } else {
@@ -119,9 +130,12 @@
                    $scope.model.embed.width = origWidth;
                }
            }
-           if ($scope.model.embed.url !== "") {
+           $scope.model.embed.originalWidth = $scope.model.embed.width;
+           $scope.model.embed.originalHeight = $scope.model.embed.height;
+           if ($scope.model.embed.url !== "" && resize) {
                showPreview();
            }
+
        }
 
        function toggleConstrain() {
@@ -138,7 +152,7 @@
             if ($scope.model && $scope.model.close) {
                 $scope.model.close();
             }
-        }
+       }
 
         onInit();
    }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
index 19cf9b227838..fd86f55c0727 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
@@ -15,7 +15,7 @@
                 <umb-box>
                     <umb-box-content>
 
-                        <umb-control-group label="@general_url">
+                        <umb-control-group label="@general_url" alias="url">
                             <input type="text" id="url" class="umb-property-editor input-block-level" ng-model="model.embed.url" ng-keyup="$event.keyCode == 13 ? vm.showPreview() : null" focus-when="{{true}}" required />
                             <umb-button
                                 type="button"
@@ -30,21 +30,22 @@
                         <div ng-if="!vm.loading">
 
                             <umb-control-group>
-                                <p ng-bind="model.embed.info"></p>
+                                <p ng-bind="model.embed.info" aria-hidden="true"></p>
+                                <p ng-bind="model.embed.a11yInfo" class="sr-only" role="alert"></p>
                                 <div ng-bind-html="vm.trustedPreview"></div>
                             </umb-control-group>
                             
                             <div ng-show="model.embed.supportsDimensions && model.embed.success">
-                                <umb-control-group label="@general_width">
-                                    <input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.width" ng-blur="vm.changeSize('width')" />
+                                <umb-control-group label="@general_width" alias="width">
+                                    <input type="number" id="width" pattern="[0-9]*" min="0" ng-model="model.embed.width" ng-blur="vm.changeSize('width')" />
                                 </umb-control-group>
                 
-                                <umb-control-group label="@general_height">
-                                    <input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.height" ng-blur="vm.changeSize('height')" />
+                                <umb-control-group label="@general_height" alias="height">
+                                    <input type="number" id="height" pattern="[0-9]*" min="0" ng-model="model.embed.height" ng-blur="vm.changeSize('height')" />
                                 </umb-control-group>
                 
-                                <umb-control-group label="@general_constrain">
-                                    <umb-toggle checked="model.embed.constrain" on-click="vm.toggleConstrain()"></umb-toggle>
+                                <umb-control-group label="@general_constrain" alias="constrain">
+                                    <umb-toggle checked="model.embed.constrain" id="constrain"  on-click="vm.toggleConstrain()"></umb-toggle>
                                 </umb-control-group>
                             </div>
 

From fdaa7d8eb4288565a56bdc0c047e8f6ce6a4c453 Mon Sep 17 00:00:00 2001
From: Rachel Breeze <rachel.breeze@sigma.se>
Date: Sun, 4 Apr 2021 15:50:45 +0100
Subject: [PATCH 2/3] Added control ids for the link picker

---
 .../tree/umbtreesearchbox.directive.js        |  1 +
 .../linkpicker/linkpicker.html                | 67 ++++++++++---------
 .../components/tree/umb-tree-search-box.html  |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  1 +
 .../Umbraco/config/lang/en_us.xml             |  1 +
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreesearchbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreesearchbox.directive.js
index 3e2e7e362ef3..2ae17fdc6b09 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreesearchbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreesearchbox.directive.js
@@ -15,6 +15,7 @@ function treeSearchBox(localizationService, searchService, $q) {
             datatypeKey: "@",
             hideSearchCallback: "=",
             searchCallback: "=",
+            inputId: "@",
             autoFocus: "="
         },
         restrict: "E",    // restrict to an element
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html
index 093e69b5ed52..0a2a8223e953 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html
@@ -16,7 +16,7 @@
 
                     <div ng-class="{'flex': showAnchor}">
 
-                        <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-linkpicker__url">
+                        <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-linkpicker__url" alias="urlLinkPicker">
                             <input type="text"
                                     style="margin-right: 10px;"
                                     localize="placeholder"
@@ -24,16 +24,18 @@
                                     class="umb-property-editor umb-textstring"
                                     ng-model="model.target.url"
                                     umb-auto-focus
-                                    ng-disabled="model.target.id || model.target.udi" />
+                                    ng-disabled="model.target.id || model.target.udi"
+                                    id="urlLinkPicker"/>
                         </umb-control-group>
 
-                        <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-linkpicker__anchor" ng-if="showAnchor">
+                        <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-linkpicker__anchor" ng-if="showAnchor" alias="anchor">
                             <input type="text"
                                     list="anchors"
                                     localize="placeholder"
                                     placeholder="@placeholders_anchor"
                                     class="umb-property-editor umb-textstring"
-                                    ng-model="model.target.anchor" />
+                                    ng-model="model.target.anchor"
+                                    id="anchor"/>
 
                             <datalist id="anchors">
                                 <option value="{{a}}" ng-repeat="a in anchorValues"></option>
@@ -41,19 +43,21 @@
                         </umb-control-group>
                     </div>
 
-                    <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
+                    <umb-control-group label="@defaultdialogs_nodeNameLinkPicker" alias="nodeNameLinkPicker">
                         <input type="text"
                                 localize="placeholder"
                                 placeholder="@placeholders_entername"
                                 class="umb-property-editor umb-textstring"
-                                ng-model="model.target.name" />
+                                ng-model="model.target.name"
+                                id="nodeNameLinkPicker"/>
                     </umb-control-group>
 
-                    <umb-control-group ng-if="showTarget" label="@content_target">
+                    <umb-control-group ng-if="showTarget" label="@content_target" alias="openInNewWindow">
                         <umb-checkbox
                                       model="vm.openInNewWindow"
                                       on-change="vm.toggleOpenInNewWindow(model, value)"
-                                      text="{{vm.labels.openInNewWindow}}">
+                                      text="{{vm.labels.openInNewWindow}}"
+                                      input-id="openInNewWindow">
                         </umb-checkbox>
                     </umb-control-group>
 
@@ -61,36 +65,35 @@
                         <h5><localize key="defaultdialogs_linkToPage">Link to page</localize></h5>
 
                         <div ng-hide="miniListView">
-                            <umb-tree-search-box
-                                hide-search-callback="hideSearch"
-                                search-callback="onSearchResults"
-                                search-from-id="{{searchInfo.searchFromId}}"
-                                search-from-name="{{searchInfo.searchFromName}}"
-                                datatype-key="{{searchInfo.dataTypeKey}}"
-                                show-search="{{searchInfo.showSearch}}"
-                                section="{{section}}">
+                            <label for="treeSearch" class="sr-only"><localize key="visuallyHiddenTexts_searchContentTree">Search content tree</localize></label>
+                            <umb-tree-search-box hide-search-callback="hideSearch"
+                                                 search-callback="onSearchResults"
+                                                 search-from-id="{{searchInfo.searchFromId}}"
+                                                 search-from-name="{{searchInfo.searchFromName}}"
+                                                 datatype-key="{{searchInfo.dataTypeKey}}"
+                                                 show-search="{{searchInfo.showSearch}}"
+                                                 section="{{section}}"
+                                                 input-id="treeSearch">
                             </umb-tree-search-box>
 
                             <br />
-
-                            <umb-tree-search-results
-                                ng-if="searchInfo.showSearch"
-                                results="searchInfo.results"
-                                select-result-callback="selectResult"
-                                empty-search-result-position="default">
+                            <umb-tree-search-results ng-if="searchInfo.showSearch"
+                                                     results="searchInfo.results"
+                                                     select-result-callback="selectResult"
+                                                     empty-search-result-position="default">
                             </umb-tree-search-results>
 
                             <div ng-hide="searchInfo.showSearch">
-                                <umb-tree
-                                    section="content"
-                                    hideheader="true"
-                                    hideoptions="true"
-                                    api="dialogTreeApi"
-                                    on-init="onTreeInit()"
-                                    enablelistviewexpand="true"
-                                    isdialog="true"
-                                    enablecheckboxes="true"
-                                    customtreeparams="{{customTreeParams}}">
+                                <umb-tree section="content"
+                                          hideheader="true"
+                                          hideoptions="true"
+                                          api="dialogTreeApi"
+                                          on-init="onTreeInit()"
+                                          enablelistviewexpand="true"
+                                          isdialog="true"
+                                          enablecheckboxes="true"
+                                          customtreeparams="{{customTreeParams}}"
+                                          id="treePicker">
                                 </umb-tree>
                             </div>
                         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html
index 77498cd00724..054472e4b65b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html
@@ -2,6 +2,7 @@
     <umb-icon icon="icon-search" class="icon icon-search" ng-if="showSearch == 'false'"></umb-icon>
     <button type="button" class="btn-reset icon icon-arrow-left" ng-if="showSearch == 'true'" localize="title" title="@general_back" ng-click="hideSearch()"></button>
     <input type="text"
+           id="{{inputId}}"
            ng-model="term"
            class="umb-search-field search-query -full-width-input"
            placeholder="{{searchPlaceholderText}}"
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 250040b331b0..6559b2565a27 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2316,6 +2316,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="contextMenuDescription">Select one of the options to edit the node.</key>
     <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>
   </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 5448436aabe6..2b7c3ec842c0 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2335,6 +2335,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="contextMenuDescription">Select one of the options to edit the node.</key>
     <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>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>

From 496cc1c456f556cb65775e4914938fd0f28a5e25 Mon Sep 17 00:00:00 2001
From: Michael <michael@crossingpaths.be>
Date: Tue, 6 Apr 2021 03:21:04 +0200
Subject: [PATCH 3/3] Add French translation

---
 src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
index 52e511a035af..8900272af754 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
@@ -2212,6 +2212,7 @@ Pour gérer votre site, ouvrez simplement le backoffice Umbraco et commencez à
     <key alias="newPartialView">Partial View</key>
     <key alias="newPartialViewMacro">Macro de Partial View</key>
     <key alias="newMember">Membre</key>
+    <key alias="searchContentTree">Chercher dans l'arborescence de contenu</key>
   </area>
   <area alias="references">
     <key alias="tabName">Références</key>