相关疑难解决方法(0)

我正在构建一个可访问的网站,并试图管理焦点.我需要打开一个模态,然后将焦点放在模态中的第一个元素上,然后捕获焦点,直到模态关闭("取消"或"接受").

HTML

<a href="" ng-click="modalshow = !modalshow; modal.open();">Open Modal</a>
  <div ng-show="modalshow" id="modal">
    <h3 id="tofs" >Terms of Service</h3>
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
    <span>Cancel</span> 
    <span>Accept/span> 
  </div>
  <h2>Seprate Content</h2>

使用Javascript

angular.module('app')
    .controller('Controller', modalCtrl);

  function modalCtrl() {
     $scope.modal = {
       open: function() {
         angular.element('#tofs').focus();

       }
     }
  }

我打开了一个模式弹出窗口。我有无障碍要求。因此添加了ARIA相关标签。但是，当我单击Tab键时，持续聚焦到实际页面后面的页面。

在html文件中添加了role =“ dialog”

但是当模式打开时，我只希望焦点在模式弹出窗口中导航。

在Angular4, HTML5项目上工作。如果我们在HTML文件本身中找到解决方案，那就更好了。我的意思是不添加任何与javascript / jQuery相关的内容以防止这种情况

我自己建立了一个反应模式。当我在模态打开时按 tab 键时，焦点仍然转到后台页面。如何限制模态内组件内的焦点？

下面的逻辑应该是什么？

onKeyPress (e) {
   if (e.keyCode === 9) {
       e.preventDefault();
      // logic here?
   }
}

反应模态代码：

<ReactModal onKeyPress={this.onKeyPress} >
   <input type="text"/>
   <input type="text"/>
</ReactModal>