1

我使用 ReactJS 编写具有可访问性的应用程序。

我对 NVDA 和 FireFox 有疑问 - NVDA 无法正确读取数字。

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

我创建了概念证明来显示问题：

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：

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

重现 - 悲伤的路径：

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

重现 - 快乐的道路：

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

没有 setTimeout 怎么解决这个问题？

4

0 回答 0