背景

在前端开发过程中,多数情况下，由于资金成本及其他因素的影响,尤其是一些中小型项目, 并不会花费太多时间专门处理 'aria-hidden' 相关的问题. 这也导致一些前端应用框架(非vue,react等原始框架), 在某些应用场景，比如弹出modal窗口的时候会出现如下警告或报错.

当然，如果去搜索这个问题，会得到一个几乎通用的答案(此处以ant-design-vue框架为例), 如下所示，即隐藏 aria-hidden='true' 的元素。

.ant-modal-root div[aria-hidden='true'] {
  display: none;
}

本文的讨论基于以上背景展开.

意外的问题及解决过程

在开发的一段时间内，博主本人也是按照通用方案解决这个问题的，而且效果很好。直到添加了一个xterm.js库并使用其展示websocket相应数据，相应的数据并没有被显示，从 debug log中可以看到数据确实在实时返回，虽然看不到数据但 可以看到垂直滑动条，这都说明其实是有数据的，但是并没有被显示，如下图所示:

反复多次查看网页元素，发现 xtrm.js 渲染时候使用了 aria-hidden='true' , 而把通用解决方案拿掉，显示就正常了。所以可以断定通用解决方案正好把这个元素隐藏了。

因为并没有在 xterm.js 中找到 'aria-hidden' 相关的特殊设置. 所以，接下来只要在通用解决方案中排除 'xterm-rows' 这个类即可，所以解决方案变成了下面这样:

.ant-modal-root div:not(.xterm-rows)[aria-hidden='true'] {
  display: none;
}

确实，这样会起作用，但是只起了一点作用，看下面的图，是现在的输出:

可以看到，有输出了，但是字体是混乱的(正确的字体显示会在后面看到), 所以怀疑是不是还有别的元素被这个解决方案隐藏了。于是在浏览器页面元素一个一个点开看，终于又找打了一个，而这个正好是关于xtrm.js 字体定义的部分, 如下所示:

ok. 基本稳了，现在把 'xterm-width-cache-measure-container' 类也排除掉, 于是决绝方案就变成了下面的样子:

.ant-modal-root div:not(.xterm-rows, .xterm-width-cache-measure-container)[aria-hidden='true'] {
  display: none;
}

再次测试，发现正常了

总结

现在来看这个问题不复杂, 按部就班, 一条一条梳理, 就解决了。但是如果单纯的copy paste解决方案，加上如果又过了一段时间，已经几乎忘记了添加了这个规则，那怎么办呢? 本人也是就检查了大半天才发现 aria-hidden 这个可疑点的。不胜唏嘘. 看来大厂对流程的严格要求是有道理的，不然可能就会遇到像这种看起来莫名其妙无从下手的问题了。 共勉.