AngularJS中的辅助功能(标签)

时间:2018-02-22 08:26:12

标签: angularjs accessibility

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

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

  1. 产品信息部分
  2. 产品详情列表部分
  3. 新上市部分
  4. enter image description here

    现在看到上面的结构了。当我们使用tab时,它会自动“标记”所有输入字段(包括按钮,输入字段,textarea等)。

    需要注意的其他事项是,如果产品列表部分中存在/是现有列表,则隐藏新列表部分

    因此,如果您在创建新列表上“标签”然后按Enter键,则会出现新列表部分,并立即关注该部分的文本字段。

    这应该是启用New Listing部分时的Tab键序列。

    enter image description here

    在第一次出现时,它将传递模态内的所有元素,包括刚刚打开的新列表部分(绿色序列)。因此,在关闭按钮上进行选项卡后,它将从列表中重新开始,并且不应该跳过新列表部分中的元素;但问题是,它正在跳过上述部分并且只是遵循红色序列。只有在创建新列表按钮后再次点击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

    但这些不起作用。

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

    先谢谢!

    干杯!

0 个答案:

没有答案