Android 如何使Ionic Toast与屏幕阅读器更兼容

我正在努力使我的应用程序更兼容屏幕阅读器。我使用谷歌对讲。我目前的障碍发生在与祝酒者一起工作时。 我创建了一个按钮，创建并呈现一个简单的祝酒词。由于屏幕阅读器完全忽略了它们，我向DOM添加了以下属性：

• 角色class='alert'
• “根”的咏叹调
• aria label='message'

出乎我的意料，屏幕阅读器描述了两次按钮，然后在我点击按钮时描述了祝酒词。这种情况只发生一次。如果我再次单击该按钮，则读取元素的顺序与我从一开始就希望的顺序相同。 我的猜测是焦点跳回按钮（一次），并因此被读取两次

---

有人知道我怎么解决这个问题吗？是什么导致焦点返回到按钮？

在测试了两种解决方案后，我对以下几点感到满意：

 private async createIosToast(message: string, duration: number) {
    const toast = await this.toastController.create({
      message,
      duration,
      color: 'primary'
    });

    toast.setAttribute('role', 'alert');
    toast.setAttribute('id', 'toast');

    const toastElement = document.getElementById('toast') as HTMLElement;
    const activeElement = this.correctActiveElement.getCorrectActiveElement();

    // set focus on toast
    toast.addEventListener('ionToastWillPresent', async () => {
      this.focusService.focus(toastElement);
    });

    // reset focus
    toast.onDidDismiss().then(async () => {
      console.log(activeElement);
      this.focusService.focus(activeElement);
    }, error => {
      console.log(error);
    });

    return toast;
  }

以下方法在同时为android和iOS开发时非常重要。由于focus方法设置了tabindex，因此该方法避免将其应用于错误的元素。否则，如果元素有阴影根，它将可聚焦两次（仅在android上）

此方法仅设置焦点并应用tabindex：

  public focus(element: HTMLElement): void {
    setTimeout(() => {
      element.setAttribute('tabindex', '0');
      element.focus();
    }, 0);
  }

结论：使用这个代码，我最小化了我的问题。 在android上会有一些我无法消除的不必要的振动。它们是由焦点跳回webview引起的。 在iOS上，土司将被读取一次，然后被中断，然后被完全读取

在Google Pixel和iPhone X上测试

  public focus(element: HTMLElement): void {
    setTimeout(() => {
      element.setAttribute('tabindex', '0');
      element.focus();
    }, 0);
  }