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

trafficstars

[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

使用chrome最新版本;
打开antdv组件库的modal界面;
打开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"。

Jul 25 '24 02:07 BingHua017

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

Jul 28 '24 05:07 mfish-qf

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

Jul 29 '24 03:07 lv107w

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

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

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

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

谁能更新？

Jul 30 '24 03:07 FlyingTigerReally

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

Jul 30 '24 05:07 LiLongFei0

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

Aug 01 '24 06:08 haokejie

浏览器也更新了没有

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 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: @.***>

Aug 01 '24 06:08 LiLongFei0

同样的问题🤔

Aug 01 '24 08:08 SAKURA-CAT

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

Aug 01 '24 09:08 anyc100

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

Aug 02 '24 08:08 dcileiu

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

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

Aug 02 '24 08:08 dcileiu

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

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

Aug 02 '24 10:08 piggycute

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

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

检查一下样式是否生效

Aug 05 '24 02:08 anyc100

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

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

加在全局css试试，有用的

Aug 06 '24 08:08 378406712

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

Aug 06 '24 09:08 atdun

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

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

Aug 06 '24 09:08 dcileiu

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

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

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

Aug 06 '24 10:08 atdun

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

Aug 07 '24 09:08 QCDT

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

Aug 07 '24 10:08 ajiua

现在有解决方法吗

Aug 08 '24 01:08 szh18

+1

Aug 09 '24 02:08 285858315

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

chrome 127版本后就会

Aug 09 '24 07:08 yang-xianzhu

现在有解决方法吗

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

Aug 09 '24 07:08 dcileiu

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

Aug 12 '24 03:08 weijuer

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

Aug 12 '24 05:08 gezichenshan

Ant Design官方已修复 50170

Aug 13 '24 15:08 Jzow

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