Question

我使用ReactJS编写具有辅助功能的应用程序。

我遇到NVDA和FireFox问题 - NVDA无法正确读取数字。

我找到了解决方案（使用setTimeout加0延迟），但我认为，可以做得更好。

我已经创建了概念证明以显示问题：

HTML：

<body>
  <div id="root"></div>
</body>

JavaScript的：

function generateRandomNumber(min = 0, max = 9, toFixed = 2) {
  const number = (Math.random() * (max - min) + min).toFixed(toFixed);
  return number;
};

function getRandomNumber(min = 0, max = 9, toFixed = 2) {
  return generateRandomNumber(101, 400, 2);
};

class Work extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
      showElement: true
    };
  }

  randomNumber() {
    this.setState({
      showElement: false,
      number: getRandomNumber()
    });
    setTimeout(() => {
      this.setState({
        showElement: true
      });
    }, 0);
  }


  render() {
    return (
      <div>
        <div aria-live="polite">
          {this.state.showElement &&
          <p>{this.state.number}</p>}
        </div>
        <button onClick={() => this.randomNumber()}>Random me!</button>
      </div>
    );
  }
}

class NotWork extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }


  randomNumber() {
    this.setState({
      number: getRandomNumber()
    });
  }

  render() {
    return (
      <div>
        <div aria-live="polite">
          <p>{this.state.number}</p>
        </div>
        <button onClick={() => this.randomNumber()}>Random me!</button>
      </div>
    );
  }
}




class App extends React.Component {
  render(){
    return (
      <div className="App">
        <div>
          <div aria-live="polite">
            <h3>Works example:</h3>
            <Work />
            <hr />
            <h3>Not works example:</h3>
            <NotWork />
          </div>
        </div>
      </div>
    )
  }
}

    React.render( < App / > ,
      document.getElementById('root')
    );

JSFiddle for run：

https://jsfiddle.net/IceManSpy/1bxu6aau/1/

重现 - 悲伤的道路：

在FireFox上运行jsfiddle
运行NVDA（您可以打开语音查看器）
有时候点击随机我！ in not works example
检查结果 - 第一个值可以，但接下来没有。
有时会是（fe.345.67）：
- 345
- 67
但有时（它缺少第一个数字）：
- 45
- 67

重现 - 快乐的道路：

在FireFox上运行jsfiddle
运行NVDA（您可以打开语音查看器）
有时候点击随机我！在Works示例中
检查结果 - 每个值都可以。

如何在没有setTimeout的情况下解决此问题？

使用ReactJS，NVDA和FireFox的数字读数不佳

0 个答案: