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

Misleading "click to expand or collapse" text, with usability/accessibility issues

XMLWordPrintable

    • MOODLE_23_STABLE
    • MOODLE_22_STABLE, MOODLE_23_STABLE
    • MDL-34975-master
    • Hide

      Test pre-requisites

      • JavaScript enabled
      • Purge all caches in browser and moodle.

      Test steps

      1. Navigate to Home ► Site administration ► Users ► Permissions ► Check system permissions
      2. Make sure you can expand/collapse the search options clicking the icon
      3. Make sure you can expand/collapse the search options clicking search options
      1. Navigate to Home ► Courses ► Some Course ► Question bank ► Questions
      2. Create a new multiple choice question
      3. Preview the question
      4. Make sure you can expand/collapse Technical information clicking the icon
      5. Make sure you can expand/collapse Technical information clicking Technical information

      (Please note that I'm aware of the help button being in encapsulate in the <a> but this is not a regression, this was already the case before)

      Show
      Test pre-requisites JavaScript enabled Purge all caches in browser and moodle. Test steps Navigate to Home ► Site administration ► Users ► Permissions ► Check system permissions Make sure you can expand/collapse the search options clicking the icon Make sure you can expand/collapse the search options clicking search options Navigate to Home ► Courses ► Some Course ► Question bank ► Questions Create a new multiple choice question Preview the question Make sure you can expand/collapse Technical information clicking the icon Make sure you can expand/collapse Technical information clicking Technical information (Please note that I'm aware of the help button being in encapsulate in the <a> but this is not a regression, this was already the case before)

      On this page:

      {/admin/roles/check.php?contextid=1}

      and various others with a search box that returns users, there's an expandable set of advanced options at the bottom.

      If you hover over the header text ("Search Options" in english) you get a pop-up which shows the title text: "Click to expand or collapse". However, clicking on the text does nothing. To expand/collapse the options you need to click on the arrow image at the end of the text.

      This arrow image has two accessibility issues. One, it's a very small click target, which makes it hard for people to use on iPhones, iPads etc. and two, although it's the only thing inside a click-able anchor tag, the image has no alt text.

      I'd suggest making the the clickable area the whole text, which solves both problems. I'd also think about changing the open/close state to a class that gets toggled, rather than directly changing an img src (which is what I assume is happening now). This gives many more options for presenting the change in state.

            fred Frédéric Massart
            bawjaws David Scotson
            Adrian Greeve Adrian Greeve
            Dan Poltawski Dan Poltawski
            Ankit Agarwal Ankit Agarwal
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved:

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