为el-pagination分页按钮添加aria-label的JS代码失效如何解决

代码存在两处逻辑错误，导致aria-label无法正确生效：

• 选择目标错误：document.querySelectorAll('.el-pagination')匹配的是最外层分页容器div，并非实际需要添加无障碍标签的上一页、下一页可点击按钮。单个分页容器内同时包含两个翻页按钮，给外层容器统一设置标签的逻辑本身不成立。
• 判断逻辑错误：你在外层分页容器范围内查找el-icon-arrow-left元素，只要容器内存在左箭头图标，长度判断结果永远为1，会把外层容器的aria-label固定设为Previous，完全无法区分下一页按钮。
  另外从无障碍规范来说，aria-label需要绑定在可交互元素上才能被读屏工具识别，设置在非交互的外层div上本身就不会产生预期效果。

直接匹配对应按钮分别设置属性即可，不需要额外做图标判断：

// 为上一页按钮设置无障碍标签
document.querySelectorAll('.el-pagination .btn-prev').forEach(btn => {
  btn.setAttribute('aria-label', 'Previous')
})
// 为下一页按钮设置无障碍标签
document.querySelectorAll('.el-pagination .btn-next').forEach(btn => {
  btn.setAttribute('aria-label', 'Next')
})

如果需要兼容自定义类名的特殊场景，要把遍历目标换成按钮元素而非外层容器，再做图标判断：

document.querySelectorAll('.el-pagination button').forEach(button => {
  const isPrev = button.querySelector('.el-icon-arrow-left') !== null
  button.setAttribute('aria-label', isPrev ? 'Previous' : 'Next')
})

内容的提问来源于stack exchange，提问作者Neeza