Question

我正在研究当前项目的一个新功能，我们正在处理可访问性。

所以基本上我有一个在指令上初始化或触发的模态。模态内容是一系列动态部分。

产品信息部分
产品详情列表部分
新上市部分

现在看到上面的结构了。当我们使用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

但这些不起作用。

有没有其他方法可以达到这个效果？

先谢谢！

干杯！

AngularJS中的辅助功能（标签）

0 个答案: