首页 > 解决方案 > 如何在 jQuery Datepicker 中实现 aria-expanded 值?

问题描述

我正在寻找在 .ui-datepicker-trigger 下扩展的 aria 的实现,所以当点击焦点或选项卡按钮时,如果日历被展开,叙述者应该讲述日历展开,当焦点关闭时,它应该说日历折叠。下面是代码。

 $("#txtIssueDateTo").datepicker({
        dateFormat: 'mm/dd/yy', showOn: 'both', buttonImageOnly: true, buttonImage: 'images/calender.png', maxDate: 'today', buttonText: "Select to date button"});

     $(".ui-datepicker-trigger").keyup(function (event) {
        if (event.keyCode === 13) {
            this.click();
            this.focus();
        }});

img-1 叙述日历是否折叠 img-2 按下回车后它应该叙述日历展开

一个 html+ javascript 演示在这里

<button onclick="myFunction()"  id="p2" aria-expanded="false">Try it</button>
 <script>
  function myFunction() {
  var x = document.getElementById("p2").getAttribute("aria-expanded"); 
  if (x == "true") 
  {
  x = "false"
  } else {
  x = "true"
  }
  document.getElementById("p2").setAttribute("aria-expanded", x);
  }
 </script>

标签: jqueryaccessibilityjquery-ui-datepickerinput-button-image

解决方案


推荐阅读