Improved accessibility of link picker (#10099)
* 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 * Added control ids for the link picker * Add French translation
This commit is contained in:
Rachel Breeze
@@ -15,6 +15,7 @@ function treeSearchBox(localizationService, searchService, $q) {
|
||||
datatypeKey: "@",
|
||||
hideSearchCallback: "=",
|
||||
searchCallback: "=",
|
||||
inputId: "@",
|
||||
autoFocus: "="
|
||||
},
|
||||
restrict: "E", // restrict to an element
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}}"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user