Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-65390

Accessibility #11 Content appears above “show more” button

XMLWordPrintable

    • Any
    • MOODLE_35_STABLE, MOODLE_36_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE, MOODLE_39_STABLE
    • master-MDL-65390
    • Hide
      1. Log in as admin and click calendar.
      2. Click on "New event" button.
      3. Click on the "Show more..." button.
      4. Check the "Show less..." button is displayed at the top of the new fields displayed (Description, Location...).
      5. Close (without saving).
      6. Click on "New event" button.
      7. Use the keyboard instead the mouse (using, for instance, the "Tab" key) to access the fields in these form. Use "Enter" or "Space" to click the "Show more..." button.
      8. Check "Show less..." button is displayed at the top of the new fields displayed (Description, Location...).
      9. Keep using the keyboard ("Tab" key) and confirm next element getting the focus on (after the previous button) is the Description editor in the expanded section.

       

      Show
      Log in as admin and click calendar. Click on "New event" button. Click on the "Show more..." button. Check  the "Show less..." button is displayed at the top of the new fields displayed (Description, Location...). Close (without saving). Click on "New event" button. Use the keyboard instead the mouse (using, for instance, the "Tab" key) to access the fields in these form. Use "Enter" or "Space" to click the "Show more..." button. Check "Show less..." button is displayed at the top of the new fields displayed (Description, Location...). Keep using the keyboard ("Tab" key) and confirm next element getting the focus on (after the previous button) is the Description editor in the expanded section.  

      When users are adding events to the calendar, they can click a "Show more…" link to expand a content panel and view more options. This behaviour is clear visually, however, the content is loaded above the show more link.

      Implications
      Screen reader users may miss out on the dynamic content as it loads above the currently focused element.

      Recommendation
      Ensure dynamic content is loaded below the triggering component. This will allow users to move forward into the new content.
      Alternatively, include screen reader accessible instructions which inform users that the new elements will be loaded above the triggering component.

       

      To replicate:

      1. Log in and click calendar.

      2. Click on new event.

      3. Click on the show more button.

      4. If we follow these steps on a screen reader, the next element that will go to is "save" button, instead of the first element in the expanded section.

       

      References:

      https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure

      https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-img-long-description.html

        1. image-2021-02-10-11-47-41-099.png
          image-2021-02-10-11-47-41-099.png
          61 kB
        2. show-less.png
          show-less.png
          10 kB
        3. show-more.png
          show-more.png
          8 kB

            yao9394 John Yao
            yao9394 John Yao
            Nathan Nguyen Nathan Nguyen
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 25 minutes
                2h 25m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.