我正在研究当前项目的一个新功能,我们正在处理可访问性。
所以基本上我有一个在指令上初始化或触发的模态。模态内容是一系列动态部分。
现在看到上面的结构了。当我们使用tab时,它会自动“标记”所有输入字段(包括按钮,输入字段,textarea等)。
需要注意的其他事项是,如果产品列表部分中存在/是现有列表,则隐藏新列表部分。
因此,如果您在创建新列表上“标签”然后按Enter键,则会出现新列表部分,并立即关注该部分的文本字段。
这应该是启用New Listing部分时的Tab键序列。
在第一次出现时,它将传递模态内的所有元素,包括刚刚打开的新列表部分(绿色序列)。因此,在关闭按钮上进行选项卡后,它将从列表中重新开始,并且不应该跳过新列表部分中的元素;但问题是,它正在跳过上述部分并且只是遵循红色序列。只有在创建新列表按钮后再次点击Enter按钮时,它才会选中该部分。
不确定原因,但这应该是正常的行为还是不应该跳过已经打开的部分的元素?
THE MODAL
<div class="listing-modal modal fade in" role="dialog" tabindex="-1" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button class="modal-close-button hidden-xs" data-dismiss="modal">
<span class="modal-close-icon">Close</span>
</button>
<div class="modal-header">
<h4 class="modal-title">Product Info</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="details-container">
<div class="col-sm-4 col-xs-12">
<div class="image-container">
<img />
</div>
</div>
<div class="col-sm-8 col-xs-12">
<div class="info-container">
blah blah blah
</div>
</div>
</div>
<div class="listing-container">
<div class="product-listing">
<ul class="list-unstyled list-a90-class">
<li ng-repeat="(index, list) in listings" tabindex="0" class="list-item" ng-keyup="$event.keyCode == 13 ? getThisList(list.name): null">{{list.name}}</li>
</ul>
<div class="cta-container">
<button type="submit" class="btn btn-default" ng-click="addtoExistingList(selectedList,info)">Add to this List</button>
<label class="cta">
<a tabindex="0" ng-click="newList();" href="">Make New List</a>
</label>
</div>
</div>
</div>
<div class="new-listing" ng-class="!listings.length ? 'no-list' : ''" ng-show="!listings.length || enableNewListingSection">
<ng-form name="myProductListing" action="">
<div class="form-input">
<input type="text" class="form-control" name="listName" ng-model="listName" placeholder="New info" />
</div>
<div class="cta-container">
<button type="submit" class="btn btn-default" ng-click="createNewList(listName)">Create List</button>
<label class="cta">
<a tabindex="0" ng-click="cancelList();" href="">Cancel</a>
</label>
</div>
</ng-form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我已经为列表实现了tabindex,它运行正常。
我现在唯一的问题是新上市部分的标签。
我尝试添加:
tabindex,aria-hidden = false
但这些不起作用。
有没有其他方法可以达到这个效果?
先谢谢!
干杯!