首页 > 解决方案 > 如何将 SweelAlert2 图标设置为 aria-hidden="true"?

问题描述

我使用最新的 SweetAlert2。对于一些WCAG 调整,我必须将所有图标设置为 aria-hidden = "true"。我还没有为此找到合适的 swal2 参数。

使用参数onOpen:和相应的函数setAriaIconsSwal()我创建了一个解决方法。但这是难看的 setTimeOut 的解决方法。我怎样才能做得更好?

  function showSwalWcag() {
    Swal.fire({
      title: "WCAG Icon",
      text: "Text",
      icon: "error",
      onOpen: setAriaIconsSwal(),
      confirmButtonColor: "red",
      confirmButtonText: "OK"
    });
  }
  
   function showSwal() {
    Swal.fire({
      title: "Original Icon",
      text: "Text",
      icon: "error",
      confirmButtonColor: "red",
      confirmButtonText: "OK"
    });
  }
  
  function setAriaIconsSwal() {
    setTimeout(function() {
      $(".swal2-icon").attr("aria-hidden", "true");
    }, 250);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@9/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9/dist/sweetalert2.min.js"></script>

<button onclick="showSwalWcag();">click me (Edited swal)</button>
<button onclick="showSwal();">click me (Original swal)</button>

标签: javascriptjquerysweetalert2

解决方案


推荐阅读