Details

    • Testing Instructions:
      Hide

      Test 1 (For master and stables)

      1. This needs to be tested in all supported browsers
      2. Goto site pages>calendar
      3. Try to traverse using a keyboard.
      4. Create a few different type of events if you already dont have any
      5. make sure the mini calendar on the sidebar displays the popup with event details "on focus" (using keyboard) and "on mouseover" (using mouse)
      6. Delete any events corresponding to current date
      7. Make sure the mini calendar on the sidebar displays the popup with content saying "No events" "on focus" (using keyboard) and "on mouseover" (using mouse)

      Test 2 (Just for master)

      1. Make sure for the step 5 and step 7 cases the popup div has "aria-live=off" attribute. Make sure that changes to "aria-live=assertive" when the popup is displayed and changes back to "off" once the popup is invisible.
      2. Make sure all links in the mini calendar on the side bar (corrosponding to days) have "aria-controls='.$popupid.'_panel" atrribute
      Show
      Test 1 (For master and stables) This needs to be tested in all supported browsers Goto site pages>calendar Try to traverse using a keyboard. Create a few different type of events if you already dont have any make sure the mini calendar on the sidebar displays the popup with event details "on focus" (using keyboard) and "on mouseover" (using mouse) Delete any events corresponding to current date Make sure the mini calendar on the sidebar displays the popup with content saying "No events" "on focus" (using keyboard) and "on mouseover" (using mouse) Test 2 (Just for master) Make sure for the step 5 and step 7 cases the popup div has "aria-live=off" attribute. Make sure that changes to "aria-live=assertive" when the popup is displayed and changes back to "off" once the popup is invisible. Make sure all links in the mini calendar on the side bar (corrosponding to days) have "aria-controls='.$popupid.'_panel" atrribute
    • Affected Branches:
      MOODLE_21_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull Master Branch:
      MDL-30889-master
    • Rank:
      33898

      Description

      For the small calendars on the side of the page, either when viewing the main monthly calendar or in the calendar block, events can be seen by hovering over a date with a mouse, but this is not keyboard accessible and is not read by screen readers. An onfocus event, in addition to the onhover event, needs to be added so keyboard events will trigger the popup box. Also the popup will need to have the appropriate ARIA attributes.

        Issue Links

          Activity

          Hide
          Ankit Agarwal added a comment - - edited

          Am not sure if this is the best way to apply those attributes.
          Requesting a review.

          Will port the first commit to stable and update the testing instruction after the review.
          Thanks

          Show
          Ankit Agarwal added a comment - - edited Am not sure if this is the best way to apply those attributes. Requesting a review. Will port the first commit to stable and update the testing instruction after the review. Thanks
          Hide
          Frédéric Massart added a comment -

          Hi Ankit, the code looks good and is working as expected, I just noticed that the HTML properties introduced 'id' and 'aria-controls' are not escaped with quotes. I would suggest to modify those lines so that they are using html_writer which will solve this problem.

          Cheers!

          Show
          Frédéric Massart added a comment - Hi Ankit, the code looks good and is working as expected, I just noticed that the HTML properties introduced 'id' and 'aria-controls' are not escaped with quotes. I would suggest to modify those lines so that they are using html_writer which will solve this problem. Cheers!
          Hide
          Ankit Agarwal added a comment -

          Changes made. Requesting another round of review.
          Thanks

          Show
          Ankit Agarwal added a comment - Changes made. Requesting another round of review. Thanks
          Hide
          Frédéric Massart added a comment -

          Good to go! Pushing for integration.

          Show
          Frédéric Massart added a comment - Good to go! Pushing for integration.
          Hide
          Sam Hemelryk added a comment -

          Hi Ankit,

          I've just been looking at this now.
          These changes look fine thanks although I'm not a fan of the change in context when attaching to the show/hide events it does work.
          Presently I can't get to git.moodle.org so the integration of this issue will have to wait sorry (hopefully fixed when HQ arrives at work).

          In the mean time although not required in this case I do think it would be a good idea to add the dialog role in order to give the aria-live attribute more relevance.
          Not essential as its not required

          BTW http://www.w3.org/WAI/PF/aria-practices/#dialog_tooltip is a good reference for this overlay I think.

          Many thanks
          Sam

          Show
          Sam Hemelryk added a comment - Hi Ankit, I've just been looking at this now. These changes look fine thanks although I'm not a fan of the change in context when attaching to the show/hide events it does work. Presently I can't get to git.moodle.org so the integration of this issue will have to wait sorry (hopefully fixed when HQ arrives at work). In the mean time although not required in this case I do think it would be a good idea to add the dialog role in order to give the aria-live attribute more relevance. Not essential as its not required BTW http://www.w3.org/WAI/PF/aria-practices/#dialog_tooltip is a good reference for this overlay I think. Many thanks Sam
          Hide
          Sam Hemelryk added a comment -

          Integrated now thanks

          Show
          Sam Hemelryk added a comment - Integrated now thanks
          Hide
          Jason Fowler added a comment -

          Worked fine in Firefox, Chrome, and IE8 & 9. Wasn't able to test 2.2 in IE7 though, as I don't have a copy of that

          Show
          Jason Fowler added a comment - Worked fine in Firefox, Chrome, and IE8 & 9. Wasn't able to test 2.2 in IE7 though, as I don't have a copy of that
          Hide
          Dan Poltawski added a comment -

          Congratulations, you've done it!

          Nf n erjneq sbe fhpprfshy vagrtengvba vagb guvf jrrxf eryrnfr, V pna abj qvfpybfr gb lbh gur rkvfgnapr bs shapgvba fge_ebg13(), gb tb va lbhe gbbyxvg nybat jvgu uggc://cuc.arg/znahny/ra/shapgvba.tmtrgff.cuc

          Cyrnfr qb abg nyybj guvf vasbezngvba gb cnff shegure.

          Show
          Dan Poltawski added a comment - Congratulations, you've done it! Nf n erjneq sbe fhpprfshy vagrtengvba vagb guvf jrrxf eryrnfr, V pna abj qvfpybfr gb lbh gur rkvfgnapr bs shapgvba fge_ebg13(), gb tb va lbhe gbbyxvg nybat jvgu uggc://cuc.arg/znahny/ra/shapgvba.tmtrgff.cuc Cyrnfr qb abg nyybj guvf vasbezngvba gb cnff shegure.
          Hide
          Dan Poltawski added a comment -

          Hi Ankit,

          This issue caused a problem where aria-controls value is completely invalid when on the course page block: MDL-42239

          Show
          Dan Poltawski added a comment - Hi Ankit, This issue caused a problem where aria-controls value is completely invalid when on the course page block: MDL-42239

            People

            • Votes:
              1 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: