javascript - NVDA在 react 更新html dom之前先选择更改

在这里，我有一个可以动态更改其数据的组件。并且我们需要同时支持JAWS和NVDA。

当我从父组件更新道具时，相关组件得到更新，所有内容对于普通用户而言都工作正常。但是，使用两个屏幕阅读器时，NVDA不会选择更改。

组件内部的方法很少。

render() {
   console.log("render");
   var alertForPrevButton = document.querySelector('#readDesc');

   if (alertForPrevButton !== null) {
       alertForPrevButton.textContent = this.props.messageBody + this.generateMessages();
   }

   return (<div className="messages">
               <div className="sr-only" aria-live="assertive" id="readDesc"></div>
               <p>{this.props.messageBody}</p><p>{this.generateMessages()}</p>
           </div>);
}

generateMessages() {
   console.log("generateMessages");
   const courseEndDate = moment(this.props.courseEndDate);
   var date            = moment(this.props.selectedDate);
   var dayCount        = 0;

   while (courseEndDate.diff(date) >= 0) {
       var assignmentsForDate = AssignmentHelper.getAssignmentsForDueDate(
                                   this.props.allAssignments,
                                   date.format(AppConstants.DATE_FORMAT));

       if (assignmentsForDate.length > 0) {

           switch (dayCount) {
               case 1:
                   return MessageConstants.getFutureDueAssignmentMessage('tomorrow');
               default:
                   return MessageConstants.getFutureDueAssignmentMessage('in ' + dayCount + ' days');
           }

       }

       dayCount += 1;
       date.add(1, 'days');
   }

   return MessageConstants.getNoDueAssignmentMessage();
}

在这里，我使用了aria-live =“ assertive”。 JAWS会选择并进行相应的读取。但是NVDA不会选择更改。

有人知道为什么会这样吗？

最佳答案

WAI-ARIA支持取决于屏幕阅读器和浏览器，并且充其量只是平均水平。除非您无法使用本机HTML复制，否则最好避免使用ARIA。

就NVDA中的aria-live而言，它几乎行不通，并且只有非常基本的支持。 NVDA版本2017.1至2017.4无法读取Firefox或Chrome中的咏叹调活动区域。旧版本可在Firefox中运行，但不能在IE中运行。

在NVDA的git上对此提出了一个issue，但尚未解决。

总而言之，可能不是您的代码，特别是如果JAWS适当地选择了它。

有用的WAI-ARIA兼容性参考
PowerMapper WAI-ARIA Screen Reader Compatibility