Updated HTML markup to include additional alt-tags to assist screen readers.
This fixes #2040
This commit is contained in:
@@ -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 && !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 && !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 && !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>
|
||||
|
||||
Reference in New Issue
Block a user