yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility: Alerts the user how many results have been returned on a tree search (#10100)

Browse Source 
* 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

* Tree search details the number of search items returned

* Add French translations
This commit is contained in:
Rachel Breeze
2021-04-06 02:50:14 +01:00
committed by GitHub
parent 739d9a8188
commit db6d572235
4 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
View File

@@ -1,30 +1,29 @@
<div>
<umb-empty-state ng-if="results.length === 0" position="{{emptySearchResultPosition}}">
<localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize>
</umb-empty-state>
<ul class="umb-tree">
<li class="root">
<ul class="umb-search-group">
<li class="umb-search-group-item" ng-repeat="result in results">
<div ng-class="{ 'umb-tree-node-checked': result.selected }">
<button type="button"
class="btn-reset umb-search-group-item-link"
ng-class="{ first: $first }"
ng-click="selectResultCallback($event, result)">
<span class="umb-search-group-item-name">
<umb-icon icon="{{result.selected ? 'icon-check' : result.icon}}"
class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check' : result.icon}}">
</umb-icon>
<span class="umb-search-group-item-name__text">{{ result.name }}</span>
</span>
<small class="search-subtitle" ng-if="result.subTitle">{{ result.subTitle }}</small>
</button>
</div>
<umb-empty-state ng-if="results.length === 0" position="{{emptySearchResultPosition}}">
<p role="alert"><localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize></p>
</umb-empty-state>
<p ng-if="results.length === 1" role="alert">1 <localize key="treeSearch_searchResult">item returned</localize></p>
<p ng-if="results.length > 1" role="alert">{{results.length}} <localize key="treeSearch_searchResults">items returned</localize></p>
<ul class="umb-tree">
<li class="root">
<ul class="umb-search-group">
<li class="umb-search-group-item" ng-repeat="result in results">
<div ng-class="{ 'umb-tree-node-checked': result.selected }">
<button type="button"
class="btn-reset umb-search-group-item-link"
ng-class="{ first: $first }"
ng-click="selectResultCallback($event, result)">
<span class="umb-search-group-item-name">
<umb-icon icon="{{result.selected ? 'icon-check' : result.icon}}" class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check' : result.icon}}"></umb-icon>
<span class="umb-search-group-item-name__text">{{ result.name }}</span>
</span>
<small class="search-subtitle" ng-if="result.subTitle">{{ result.subTitle }}</small>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</div>