1

I am looking for implementation of aria expanded under .ui-datepicker-trigger , so when ever the focus or tab button is hit , if the calendar is expanded , the narrator should narrate calendar expanded , when focus is off it should say calendar collapsed. The below is the code.

 $("#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 Should narrate calendar collapsed img-2 After hitting enter it should narrate calendar expanded

An html+ javascript demo is here

<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>
Network_127
  • 93
  • 1
  • 6
  • Can you also put the code in a fiddle like this one? http://jsfiddle.net/Uv8V4/ Is any of this helpful? https://stackoverflow.com/questions/24714217/focus-on-jquery-ui-calender-accessibility-with-tab-key Searching for expanded doesn't seem to show anything helpful. Is there another word for expanded? – react_or_angluar Dec 14 '20 at 06:33
  • Is any of this helpful? https://stackoverflow.com/questions/24040165/jquery-datepicker-close-datepicker-after-selected-date – react_or_angluar Dec 14 '20 at 06:39

0 Answers0