Javascript 基于react的应用程序的移动屏幕阅读器问题

我正在为手机屏幕阅读器开发基于react的应用程序。用例是，对于带有菜单项的对话框，我必须保留一个按钮来关闭对话框，对话框将位于对话框顶部。我必须将它的tabIndex设置为0以使其可访问，这将导致Disclose按钮成为第一个可聚焦项

预期在屏幕阅读器将焦点放在第一个菜单项上后，应该可以访问“取消”按钮。如何处理这个问题

我尝试了以下方法：

<Dialog open={this.state.menuOpen} className="hide-default-dialog-container"
        content={<div className="actionsheet-view-bg" onClick={() => {
            this.setState({menuOpen: !this.state.menuOpen})
        }}> {this.getDismissButtonForActionSheet()}
            <div className="actionsheet-view-container"> {this.getActionSheetItems()} </div>
        </div>}
/>

{this.getDismissButtonFractionSheet（）}
{this.getActionSheetItems（）}
}
/>

这里有四个选项：-

备选案文1。将“关闭”按钮移动到任何“保存/更新”按钮旁边的对话框末尾。 对话框右上角应显示“x”，但没有理由不在对话框底部添加“关闭”按钮，该按钮位于任何“保存/更新”按钮之后

因此，在对话框的页脚中

<button>Save</button> <button>Cancel</button>

当对话框打开时将变为以下内容（并在对话框关闭时恢复）

---

这里有四个选项：-

备选案文1。将“关闭”按钮移动到任何“保存/更新”按钮旁边的对话框末尾。 对话框右上角应显示“x”，但没有理由不在对话框底部添加“关闭”按钮，该按钮位于任何“保存/更新”按钮之后

因此，在对话框的页脚中

<button>Save</button> <button>Cancel</button>

当对话框打开时将变为以下内容（并在对话框关闭时恢复）

您是否可以添加代码来演示问题，这样会更容易提供帮助？{this.getDismissButtonFormationSheet（）}{this.getActionSheetItems（）}/>@MaartenDev我已经添加了上面的代码。你能添加代码来演示这个问题吗，这会使帮助更容易吗？{this.getDismissButtonComponentSheet（）}{this.getActionSheetItems（）}/>@MaartenDev我已经添加了上面的代码。如果我为隐藏的Dismise按钮设置了aria HINDED={true}而没有tabindex，屏幕阅读器将无法访问它。是的，但底部我说要添加的第二个按钮将是。我需要顶部的按钮。由于现在一天中所有对话框的顶部都有一个显示在屏幕阅读器上的“关闭”按钮。然后使用选项2、3或更好的选项，但不按照选项4执行任何操作，这就是为什么我给了您一些选择。关闭按钮作为第一个有焦点的项目没有什么问题。我已经编辑了我的答案，表明它们是不同的选项，您只需要做一个（以及最后一节“语义、转义和焦点管理”）。希望这能帮你解决这个问题。如果我在没有tabindex的情况下为隐藏的Dismise按钮设置aria hidden={true}，屏幕阅读器将无法访问它。是的，但底部我说要添加的第二个按钮是。我需要顶部的按钮。由于现在一天中所有对话框的顶部都有一个显示在屏幕阅读器上的“关闭”按钮。然后使用选项2、3或更好的选项，但不按照选项4执行任何操作，这就是为什么我给了您一些选择。关闭按钮作为第一个有焦点的项目没有什么问题。我已经编辑了我的答案，表明它们是不同的选项，您只需要做一个（以及最后一节“语义、转义和焦点管理”）。希望这能帮你澄清。

<header aria-hidden="true"></header>
<main aria-hidden="true"></main>
<footer aria-hidden="true"></footer>
<dialog aria-hidden="false"></dialog>