Modal contains a focusable element that has no interactive content

[GrigorM]

Reproduction link

Steps to reproduce

1. Open any modal dialog, either the basic one or the ones created with Modal.method()
2. Open the browser console and type document.activeElement
3. The active element is empty and not interactive
   <div tabindex="0" style="width: 0px; height: 0px;… hidden; outline: none;" aria-hidden="true"></div>

What is expected?

From MDN:

Focusable elements should have interactive semantics

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

The modal should automatically focus the close button, or the Ok button, and navigation with Tab or Shift Tab should send focus on interactive elements, not on empty and non-interactive ones

What is actually happening?

An empty and non-interactive element is being focused by default and/or by navigating with Tab or Shift Tab when modal is open

Environment	Info
antd	5.1.6
React	18
System	any system
Browser	any browser

---

No idea what role that element is serving there, but it's an accessibility problem, and should be removed.

[MadCcc]

This element is used for cycling focus elements inside Modal. And confirm button would be focused in Modal.confirm.

[GrigorM]

You can cycle through the elements even without it. The problem is that it is an empty. non-interactive element that is receiving focus. It is an accessibility violation (no text, no semantics, no action) therefore it should be removed or it should not receive focus

[github-actions]

Hello @GrigorM. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @GrigorM，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[AnathanPham]

@MadCcc look at this please. react-component/dialog#360