Modal组件渲染后控制台提示报错信息，"aria-hidden" 被使用到了可聚焦元素上

[BingHua017]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.3

Environment

chrome版本 127.0.6533.73（正式版本）（64 位）

Reproduction link

https://www.antdv.com/components/modal-cn

Steps to reproduce

1. 使用chrome最新版本;
2. 打开antdv组件库的modal界面;
3. 打开console并触发页面的modal组件即可见到此报错信息；

What is expected?

预期是没有此报错信息

What is actually happening?

使用modal组件并调用后console显示如下报错信息： Blocked aria-hidden on a <div> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

MDN文档关于aria-hidden的说明中提到：不要在可以获得焦点的元素上使用 aria-hidden="true"。

[mfish-qf]

我也遇到了相同的问题，解决了吗？

[lv107w]

这个问题我观察了下，换个浏览器就不会报错，在出现报错的浏览器下打开ant design vue官网的modal仍会提示报错，应该和浏览器的版本更新相关

[FlyingTigerReally]

这是一个与可访问性相关的错误提示，说明你在一个

元素上使用了 aria-hidden 属性，而这个元素或其祖先元素刚刚接收了焦点。这会导致屏幕阅读器等辅助技术无法访问到这个元素，这样的做法是不可取的。

aria-hidden 属性通常用于隐藏不需要辅助技术访问的内容。然而，当一个元素被隐藏时，它不应该接收焦点，因为这会让使用辅助技术的用户无法与这个元素进行交互。

为了避免这个问题，你可以考虑使用 inert 属性。inert 属性不仅会隐藏元素，还会防止它接收焦点。

谁能更新？

[LiLongFei0]

我也碰见了 前段时间还没有，版本 3.2.20。

[haokejie]

我这里同样遇到了 版本 4.2.1 ，这似乎和最近浏览器跟新的版本有关

[LiLongFei0]

浏览器也更新了 没有 

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2024年8月1日(星期四) 下午2:11 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [vueComponent/ant-design-vue] Modal组件渲染后控制台提示报错信息，"aria-hidden" 被使用到了可聚焦元素上 (Issue #7749)

我这里同样遇到了 版本 4.2.1 ，这似乎和最近浏览器跟新的版本有关

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

[SAKURA-CAT]

同样的问题🤔

[anyc100]

临时处理的话就先在全局把Modal中该属性的元素隐藏 .ant-modal div[aria-hidden="true"] { display: none !important; }

[Tianci-blog]

官方啥时候把那行代码改一下呀。我浏览器没更新都没报，今天更新了就直接报了这个错。

[Tianci-blog]

临时处理的话就先在全局把Modal中该属性的元素隐藏 .ant-modal div[aria-hidden="true"] { display: none !important; }

大概看了一下，这个元素好像没啥用。不知道有没有我没发现的用处。 不管了先隐藏掉再说

[piggycute]

临时处理的话就先在全局把Modal中该属性的元素隐藏 .ant-modal div[aria-hidden="true"] { display: none !important; }

没用哎，控制台还是报错的

[anyc100]

临时处理的话就先在全局把Modal中该属性的元素隐藏 .ant-modal div[aria-hidden="true"] { display: none !important; }

没用哎，控制台还是报错的

检查一下样式是否生效

[378406712]

临时处理的话就先在全局把Modal中该属性的元素隐藏 .ant-modal div[aria-hidden="true"] { display: none !important; }

没用哎，控制台还是报错的

加在全局css试试，有用的

[atdun]

是不是修复了，我刚刚看控制台不报错了

[Tianci-blog]

是不是修复了，我刚刚看控制台不报错了

如果修复了这个issue会关闭的。现在官方文档那还能复现这个问题。

[atdun]

是不是修复了，我刚刚看控制台不报错了

如果修复了这个issue会关闭的。现在官方文档那还能复现这个问题。

我现在用的版本是3.2.16前几天确实有这个问题，今天看已经没有了，不知道是怎么回事。

[QCDT]

现在依然存在这个问题，不过第二次或者刷新之后点击，错误会消失

[ajiua]

现在还有这个问题 版本 127.0.6533.100（正式版本） （64 位）

[szh18]

现在有解决方法吗

[285858315]

+1

[yang-xianzhu]

这个问题我观察了下，换个浏览器就不会报错，在出现报错的浏览器下打开ant design vue官网的modal仍会提示报错，应该和浏览器的版本更新相关

chrome 127版本后就会

[Tianci-blog]

现在有解决方法吗

你就直接全局加上面那位兄弟的方案，临时解决 div[aria-hidden="true"] { display: none !important; }

[weijuer]

是啊 怎么没有修复 或者有什么更好的解决方案吗

[gezichenshan]

这个问题好像也导致了我的select组件无法open？

[Jzow]

Ant Design官方已修复 50170

[jfyear1994]

.ant-modal div[aria-hidden="true"] { display: none !important; } 临时方案中的display: none !important;
发现一个bug，弹窗内容中如果有a-tab组件切换时候内容显示不出来，改成visibility: hidden !important;后正常

[pzm666]

我ant-design-vue是4.2.3版本，Modal弹窗也报这个错误，谷歌最新的版本