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

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

    XMLWordPrintable

    Details

    • Testing Instructions:
      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)
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-34975-master

      Description

      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.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              fred Frédéric Massart
              Reporter:
              bawjaws David Scotson
              Peer reviewer:
              Adrian Greeve
              Integrator:
              Dan Poltawski
              Tester:
              Ankit Agarwal
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Barbara Ramiro, Bas Brands
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                12/Nov/12