Improved accessibility of link picker

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

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html

@@ -16,81 +16,84 @@
 
                     <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"
                                     placeholder="@general_url"
                                     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>
                             </datalist>
                         </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>
 
                     <div class="umb-control-group">
                         <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>

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}}"

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>

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>

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>