Updated HTML markup to include additional alt-tags to assist screen readers.

This fixes #2040
This commit is contained in:
Kenneth Skovhede
2016-10-25 22:36:07 +02:00
parent 1dd71be782
commit 312a87477e
3 changed files with 14 additions and 14 deletions
@@ -1,12 +1,12 @@
<ul dx-start-with="treedata" class="tree-view">
<li ng-repeat="node in $dxPrior.children" ng-class="{hidden: node.invisible || (node.hidden &amp;&amp; !ngShowHidden)}">
<div ng-class="{selected: node.selected}">
<a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
<a class="check" ng-click="toggleCheck(node)" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}"></a>
<a class="type {{node.iconCls}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
<div ng-class="{selected: node.selected}" alt="{{node.selected ? 'selected' : 'not selected'}}>
<a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}" alt="{{node.expanded ? 'expanded' : 'contracted'}}"></a>
<a class="check" ng-click="toggleCheck(node)" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}" alt="{{node.include == ' ' ? 'partially included' : (node.include == '-' ? 'excluded' : (node.include == '+' ? 'included' : 'not checked'))}}"></a>
<a class="type {{node.iconCls}}" alt="{{loading ? 'loading' : node.entrytype}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
<span ng-click="toggleSelected(node)" ng-bind-html="node.text | highlight:ngSearchFilter"></span>
</div>
<ul ng-class="{expanded: node.expanded}" dx-connect="node"/>
<ul ng-class="{expanded: node.expanded}" dx-connect="node" alt="{{node.expanded ? 'expanded' : 'contracted'}}"/>
</li>
</ul>
@@ -1,12 +1,12 @@
<ul dx-start-with="treedata" class="tree-view">
<li ng-repeat="node in $dxPrior.children" ng-class="{hidden: (node.hidden &amp;&amp; !ngShowHidden)}">
<div ng-class="{selected: node.selected}">
<a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
<a class="check" ng-click="toggleCheck(node)" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}"></a>
<a class="type {{node.iconCls}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
<div ng-class="{selected: node.selected}" alt="{{node.selected ? 'selected' : 'not selected'}}">
<a class="nav" ng-click="toggleExpanded(node)" alt="{{node.expanded ? 'expanded' : 'contracted'}}" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
<a class="check" ng-click="toggleCheck(node)" alt="{{node.include == ' ' ? 'partially included' : (node.include == '-' ? 'excluded' : (node.include == '+' ? 'included' : 'not checked'))}}" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}"></a>
<a class="type {{node.iconCls}}" alt="{{loading ? 'loading' : node.entrytype}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
<span ng-click="toggleSelected(node)" title="{{ node.tooltip }}">{{ node.text }}</span>
</div>
<ul ng-class="{expanded: node.expanded, include: node.include, exclude: node.exclude}" dx-connect="node"/>
<ul ng-class="{expanded: node.expanded, include: node.include, exclude: node.exclude}" alt="{{node.include == '+' ? 'included' : (node.include == '-' ? 'excluded' : 'partially included')}}" dx-connect="node"/>
</li>
</ul>
@@ -1,11 +1,11 @@
<ul dx-start-with="treedata" class="tree-view">
<li ng-repeat="node in $dxPrior.children" ng-class="{hidden: node.invisible || (node.hidden &amp;&amp; !ngShowHidden)}">
<div ng-class="{selected: node.selected}">
<a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
<a class="type {{node.iconCls}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
<div ng-class="{selected: node.selected}" alt="{{node.selected ? 'selected' : 'not selected'}}">
<a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}" alt="{{node.expanded ? 'expanded' : 'contracted'}}"></a>
<a class="type {{node.iconCls}}" alt="{{loading ? 'loading' : node.entrytype}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
<span ng-click="toggleSelected(node)">{{ node.text }}</span>
</div>
<ul ng-class="{expanded: node.expanded}" dx-connect="node"/>
<ul ng-class="{expanded: node.expanded}" alt="{{node.expanded ? 'expanded' : 'contracted'}}" dx-connect="node"/>
</li>
</ul>