可访问的Bootstrap模式

Question

我正在尝试让屏幕阅读器可以访问Bootstrap Modal。这意味着我需要添加role="dialog"或类似于模态的最高级别div。 我的问题是，在生成它们时，我无法向正确的级别div添加任何内容。

此代码将role="dialog"添加到模态的第二高div。

<div class="modal-content" role="dialog">
    <div class="modal-header">
        <div class="alert alert-warning">
            <strong>Warning!</strong> Are you sure you want to clear all responses in this section?
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="ok()" role="button" aria-label="Confirm clearing of the entire section">Ok</button>
        <button class="btn btn-default" ng-click="cancel()" role="button" aria-label="Deny clearing of the entire section">Cancel</button>
    </div>
</div>

我想在显示的div中扮演角色，但是生成了一个和父亲，我无法控制它们。

我正在通过

显示模态

$scope.clearSection = function () {
        var modal = $modal.open({
            controller: clearSectionController,
            templateUrl: 'Engine/Views/ClearSectionModal.html'
        });
        ...
}